▲TOPへ戻る

【javascript】 Math.random()とMath.floorでじゃんけんアプリを作る

array

簡単なジャンケンアプリのコードを紹介します。ジャンケンの画像はフリーの素材から取得してください。

グー
  <div style="margin: 20px; text-align: center;">
    <img id="janken" src=""/> <br>
    <button id="btn1">クリック!</button>
  </div>
  const btn1 = document.getElementById("btn1");
  const janken = document.getElementById("janken");
  
  const jankenarr = [
    "画像のパス(グー)",
    "画像のパス(チョキ)",
    "画像のパス(パー)",
  ];

  btn1.addEventListener("click", () => {
    //  整数をランダムに生成する
    let jankenId = Math.floor(Math.random() * jankenarr.length);
    janken.src = jankenarr[jankenId]; //  生成された数字を配列番号に指定する
  }); 

参考

js
【javascript】配列からひとつづつ表示し、表示されたものは配列から削除していく方法。
js
【javascript】 ランダムな数を生成するMath.random()
js
【javascript】 配列を削除、追加するarray.splice()メソッドについて
js
【javascript】配列の中身を追加(push, unshift)、削除(pop, shift)する方法
point

let Id = Math.floor(Math.random() * array.length);
配列の数をランダム生成し、Id に入れる。

array[ Id ] : 生成した数字を配列番号に代入

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