利用原生JS实现欢乐水果机小游戏


Posted in Javascript onApril 23, 2020

简介:

玩家点击某个押注物品则在该物品上下注。点击开始则游戏开始,如果没有下注则不能开始游戏。
游戏中的物品有八中,分别为:苹果、西瓜、柠檬、橙子、铃铛、77、双星、BAR。
在放行游戏区左右方为押注区,每种物品下方有加减号按钮,每次点
击加号增加一个筹码注金,反之减号就减少一个筹码注金
开始: 开始键
奖励:GOOD LUCK
由于这个时低配版的,我就没有按照原版的写进去,就是中了GOOD LUCK直接获得15分。
出于好耍,本人想起了小时候玩过的水果机,js也学了一会儿了,就想用它写一个简单的水果机玩玩,废话不多说,直接上代码,只有js有注释,html和css就没有注释了。
这是样式图

利用原生JS实现欢乐水果机小游戏

这里是html代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Fruit</title>
 <link rel="stylesheet" href="Fruit.css" rel="external nofollow" >
 <script src="Fruit.js"></script>
</head>
<body>
<div id="content">
 <h2>欢乐水果机</h2>
 <div class="box">
  <div class="top">
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/orange.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/ld.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/25.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/50.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/apple.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/apple2.png" alt=""></a></div>
  </div>
  <div class="right">
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/lemon.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/watermelon.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/watermelon2.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/right.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/apple.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/orange2.png" alt=""></a></div>
  </div>
  <div class="bottom">
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/orange.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/ld.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/seven2.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/seven.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/apple.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/lemon2.png" alt=""></a></div>
  </div>
  <div class="left">
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/lemon.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/star.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/star2.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/left.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/apple.png" alt=""></a></div>
   <div><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="imgs/ld2.png" alt=""></a></div>
  </div>
  <button class="begin">开始</button>
  <div class="stake">
   <div class="stake_left">
    <div>
     <img src="imgs/apple.png" alt="">
     <button class="minus">-</button>
     <span>0</span>
     <button class="add">+</button>
    </div>
    <div>
     <img src="imgs/orange.png" alt="">
     <button class="minus">-</button>
     <span>0</span>
     <button class="add">+</button>
    </div>
    <div>
     <img src="imgs/lemon.png" alt="">
     <button class="minus">-</button>
     <span>0</span>
     <button class="add">+</button>
    </div>
    <div>
     <img src="imgs/ld2.png" alt="">
     <button class="minus">-</button>
     <span>0</span>
     <button class="add">+</button>
    </div>
   </div>
   <div class="stake_right">
    <div>
     <img src="imgs/watermelon.png" alt="">
     <button class="minus">-</button>
     <span>0</span>
     <button class="add">+</button>
    </div>
    <div>
     <img src="imgs/star.png" alt="">
     <button class="minus">-</button>
     <span>0</span>
     <button class="add">+</button>
    </div>
    <div>
     <img src="imgs/seven.png" alt="">
     <button class="minus">-</button>
     <span>0</span>
     <button class="add">+</button>
    </div>
    <div>
     <img src="imgs/50.png" alt="">
     <button class="minus">-</button>
     <span>0</span>
     <button class="add">+</button>
    </div>
   </div>
  </div>
  <span id="move"></span>
  <span id="getScore">中将金额<p>0</p></span>
  <span id="allScore">当前余额<p>0</p></span>
  <button id="change">充值¥100</button>
 </div>
</div>
</body>
</html>

加上一点简单的css布局

* {
 margin: 0;
 padding: 0;
 list-style: none;
 text-decoration: none;
}

img {
 display: block;
}

#content {
 width: 1200px;
 height: 1200px;
 margin: 0 auto;
 text-align: center;
}

