じゃんけんゲーム
昔ながらのボタンを押して遊べるじゃんけんゲーム。
コードはこちら。
<div style="text-align:center;">
<div id="Rejan2">☆じゃんけんゲーム☆</div>
<p><img id="jankenpon" src="images/jan0.png" style="width:100px;"></p>
<div style="margin:10px;">
<button onclick="R_Click(0);"> グー</button>
<button onclick="R_Click(1);"> チョキ</button>
<button onclick="R_Click(2);"> パー</button>
</div>
<div style="margin:10px;">
<button onclick="re();"> リセット</button>
</div>
<div id="Rejan1"></div>
</div>
<script>
function R_Click(p_janken_r) {
clearTimeout(repeat);
let janken = ['グー','チョキ','パー',];
let janken_r = Math.floor( Math.random() * 3);
let p_janken = ['グー','チョキ','パー'];
if (janken_r === p_janken_r) {
Result_end = "あいこ";
} else if(p_janken_r === 0 && janken_r === 1) {
Result_end = "勝ち!";
}else if(p_janken_r === 1 && janken_r === 2) {
Result_end = "勝ち!";
}else if(p_janken_r === 2 && janken_r === 0) {
Result_end = "勝ち!";
}else {
Result_end = "負け~";
}
document.getElementById("jankenpon").src="images/jan" + janken_r + ".png";
document.getElementById("Rejan2").innerHTML = Result_end;
document.getElementById("jankenpon2").src="images/jan" + p_janken_r + ".png";
}
function re() {
picChange();
document.getElementById("Rejan2").innerHTML = "じゃんけんゲーム";
}
let img = ["images/jan0.png", "images/jan1.png", "images/jan2.png"];
let count = -1;
picChange();
function picChange() {
count++;
if (count == img.length) count = 0;
document.getElementById("jankenpon").src = img[count];
repeat = setTimeout("picChange()", 100);
}
</script>
Qiitaに投稿してみたらコメントでプログラムを改良して頂いた。
該当コメントはこちら
<div style="text-align:center;">
<div id="Rejan2">☆じゃんけんゲーム☆</div>
<p><img id="jankenpon" src="images/jan0.png" style="width:100px;"></p>
<div style="margin:10px;">
<button onclick="R_Click(0);">グー</button>
<button onclick="R_Click(1);">チョキ</button>
<button onclick="R_Click(2);">パー</button>
</div>
<div style="margin:10px;">
<button onclick="re();">リセット</button>
</div>
<div id="Rejan1"></div>
</div>
<script>
const img = [
'images/jan0.png',
'images/jan1.png',
'images/jan2.png',
];
let changeLoop = false;
const R_Click = p_janken_r => {
changeLoop = false;
const janken_r = Math.floor( Math.random() * 3);
jankenpon.src= img[janken_r];
Rejan2.textContent = ['あいこ', '負け~', '勝ち!'][(3 + p_janken_r - janken_r) % 3];
};
const re = () => {
picChange();
Rejan2.textContent = "☆じゃんけんゲーム☆";
};
const picChange = () => {
if (changeLoop) return;
changeLoop = true;
let count = 0;
(function loop() {
if (changeLoop) {
jankenpon.src = img[++count % 3];
setTimeout(loop, 100);
}
})();
};
picChange();
</script>
理解が難しかった部分
Rejan2.textContent = [‘あいこ’, ‘負け~’, ‘勝ち!’][(3 + p_janken_r – janken_r) % 3];
・p_janken_r:プレイヤーがクリックした手(0,1,2)
・janken_r:コンピュータが選んだ手(0,1,2)
Rejan2.textContent = [‘あいこ’, ‘負け~’, ‘勝ち!’][0]
[‘あいこ’, ‘負け~’, ‘勝ち!’][0] =あいこ
[‘あいこ’, ‘負け~’, ‘勝ち!’][1] =負け~
アロー関数式の書き方
const re = () => {
};
//関数で引数を受け取らない場合は括弧だけを記述
コメント