昔ながらのボタンを押して遊べるじゃんけんゲームを作ってみた。
⇒実際の動作はこちら
ただこれだとリセットボタンが何回も押されるとre()が何度も実行されて動きが早くなってしまう。
もっとこうしたら良いよ!とアドバイスくれる方、おねがいしますm(_ _)m
<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>