.box {
 width: 1000px;
 height: 100%;
 margin: 0 auto;
 background-color: blue;
 position: relative;
}
.top{
 width: 600px;
 height: 100px;
 display: flex;
 position: absolute;
 top: 50px;
 left: 150px;
}
.right{
 width: 100px;
 height: 600px;
 position: absolute;
 top: 50px;
 right: 150px;
}
.bottom{
 width: 600px;
 height: 100px;
 display: flex;
 flex-direction: row-reverse;
 position: absolute;
 top: 650px;
 right: 150px;
}
.left{
 width: 100px;
 height: 600px;
 display: flex;
 flex-flow: column-reverse;
 position: absolute;
 top: 150px;
 left: 150px;
}
.stake>div>div{
 width: 100px;
 height: 150px;
 font-size: 20px;
}
.stake>div>div>img{
 border: 1px solid black;
}
.stake>div>div>button{
 width: 30px;
 height: 30px;
 font-size: 25px;
 background-color: #fff3fc;
 border: 1px solid black;
}
.stake_left{
 position: absolute;
 top: 100px;
 left: 25px;
}
.stake_right{
 position: absolute;
 top: 100px;
 right: 25px;
}
#move{
 display: block;
 width: 98px;
 height: 98px;
 border: 2px solid purple;
 position: absolute;
 top: 50px;
 left: 150px;
}
#getScore{
 display: block;
 width: 200px;
 height: 50px;
 font-size: 35px;
 position: absolute;
 top: 200px;
 left: 290px;
}
#getScore>p{
 display: block;
 width: 200px;
 height: 50px;
 border: 2px solid yellow;
}
#allScore{
 display: block;
 width: 200px;
 height: 50px;
 font-size: 35px;
 position: absolute;
 top: 200px;
 right: 290px;
}
#allScore>p{
 display: block;
 width: 200px;
 height: 50px;
 border: 2px solid yellow;
}
.begin{
 width: 120px;
 height: 30px;
 position: absolute;
 top: 700px;
 right: 15px;
 background-color: pink;
}
#change{
 width: 120px;
 height: 30px;
 position: absolute;
 top: 25px;
 right: 15px;
}

最后是js部分

