JS ストッロゲーム メモ

JavaScript ゲーム Code

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スロット</title>
<style>
body{background: #e0e0e0;font-family: Arial,sans-serif;
font-size: 16px; margin-top: 30px;text-align: center;}

.panel{display: inline-block; width: 60px; padding: 7px;
border-radius: 5px; margin-bottom: 15px; color: #00aaff;
font-weight: bold; font-size: 32px; line-height: 64px;
background: #fff;text-align: center;}

.panel + .panel{margin-left: 10px;}
.panel.unmatch{opacity: 0.5;}
.btn{display: inline-block; width: 60px; padding: 7px;
border-radius: 5px; margin-bottom: 15px; color: #fff;
font-weight: bold; line-height: 34px;
background: #fff;box-sizing: 0 4px 0 #0088cc; background: #00aaff;
cursor: pointer;text-align: center;}

.btn + .btn{margin-left: 10px;}

.btn.active{opacity: 0.5;}
#spinButton.active{opacity: 0.5;}
#spinButton {margin: 0 auto;width: 240px;padding: 7px;border-radius: 5px;
color: #fff;box-shadow: 0 4px 0 #e91b0c; background: #f44336;
cursor: pointer;}
</style>
</head>

<body>
<div>
<div class="panel" id="panel0">?</div>
<div class="panel" id="panel1">?</div>
<div class="panel" id="panel2">?</div>
</div><!-- end panel -->

<div>
<div class="btn active" id="btn0">STOP</div>
<div class="btn active" id="btn1">STOP</div>
<div class="btn active" id="btn2">STOP</div>
</div>

<div id="spinButton">SPIN</div>

<script>
(function(){
'use strict';

var panels = ['i1', 'i2', 'i3','i4'];
var timers = ;
var results= ;
var stopcount = 0;
var isPlaying = false;

var panel0 = document.getElementById('panel0');
var panel1 = document.getElementById('panel1');
var panel2 = document.getElementById('panel2');

var btn0 = document.getElementById('btn0');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');

var spinBtn = document.getElementById('spinButton');

spinBtn.addEventListener('click',function(){
if(isPlaying) return;
isPlaying = true;
this.className = 'active';
btn0.className = 'btn';
btn1.className = 'btn';
btn2.className = 'btn';

panel0.className = 'panel';
panel1.className = 'panel';
panel2.className = 'panel';

runSlot(0, panel0);
runSlot(1, panel1);
runSlot(2, panel2);

});

function runSlot(n,panel) {
panel.innerHTML = panels[Math.floor(Math.random() * panels.length)];
timers[n] = setTimeout(function(){
runSlot(n, panel)
},66);
}

btn0.addEventListener('click', function(){
stopSlot(0, panel0, this);
});

btn1.addEventListener('click', function(){
stopSlot(1, panel1, this);
});

btn2.addEventListener('click', function(){
stopSlot(2, panel2, this);
});

function stopSlot(n, panel, btn) {
if(!isPlaying || results[n] !== undefined) return;
btn.className = 'btn active';
clearTimeout(timers[n]);
results[n] = panel.innerHTML;

stopcount++;
if(stopcount === 3) {
// 結果判定
checkResults();

// リプレイ処理
isPlaying = false;
timers = ;
results = ;
stopcount = 0;
spinBtn.className = '';
}
}

function checkResults() {
if(results[0] !== results[1] && results[0] !== results[2]) {
panel0.className = 'panel unmatch';
}

if(results[1] !== results[0] && results[1] !== results[2]) {
panel1.className = 'panel unmatch';
}

if(results[2] !== results[0] && results[2] !== results[1]) {
panel2.className = 'panel unmatch';
}

 

}


})();
</script>
</body>
</html>