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

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

<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]; // 生成された数字を配列番号に指定する
});
参考





let Id =
Math.floor(Math.random() * array.length);
配列の数をランダム生成し、Id
に入れる。
array[ Id ] : 生成した数字を配列番号に代入
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク