LoginSignup
2
0

More than 1 year has passed since last update.

javascriptでじゃんけんゲーム

Posted at

昔ながらのボタンを押して遊べるじゃんけんゲームを作ってみた。
実際の動作はこちら

ただこれだとリセットボタンが何回も押されると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>
2
0
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0