window.addEventListener('load', function (ev) {
 //获取使用元素
 var begin = document.querySelector('.begin');
 var move = document.querySelector('#move');
 var getScore = document.querySelector('#getScore>p');
 var allScore = document.querySelector('#allScore>p');
 var change = document.querySelector('#change');
 var pours = document.querySelectorAll('.stake span');
 var add = document.querySelectorAll('.stake .add');
 var minus = document.querySelectorAll('.stake .minus');
 var timer = null;  //定义两个空对象null
 var time = null;
 var flag = null;  //定义一个flag,以此来判断是否下注
 var Score = 0;   //Score为当前余额
 //开始按钮点击事件
 begin.addEventListener('click', function (evt) {
  //每次点击开始的时候都从第一个开始
  move.style.left = 150 + 'px';
  move.style.top = 50 + 'px';
  clickMove(Score); //调用开始按钮的点击事件函数
 });

 //开始按钮的点击事件函数
 function clickMove(score) {
  //判断flag的值,for循环判断每一个水果是否有下注,如果都为下注,flag为false;
  //反之有任意一个水果有下注,flag都为true;
  for (var i = 0; i < pours.length; i++) {
   //先判断flag的值,再调用函数判断每个水果是否下注
   if (flag) {
    break;
   }
   decide_pour(pours[i]);
  }
  //点击开始按钮的条件
  if (score === 0) {//先判断是否有余额
   alert('您的余额已不足,请充值后再开始!');
  } else if (!flag) {//再判断flag的值,flag为false执行当前代码。
   alert('您未下注,请下注后再开始!');
  } else {//如果上诉都满足了,则可以执行开始按钮
   clearInterval(timer); //定时器先清后设。
   var randNum = Math.ceil(Math.random() * 200) * 24; //定义一个0-4800的随机整数
   var scoreNum = Math.floor(randNum / 20 % 24 + 1); //利用上随机数来获得移动过后得到的水果的索引号
   timer = setInterval(function () {  //定时器使得可以让move盒子移动起来
    var moveLeft = move.offsetLeft;
    var moveTop = move.offsetTop;
    if (moveTop === 50 && moveLeft <= 650) {
     move.style.left = moveLeft + 100 + 'px';
    } else if (moveLeft >= 650 && moveTop >= 50 && moveTop <= 550) {
     move.style.top = moveTop + 100 + 'px';
    } else if (moveTop >= 650 && moveLeft <= 750 && moveLeft >= 250) {
     move.style.left = moveLeft - 100 + 'px';
    } else if (moveLeft <= 150 && moveTop <= 750 && moveTop > 50) {
     move.style.top = moveTop - 100 + 'px';
    }
   }, 20);
   begin.disabled = true;      //move盒子停止移动后才能再次点击开始按钮
   for (var i = 0; i < add.length; i++) {  //利用for循环使得每个下注按钮和取消下注按钮开始之后就不能被点击
    add[i].disabled = true;     // move盒子停止移动后才能再次点击下注和取消下注按钮
    minus[i].disabled = true;
   }
   time = setTimeout(function () {  //结束的判断
    clearInterval(timer);     //当到达指定的随机数时间后,清除定时器timer,move盒子停止运动
    setTimeout(function () {
     switch (scoreNum) {
      case 5:
      case 11:
      case 17:
      case 23:
       score = reward(1) * 5;
       getScore.innerText = score;
       sum(score);
       break;
      case 6:
       score = reward(1) * 10;
       getScore.innerText = score;
       sum(score);
       break;
      case 1:
      case 13:
       score = reward(2) * 10;
       getScore.innerText = score;
       sum(score);
       break;
      case 12:
       score = reward(2) * 20;
       getScore.innerText = score;
       sum(score);
       break;
      case 7:
      case 19:
       score = reward(3) * 10;
       getScore.innerText = score;
       sum(score);
       break;
      case 18:
       score = reward(3) * 20;
       getScore.innerText = score;
       sum(score);
       break;
      case 2:
      case 14:
       score = reward(4) * 10;
       getScore.innerText = score;
       sum(score);
       break;
      case 24:
       score = reward(4) * 20;
       getScore.innerText = score;
       sum(score);
       break;
      case 8:
       score = reward(5) * 20;
       getScore.innerText = score;
       sum(score);
       break;
      case 9:
       score = reward(5) * 40;
       getScore.innerText = score;
       sum(score);
       break;
      case 20:
       score = reward(6) * 20;
       getScore.innerText = score;
       sum(score);
       break;
      case 21:
       score = reward(6) * 40;
       getScore.innerText = score;
       sum(score);
       break;
      case 16:
       score = reward(7) * 20;
       getScore.innerText = score;
       sum(score);
       break;
      case 15:
       score = reward(7) * 40;
       getScore.innerText = score;
       sum(score);
       break;
      case 10:
      case 22:
       score = 15;
       sum(score);
       break;
      case 3:
       score = reward(8) * 25;
       getScore.innerText = score;
       sum(score);
       break;
      case 4:
       score = reward(8) * 50;
       getScore.innerText = score;
       sum(score);
       break;
     }    //当停止运动后,算出当前获得的分数,并加在当前余额上
     for (var i = 0; i < add.length; i++) { //利用for循环对上一次下注的清零,然后下注和取消下注停止禁用
      add[i].previousElementSibling.innerText = 0;
      add[i].disabled = false;
      minus[i].disabled = false;
     }
     begin.disabled = false;    //开始按钮停止禁用
     score = 0;       //获得的分数清零
    }, 500);       //当move盒子停止运动后,0.5s后执行定时器time里的定时器
    flag = false;        //当move盒子停止运动后,flag的值重新变为false
   }, randNum);         //利用上面定义的随机数来控制盒子的随机运动

  }
 }

 //充值按钮,每点击一次,当前余额增加100
 change.addEventListener('click', function (evt) {
  allScore.innerText = Score += 100;
  //console.log(Score);
  Score = allScore.innerText - 0;  //string强制转换为number
 });
 //下注按钮
 for (var i = 0; i < add.length; i++) {
  decide_minus();   //调用函数判断取消下注是否可以点击,每点击一次下注和取消下注都要判断取消下注按钮是否可以点击
  //给每个下注按钮绑定点击事件
  add[i].addEventListener('click', function (evt) {
   //判断有无余额
   if (Score <= 0) {
    alert('您的余额已不足,请充值后再下注');
   } else {
    this.previousElementSibling.innerText++;
    decide_minus();
    Score--;
    allScore.innerText = Score;
   }

  });
  minus[i].addEventListener('click', function (evt) {
   this.nextElementSibling.innerText--;
   decide_minus();
   Score++;
   allScore.innerText = Score;
  });
 }

 //判断是否下注函数
 function decide_pour(obj) {
  var nums = obj.innerText - 0;
  nums !== 0 ? flag = true : flag = false;
 }

 //判断是否可以点击取消下注按钮,当未下注时,不能点击取消下注按钮
 function decide_minus() {
  for (var i = 0; i < add.length; i++) {
   pours[i].innerText - 0 <= 0 ? pours[i].previousElementSibling.disabled = true : pours[i].previousElementSibling.disabled = false
  }
 }

 //返回当前move盒子停在的水果的下注次数
 function reward(number) {
  return pours[number-1].innerText - 0;
 }

 //获得的分数加在当前余额上
 function sum(score) {
  allScore.innerText = Score += score;
 }
});

到此这篇关于利用原生JS实现欢乐水果机小游戏的文章就介绍到这了,更多相关js 水果机小游戏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
js或css实现滚动广告的几种方案
Jan 28 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 Javascript
JS eval代码快速解密实例解析
Apr 23 #Javascript
浅谈vue权限管理实现及流程
Apr 23 #Javascript
js实现简单的贪吃蛇游戏
Apr 23 #Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 #Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 #Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 #Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 #Javascript
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
枚举JavaScript对象的函数
2006/12/22 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
Python语言的变量认识及操作方法
2018/02/11 Python
pandas取出重复数据的方法
2019/07/04 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
应届专科生个人的自我评价
2014/01/05 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
幼儿教师培训感言
2014/03/08 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang