利用原生JS实现欢乐水果机小游戏
简介：
玩家点击某个押注物品则在该物品上下注。点击开始则游戏开始，如果没有下注则不能开始游戏。
游戏中的物品有八中，分别为：苹果、西瓜、柠檬、橙子、铃铛、77、双星、BAR。
在放行游戏区左右方为押注区，每种物品下方有加减号按钮，每次点
击加号增加一个筹码注金，反之减号就减少一个筹码注金
开始： 开始键
奖励：GOOD LUCK
由于这个时低配版的，我就没有按照原版的写进去，就是中了GOOD LUCK直接获得15分。
出于好耍，本人想起了小时候玩过的水果机，js也学了一会儿了，就想用它写一个简单的水果机玩玩，废话不多说，直接上代码，只有js有注释，html和css就没有注释了。
这是样式图
这里是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 水果机小游戏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
赞 (0)
相关推荐
-
js实现贪吃蛇小游戏（容易理解）
话不多说,请看代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <link rel="stylesheet" href="style.css"> <script src="style.js" >
-
JavaScript编写的网页小游戏，很给力
以下为游戏界面: 以下为游戏代码: <html> <head> <script language="JavaScript"> <!-- Original: Nick Young () --> <!-- recompose: Pakchoi () --> var timerID = null; var INT = 40; var loadFLG = 0; var gameFLG = 0; var missFLG = 0; var
-
原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成动作并进行判断: 首先po一下代码: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie
-
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
随着html5的兴起,那些公司对大型游戏的开发正在慢慢疏远,一.开发周期长:二.运营花费高:他们正找一些能够克服这些缺点的替代品.正好,html5的出现可以改变这些现状,在淘宝.京东等一些大型电商网站.QQ.微信等聊天软件都出现了html5的小游戏,这说明html5越来越受到大家的青睐.接下来我用javascript实现一个小型游戏---打地鼠. 一．游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编
-
利用原生js实现html5小游戏之打砖块（附源码）
前言 PS:本次项目中使用了大量 es6 语法,故对于 es6 语法不太熟悉的小伙伴最好能先了解一些基本的原理再继续阅读. 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语法,个人认为以后 es6 语法会越来越普及,所以算是提前熟悉语法使用技巧.小游戏的实现逻辑上可能并不完善,也许会有一些 bug ,但是毕竟只是为了提升编程能力与技巧,希望大家不要太较
-
js实现九宫格拼图小游戏
效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */ body{ width: 100
-
利用原生JS实现欢乐水果机小游戏
简介: 玩家点击某个押注物品则在该物品上下注.点击开始则游戏开始,如果没有下注则不能开始游戏. 游戏中的物品有八中,分别为:苹果.西瓜.柠檬.橙子.铃铛.77.双星.BAR. 在放行游戏区左右方为押注区,每种物品下方有加减号按钮,每次点 击加号增加一个筹码注金,反之减号就减少一个筹码注金 开始: 开始键 奖励:GOOD LUCK 由于这个时低配版的,我就没有按照原版的写进去,就是中了GOOD LUCK直接获得15分. 出于好耍,本人想起了小时候玩过的水果机,js也学了一会儿了,就想用它写一个简单
-
原生js实现的金山打字小游戏（实例代码详解）
首先先来看一下效果图 如果感兴趣的就来看一下Js源码吧 //计分板 var board = { dom: document.getElementById("score"), maxLost: 3, //最大丢失量 lost: 0, //当前丢失了多少个 score: 0, //当前分数 render: function() { //显示 this.dom.innerHTML = "<p>得分:" + this.score + "</p&g
-
利用Vue.js制作一个拼图华容道小游戏
目录 游戏介绍 核心思路 核心代码 html games 类 生成随机图片数量 移动图片 键盘事件 拼图完成 结语 游戏介绍 先看看界面 这是一个拼图游戏,可以自选难度和自选闯关图片 游戏开始后根据不同难度,生成与所选主图 对应的 不同张数的 随机顺序的小图,然后只要把乱序的小图片还原成完整的图片就闯关成功 游戏区域有一个空白位置,可以用鼠标点击空白位相邻的图片完成替换,也就是移动,也可以用键盘上下左右操作 游戏好玩,可不要贪杯哦,学习也不能落下,不管什么游戏都一样 这个虽然用到的技术很一般很简
-
利用pixi.js制作简单的跑酷小游戏
目录 前言 项目地址 demo地址 初始化项目 主要逻辑 useParkour useScene useHurdle Player 前言 此项目使用pixi.js和vue实现,部分素材来自爱给网,本项目仅作用于 pixi.js 学习用途,侵权立删. 项目地址 shellingfordly/pixi-games demo地址 pixi-games 初始化项目 使用vite初始化项目 pnpm create vite my-vue-app 安装pixi.js和pixi-tweener pixi-tw
-
原生js实现简单贪吃蛇小游戏
本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 先上图 话不多说,代码奉上,喜欢的请留下你的小星星♥(ˆ◡ˆԅ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial
-
html+css+js实现别踩白板小游戏
目录 背景简介 一.思路分析 二.页面搭建 2.1 HTML层 2.2 CSS层 2.3 JS层 2.3.1获取元素 2.3.2创建每一行div元素 2.3.3点击事件函数封装 2.3.4 方块移动函数封装 2.3.5 游戏开始 三.总结 背景简介 别踩白板这个游戏相信大家都玩过,这个是基于HTML5打造的简单小游戏,在PC端和移动端都能够运行,适应多种平台,今天我们使用原生JS搭配JQuery构建这个小游戏--别踩白板. 一.思路分析 整体页面是一个大的矩形,长宽比例大概是3:2,然后游戏开始
-
利用原生js和jQuery实现单选框的勾选和取消操作的方法
根据以下的Demo,大概就可以看的明白 Demo: <html> <head> <script src='jquery-1.9.1.min.js'></script> <script> window.onload = function(){ var dom_a = document.getElementById('a1'); var dom_b = document.getElementById("b1"); //alert(
-
如何利用原生JS实现触摸滑动监听事件
前言 今天写一个小Demo,有个地方涉及到了左滑右滑的逻辑,本来想着用插件来着,但是想到自己好久没用原生JS写滑动的监听了,所以试着用原生JS来实现了一下,毕竟温故而知新嘛,同时做个记录.先把实现的效果贴出来: 构思 想要写出丝滑的触摸滑动事件的监听,要考虑以下3个方面的逻辑: 距离: 滑动距离要大于40 时间: 滑动时间小于在0.5秒,即500毫秒内完成手指按下,拖动,离开(避免只是手指在屏幕就触发) 滑动方向: 左右滑动的条件是:X轴移动的距离大于Y轴移动的距离,为正则向左,为负则向右 上下
-
利用原生JS自动生成文章标题树的实例
实现原理很简单,就是循环文章模块,并抽取其中的h2.h3标签,将其中的内容赋予给新建的title树. 代码如下: HTML代码: <div class="contextBox"> <div id="article"> <h2>二级标题</h2> <h3>三级标题</h3> <p>hello hello hello hello hello hello hello hello hello