☆HTML☆
スロット
スロットが出来ます。
SPINボタンでスロットが動くのでSTOPボタンで止めてください。
画像が３つそろえば当たりです。
当たったところで特に何もありません。
SPIN
☆CSS☆
body{
background: #bdc3c7;
font-size: 16px;
font-weight: bold;
font-family: Arial, sans-serif;
}
*{
margin: 0;
}
header{
text-align: center;
border-top: 20px;
border-bottom: 20px;
}
section{
padding-top: 20px;
padding-bottom: 20px;
}
p{
padding-left: 37%;
}
main{
width: 300px;
background: #ecf0f1;
padding: 20px;
border: 4px solid #fff;
border-radius: 12px;
margin: 16px auto;
display: flex;
justify-content: space-between;
}
.panel img{
width: 90px;
height: 110px;
margin-bottom: 4px;
}
.stop{
cursor: pointer;
width: 90px;
height: 32px;
background: #ef454a;
box-shadow: 0 4px 0 #d1483e;
border-radius: 16px;
line-height: 32px;
text-align: center;
font-size: 14px;
color: #fff;
user-select: none;
}
#spin{
cursor: pointer;
width: 280px;
height: 36px;
background: #3498db;
box-shadow: 0 4px 0 #2880b9;
border-radius: 18px;
line-height: 36px;
text-align: center;
color: #fff;
user-select: none;
margin: 0 auto;
}
.unmatched{
opacity: 0.4;
}
.inactive{
opacity: 0.4;
}
☆JavaScript☆
'use strict';
{
class Panel {
constructor() {
const section = document.createElement('section');//sectionだけ定数にしたのはこのconstructor内でしか使わない為
section.classList.add('panel');
this.img = document.createElement('img');
this.img.src = this.getRandomImage();
this.timeoutId = undefined;
this.stop = document.createElement('div');
this.stop.textContent = 'STOP';
this.stop.classList.add('stop', 'inactive');
this.stop.addEventListener('click', () => {
if (this.stop.classList.contains('inactive')) {
return;
}
this.stop.classList.add('inactive');
clearTimeout(this.timeoutId);
panelsLeft--;
if (panelsLeft === 0) {
spin.classList.remove('inactive');
panelsLeft = 3;
checkResult();
}
});
section.appendChild(this.img);
section.appendChild(this.stop);//sectionの子要素として追加
const main = document.querySelector('main');
main.appendChild(section);
}//img,stop要素にthisをつけてこのクラスのプロパティにしている。定数ではなくthisを付けたのはこのクラスと別のメソッドで呼び出したいからである。
getRandomImage() {
const images = [
'img/seven.png',
'img/bell.png',
'img/cherry.png',
];
return images[Math.floor(Math.random() * images.length)];
}//thisのimgのsrcプロパティをランダムな画像のファイル名にするためのメソッド
spin() {
this.img.src = this.getRandomImage();
this.timeoutId = setTimeout(() => {
this.spin();
}, 50);//setTimeoutで50ミリ秒後に画像をランダムにする処理(spinメソッドの処理)を実行している。
}
isUnmatched(p1, p2) {
return this.img.src !== p1.img.src && this.img.src !== p2.img.src;
}
unmatch() {
this.img.classList.add('unmatched')
}
activate() {
this.img.classList.remove('unmatched');
this.stop.classList.remove('inactive');
}
}//クラス構文の使用
function checkResult() {
if (panels[0].isUnmatched(panels[1], panels[2]))
panels[0].unmatch();
if (panels[1].isUnmatched(panels[0], panels[2]))
panels[1].unmatch();
if (panels[2].isUnmatched(panels[0], panels[1]))
panels[2].unmatch();
}
const panels = [
new Panel(),
new Panel(),
new Panel(),
];//インスタンスの生成
let panelsLeft = 3;
const spin = document.getElementById('spin');
spin.addEventListener('click', () => {
if (spin.classList.contains('inactive')) {
return;
}
spin.classList.add('inactive');
panels.forEach(panel => {
panel.activate();
panel.spin();
});
});//SPINボタンの設定
}