[JavaScript] じゃんけんゲームをつくる

2013.08.19

2015.04.20

PHPでじゃんけんを今度はJavaScriptで書いてみます。条件や考え方はPHPのときと同じです。

環境

HTML5
JavaScriptES2015

HTML

janken.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

janken.js

'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のキーに数値を用いたからです。

CONTENTS

HTML
JavaScript
まとめ