[JavaScript] じゃんけんゲームをつくる
PHPでじゃんけんを今度はJavaScriptで書いてみます。条件や考え方はPHPのときと同じです。
- HTML5
- JavaScriptES2015
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptでじゃんけんゲーム</title>
<script src="janken.js"></script>
</head>
<body>
<p>選んでください。</p>
<button type="button" data-num="1">グー</button>
<button type="button" data-num="2">チョキ</button>
<button type="button" data-num="3">パー</button>
<div id="result"></div>
</body>
</html>
JavaScript
'use strict';
document.addEventListener('DOMContentLoaded', function () {
const els = document.querySelectorAll('button'),
hand = new Map(),
result = new Map([
[0, 'あいこ'],
[1, '負け'],
[2, '勝ち']
]);
for (let i = 0, count = els.length; i < count ; i++) {
const num = parseInt(els[i].dataset.num),
val = els[i].innerText;
hand.set(num, val);
els[i].addEventListener('click', function () {
const playerChoice = num,
enemyChoice = Math.floor(Math.random() * 3 + 1),
judge = (playerChoice - enemyChoice + 3) % 3;
document.getElementById('result').innerHTML =
`<h2>結果</h2>` +
`<p><b>あなた:</b> ${hand.get(playerChoice)}<br>` +
`<b>あいて:</b> ${hand.get(enemyChoice)}</p>` +
`<p><b>「${result.get(judge)}」</b>です</p>`;
});
}
});
まとめ
初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発で学んだことをできるだけ詰め込んだため、ややこしくなったかもしれません。
今回はカスタムデータ属性で値を設定しましたが、<button type="button" value="x">
としparseInt(els[i].value)
で取得しても結果は同じです。parseInt
で数値化しているのは、Map
のキーに数値を用いたからです。