javascript 简易21点赌博游戏

红太狼 2022-05-16 08:41 169阅读 0赞

![70][]

picture是自己定义的，直接复制的话在你自己电脑上会报错，看个思路就行了

<!DOCTYPE html>  
<html lang="zh-cn">  
<head>  
 <meta charset="UTF-8">  
 <title>Document</title>  
 <style>  
 \#d1 \{  
  width: 450px;  
  height: 450px;  
  border: 1px solid black;  
  margin: 0 auto;  
 \}  
 \#d1 \#i0,\#i1,\#i2 \{  
  height: 121px;  
  width: 131px;  
  display: inline-block;  
  background-color:\#666;  
  margin-left: 11px;  
  margin-top: 10px;  
  -webkit-transition-property: transform;  
  -webkit-transition-timing-function:linear;  
 \}  
 \#d1 \#s0,\#s1,\#s2 \{  
  display: inline-block;  
  height: 121px;  
  width: 131px;  
  transform: rotateY(90deg);  
  -webkit-transition-duration: 1s;  
 \}

\#d1 img \{  
  display: inline-block;  
  padding-top: 20px;  
  margin-left: 30px;  
  width: 100px;  
  height: 100px;

\#d2 \{  
  width: 200px;  
  height: 25px;  
  border: 1px solid black;  
  margin: 0 auto;  
  margin-top: 50px;  
  text-align: center;  
 \}  
 \#d3,\#d4,\#d5,\#d6 \{  
  display: inline-block;  
  cursor: pointer;  
 \}  
 \#d3,\#d4,\#d5,\#d6 span \{  
  display: inline-block;  
  text-align: center;  
  width: 85px;  
  height: 30px;  
  line-height: 30px;  
  border: 1px solid black;  
  border-radius: 5px;  
  margin-left: 15px;  
  margin-top: 50px;  
 \}  
 \#d7 \{  
  margin-top: 50px;  
  margin-left: 140px;  
  cursor: pointer;  
 \}  
 \#d7 span \{  
  display: inline-block;  
  text-align: center;  
  width: 160px;  
  height: 30px;  
  line-height: 30px;  
  border: 1px solid black;  
  border-radius: 5px;  
 \}

</style>  
 <script>  
 var i = 0;  
 var a = new Array(4);  
 var j = 0;  
 var result = 0;  
 function fanmian()\{  
  if(i >= 3)\{  
   alert("无牌");  
   i = 0;  
   return;  
  \}  
  var s1 = document.getElementById('s'+i);  
  var i1 = document.getElementById('i'+i);  
  s1.style.transitionDuration = "1s";  
  if(result < 22)  
  \{  
   if (a\[i\] < 50)  
   \{  
   var t = a\[i\] % 10;  
   if(t == 0) \{result = result + 10;\}  
   else \{result = result + t;\}  
   \}  
  else if(a\[i\] < 62)\{result = result + 10; \}  
  else if(a\[i\] < 64)\{j++;\}  
  \}  
  else\{  
   alert("已经爆了");  
   return;  
  \}  
  console.log(result);  
  i++;  
  i1.style.backgroundColor = 'white';  
  s1.style.transform = "rotateY(0deg)";  
 \}  
 function yaopai()\{  
  if(result > 21)\{  
   alert("已经爆了");  
   return;  
  \}  
  i = 0;  
  console.log(result);  
  var img1 = document.getElementById('img1');  
  var img2 = document.getElementById('img2');  
  var img3 = document.getElementById('img3');  
  var s1 = document.getElementById('s0');  
  var s2 = document.getElementById('s1');  
  var s3 = document.getElementById('s2');  
  var i1 = document.getElementById('i0');  
  var i2 = document.getElementById('i1');  
  var i3 = document.getElementById('i2');

i1.style.backgroundColor = '\#666';  
  i2.style.backgroundColor = '\#666';  
  i3.style.backgroundColor = '\#666';

s1.style.transitionDuration = "0s";  
  s2.style.transitionDuration = "0s";  
  s3.style.transitionDuration = "0s";  
    
  s1.style.transform = "rotateY(90deg)";  
  s2.style.transform = "rotateY(90deg)";  
  s3.style.transform = "rotateY(90deg)";

a\[0\] = getRandom(64,10);  
  while(1)\{  
    a\[1\] = getRandom(64,10);  
   if(a\[1\] != a\[0\])\{break;\}  
  \}  
  while(1)\{  
    a\[2\] = getRandom(64,10);  
   if(a\[2\] != a\[0\] && a\[2\] != a\[1\])\{break;\}  
  \}  
  img1.src = "picture/" + a\[0\] +".jpg";  
  img2.src = "picture/" + a\[1\]+".jpg";  
  img3.src = "picture/" + a\[2\] +".jpg";  
 \}  
 function getRandom(max,min)\{  
    var rand=false;  
    rand=Math.floor(Math.random()\*max);  
    if(!(min==undefined) && (max>=min))\{  
      rand=Math.floor(Math.random()\*(max-min)+min);  
    \}else if(max<min)\{  
      return false;  
    \}  
  return rand;  
\}

