javascriptでじゃんけんゲーム

スポンサーリンク
じゃんけんゲーム

昔ながらのボタンを押して遊べるじゃんけんゲーム。
コードはこちら。

    <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 = () => {
};

//関数で引数を受け取らない場合は括弧だけを記述

コメント

タイトルとURLをコピーしました