利用原生JS實現歡樂水果機小遊戲
阿新 • • 發佈：2020-04-25
簡介：
玩家點選某個押注物品則在該物品上下注。點選開始則遊戲開始，如果沒有下注則不能開始遊戲。
遊戲中的物品有八中，分別為：蘋果、西瓜、檸檬、橙子、鈴鐺、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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></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="利用原生JS實現歡樂水果機小遊戲"></a></div>
</div>
<button class="begin">開始</button>
<div class="stake">
<div class="stake_left">
<div>
<img src="imgs/apple.png" alt="利用原生JS實現歡樂水果機小遊戲">
<button class="minus">-</button>
<span>0</span>
<button class="add">+</button>
</div>
<div>
<img src="imgs/orange.png" alt="利用原生JS實現歡樂水果機小遊戲">
<button class="minus">-</button>
<span>0</span>
<button class="add">+</button>
</div>
<div>
<img src="imgs/lemon.png" alt="利用原生JS實現歡樂水果機小遊戲">
<button class="minus">-</button>
<span>0</span>
<button class="add">+</button>
</div>
<div>
<img src="imgs/ld2.png" alt="利用原生JS實現歡樂水果機小遊戲">
<button class="minus">-</button>
<span>0</span>
<button class="add">+</button>
</div>
</div>
<div class="stake_right">
<div>
<img src="imgs/watermelon.png" alt="利用原生JS實現歡樂水果機小遊戲">
<button class="minus">-</button>
<span>0</span>
<button class="add">+</button>
</div>
<div>
<img src="imgs/star.png" alt="利用原生JS實現歡樂水果機小遊戲">
<button class="minus">-</button>
<span>0</span>
<button class="add">+</button>
</div>
<div>
<img src="imgs/seven.png" alt="利用原生JS實現歡樂水果機小遊戲">
<button class="minus">-</button>
<span>0</span>
<button class="add">+</button>
</div>
<div>
<img src="imgs/50.png" alt="利用原生JS實現歡樂水果機小遊戲">
<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 水果機小遊戲內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！