![見出し画像](https://assets.st-note.com/production/uploads/images/111971133/rectangle_large_type_2_69109cb55c41c68eb9def6a30e5afdda.png?width=1200)
【JavaScript】スロットゲームをプログラミングで作成(当たり演出①)
今回は、以前JavaScriptで作成したゲームに当たり演出を追加しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スロットゲーム</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" media="screen" href="style.css">
</head>
<body>
<div class="slot">
<div id="slot-frame">
<ul class="reels">
<li class="reel" data-val="franky"><img src="img/franky.png"></li>
<li class="reel" data-val="luffy"><img src="img/luffy.png"></li> <!-- index 7 -->
<li class="reel" data-val="nami"><img src="img/nami.png"></li> <!-- index 6 -->
<li class="reel" data-val="zoro"><img src="img/zoro.png"></li> <!-- index 5 -->
<li class="reel" data-val="usopp"><img src="img/usopp.png"></li> <!-- index 4 -->
<li class="reel" data-val="sanji"><img src="img/sanji.png"></li> <!-- index 3 -->
<li class="reel" data-val="robin"><img src="img/robin.png"></li> <!-- index 2 -->
<li class="reel" data-val="chopper"><img src="img/chopper.png"></li><!-- index 1 -->
<li class="reel" data-val="franky"><img src="img/franky.png"></li> <!-- index 0 初期値 -->
<li class="reel" data-val="luffy"><img src="img/luffy.png"></li>
</ul>
<ul class="reels">
<li class="reel" data-val="sanji"><img src="img/sanji.png"></li>
<li class="reel" data-val="robin"><img src="img/robin.png"></li>
<li class="reel" data-val="zoro"><img src="img/zoro.png"></li>
<li class="reel" data-val="luffy"><img src="img/luffy.png"></li>
<li class="reel" data-val="nami"><img src="img/nami.png"></li>
<li class="reel" data-val="usopp"><img src="img/usopp.png"></li>
<li class="reel" data-val="chopper"><img src="img/chopper.png"></li>
<li class="reel" data-val="franky"><img src="img/franky.png"></li>
<li class="reel" data-val="sanji"><img src="img/sanji.png"></li> <!-- index 0 初期値 -->
<li class="reel" data-val="robin"><img src="img/robin.png"></li>
</ul>
<ul class="reels">
<li class="reel" data-val="robin"><img src="img/robin.png"></li>
<li class="reel" data-val="sanji"><img src="img/sanji.png"></li>
<li class="reel" data-val="luffy"><img src="img/luffy.png"></li>
<li class="reel" data-val="usopp"><img src="img/usopp.png"></li>
<li class="reel" data-val="chopper"><img src="img/chopper.png"></li>
<li class="reel" data-val="franky"><img src="img/franky.png"></li>
<li class="reel" data-val="nami"><img src="img/nami.png"></li>
<li class="reel" data-val="zoro"><img src="img/zoro.png"></li>
<li class="reel" data-val="robin"><img src="img/robin.png"></li> <!-- index 0 初期値 -->
<li class="reel" data-val="sanji"><img src="img/sanji.png"></li>
</ul>
</div>
</div>
</div>
<div id="hit">
</div>
<div>
<button type="button" class="stop-btn" data-val="0" disabled="true"></button>
<button type="button" class="stop-btn" data-val="1" disabled="true"></button>
<button type="button" class="stop-btn" data-val="2" disabled="true"></button>
</div>
<div>
<button type="button" id="start-btn">ゲームスタート</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
body {
text-align: center;
padding: 0;
margin: 0;
background-color: antiquewhite;
}
ul {
list-style: none;
}
.slot {
width: 90%;
height: 500px;
overflow: hidden;
margin: auto;
margin-top: 10px;
border: solid 1px #333;
background-color: aliceblue;
}
#slot-frame {
height: 500px;
position: relative;
overflow: hidden;
border: solid 1px #333;
}
.reels {
width: 31%;
position: absolute;
}
.reels:nth-child(1) {
left: 0;
}
.reels:nth-child(2) {
left: 33%;
}
.reels:nth-child(3) {
right: 0;
}
.reel {
height: 270px;
}
.reel img {
display: block;
margin: auto;
height: 270px;
}
.stop-btn {
display: inline-block;
padding: 35px 35px;
margin-top: 10px;
margin: 10px 70px;
background-color: rgb(237, 23, 23);
border-bottom: solid 4px #627295;
border-radius: 60px;
}
.stop-btn:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
}
#start-btn {
display: inline-block;
padding: 20px 40px;
background-color: rgb(215, 97, 0);
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 10px;
font-size: 30px;
}
#start-btn:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
}
#hit{
position: absolute;
top: 90px;
width: 100%;
background-color: rgba(237, 233, 137, 0.7);
}
#hit_message{
position: absolute;
top: 100px;
font-size: 80px;
color: red;
font-weight: bold;
}body {
text-align: center;
padding: 0;
margin: 0;
background-color: antiquewhite;
}
ul {
list-style: none;
}
.slot {
width: 90%;
height: 500px;
overflow: hidden;
margin: auto;
margin-top: 10px;
border: solid 1px #333;
background-color: aliceblue;
}
#slot-frame {
height: 500px;
position: relative;
overflow: hidden;
border: solid 1px #333;
}
.reels {
width: 31%;
position: absolute;
}
.reels:nth-child(1) {
left: 0;
}
.reels:nth-child(2) {
left: 33%;
}
.reels:nth-child(3) {
right: 0;
}
.reel {
height: 270px;
}
.reel img {
display: block;
margin: auto;
height: 270px;
}
.stop-btn {
display: inline-block;
padding: 35px 35px;
margin-top: 10px;
margin: 10px 70px;
background-color: rgb(237, 23, 23);
border-bottom: solid 4px #627295;
border-radius: 60px;
}
.stop-btn:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
}
#start-btn {
display: inline-block;
padding: 20px 40px;
background-color: rgb(215, 97, 0);
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 10px;
font-size: 30px;
}
#start-btn:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
}
#hit{
position: absolute;
top: 90px;
width: 100%;
background-color: rgba(237, 233, 137, 0.7);
}
#hit_message{
position: absolute;
top: 100px;
font-size: 80px;
color: red;
font-weight: bold;
}
let sec = 500; //スロットのリール回転速度(実行毎秒数)
let stopReelFlag = []; //スロットのリール停止フラグ
let reelCounts = []; //どの画像をどの位置にさせるか
let slotFrameHeight; //フレームの大きさ
let slotReelsHeight; //リール(画像)全体の大きさ
let slotReelItemHeight; //リール(画像)1個の大きさ
let slotReelStartHeight;//画像の初期値
let slot_pattern = [];
let hit_img;
let hit = document.getElementById("hit");
let slot_frame = document.getElementById("slot-frame");
let reel = document.getElementsByClassName("reel");
let reels = document.getElementsByClassName("reels");
let start_btn = document.getElementById("start-btn");
let stop_btn = document.getElementsByClassName("stop-btn");
let Slot = {
init: function() {
stopReelFlag[0] = stopReelFlag[1] = stopReelFlag[2] = false;
reelCounts[0] = reelCounts[1] = reelCounts[2] = 0;
},
start: function () {
Slot.init();
for (let index = 0; index < 3; index++) {
Slot.animation(index);
}
},
stop: function (i) {
stopReelFlag[i] = true;
if (stopReelFlag[0] && !stopReelFlag[1] && !stopReelFlag[2]){
slot_pattern.push(reels[0].children[8 - reelCounts[0]].getAttribute('data-val'));
} else if (stopReelFlag[0] && stopReelFlag[1] && !stopReelFlag[2]) {
slot_pattern.push(reels[1].children[8 - reelCounts[1]].getAttribute('data-val'));
} else if (stopReelFlag[0] && stopReelFlag[1] && stopReelFlag[2]) {
slot_pattern.push(reels[2].children[8 - reelCounts[2]].getAttribute('data-val'));
}
if (stopReelFlag[0] && stopReelFlag[1] && stopReelFlag[2]) {
start_btn.removeAttribute("disabled");
if(slot_pattern.every(value => value === slot_pattern[0])){
hit_img = slot_pattern[0];
Slot.hit();
};
slot_pattern = [];
}
},
hit: function(){
let hit_message;
if (hit_img == "chopper"){
hit_message = "タ、タヌキじゃねーよっ";
}
hit_img = document.querySelectorAll(`[data-val="${hit_img}"]`);
hit_img = hit_img[1].innerHTML;
setTimeout(()=>{
hit.innerHTML = hit_img;
hit.innerHTML += `<span id='hit_message'>${hit_message}</span>`;
}, 1000);
setTimeout(() => {
hit.innerHTML = "";
}, 5000);
},
resetLocationInfo: function () {
slotFrameHeight = slot_frame.offsetHeight;
slotReelsHeight = reels[0].offsetHeight;
slotReelItemHeight = reel[0].offsetHeight;
slotReelStartHeight = -slotReelsHeight;
slotReelStartHeight = slotReelStartHeight + slotFrameHeight
- (slotFrameHeight / 2) + slotReelItemHeight * 3 / 2;
for (let i = 0; i < reels.length; i++){
reels[i].style.top = String(slotReelStartHeight) + "px";
}
},
animation: function (index) {
if (reelCounts[index] >= 8) {
reelCounts[index] = 0;
}
$('.reels').eq(index).animate({
'top': slotReelStartHeight + (reelCounts[index] * slotReelItemHeight)
}, {
duration: sec,
easing: 'linear',
complete: function () {
if (stopReelFlag[index]) {
return;
}
reelCounts[index]++;
Slot.animation(index);
}
});
},
};
window.onload = function () {
Slot.init();
Slot.resetLocationInfo();
start_btn.addEventListener("click", function(e){
e.target.setAttribute("disabled", true)
Slot.start();
for(let i = 0; i < stop_btn.length; i++){
stop_btn[i].removeAttribute("disabled");
}
});
for(let i = 0; i < stop_btn.length ; i++ ){
stop_btn[i].addEventListener("click", function (e) {
Slot.stop(e.target.getAttribute('data-val'));
})
}
};
この記事が気に入ったらサポートをしてみませんか?