window.οnlοad=function()\{  
  var img1 = document.getElementById('img1');  
  var img2 = document.getElementById('img2');  
  var img3 = document.getElementById('img3');  
   a\[0\] = getRandom(64,10);  
  while(1)\{  
    a\[1\] = getRandom(64,10);  
   if(a\[1\] != a\[0\])\{break;\}  
  \}  
  while(1)\{  
    a\[2\] = getRandom(64,10);  
   if(a\[2\] != a\[0\] && a\[2\] != a\[1\])\{break;\}  
  \}  
  img1.src = "picture/" + a\[0\] +".jpg";  
  img2.src = "picture/" + a\[1\]+".jpg";  
  img3.src = "picture/" + a\[2\] +".jpg";  
 \}  
 function zengjia()\{  
  var d2 = document.getElementById("d2");  
  var s = d2.innerText;  
  s = s.split(":")  
  s = parseInt(s\[1\]);  
  s = s + 100;  
  d2.innerText ="当前堵注:"+s;

\}  
 function tanchu()\{  
  i = 0;  
  result = 0;  
  j = 0;  
  var s=window.prompt("请输入堵注");  
  if(s == "")\{s = 0;\}  
  var d2 = document.getElementById("d2");  
  d2.innerText ="当前堵注:"+s;  
  yaopai();  
 \}  
 function end()\{  
  if(j)\{  
   var s=window.prompt("你有"+j+"张王,请选择点数");  
  \}  
  if(j > 1)\{  
   s = s.split(",");  
   result = result + parseInt(s\[0\]) + parseInt(s\[1\]);  
  \}  
  else\{  
   result = result + parseInt(s);  
  \}  
  if(result > 21)\{alert("已经爆了")\}  
  else \{alert("你的点数为"+result);\}   
  tanchu();  
 \}  
 </script>  
</head>  
<body>  
 <div id="d1">  
  <div id="i0" ><span id="s0"><img src="" alt="" id="img1" ></span></div>  
  <div id="i1" ><span id="s1"><img src="" alt="" id="img2" ></span></div>  
  <div id="i2" ><span id="s2"><img src="" alt="" id="img3" ></span></div>  
  <div id="d2">当前堵注:10000</div>  
  <div>  
   <div id="d3" οnclick="fanmian()"><span>翻牌</span></div>  
   <div id="d4" οnclick="zengjia()"><span>增加堵注</span></div>  
   <div id="d5" οnclick="yaopai()"><span>要牌</span></div>  
   <div id="d6" οnclick="tanchu()"><span>playagain</span></div>  
  </div>  
  <div id="d7" οnclick="end()"><span>要牌结束</span></div>  
 </div>

</body>  
</html>

[70]: /images/20220516/0d7a5c2864f54b63a31fc0c8428e2649.png