今回は、簡単なじゃんけんゲームを作って、ブラウザゲームを作る流れを見ていこうと思います。
ゲームの仕様を決める
まずゲームの仕様を決めます。
ゲームの流れやルールなど、大まかで良いので決めておきます。
最初から細かく決めなくても、後から追加や変更をしていく形でも良いと思います。
- プレイヤー（人間）とコンピュータが対戦する。
- プレイヤーの手は、グー／チョキ／パーのボタンで選択する。
- コンピュータの手はランダムで決まる。
- どっちが勝ったかを表示する。
プログラミングを始める
プログラミングは段階的に作成していくのが基本です。
ゲームの仕様を分割して、自分が作りやすそうな所から始めれば良いと思います。
今回は、プレイヤーの手を選択する部分から作っていくことにします。
プレイヤーの手を選択する部分
プレイヤーの手をグー／チョキ／パーのそれぞれのボタンで選択できる仕組みを作成します。
1.HTMLでプレイヤーの手を表示する部分とボタンを作成します。
Webページのひな型を使用して作っていきます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>じゃんけんサンプル</title> </head> <body> <div>プレイヤー: <span id="player-disp"></span></div><!-- プレイヤーの手を表示 --> <button class="player-btn">グー</button><!-- ボタンの表示 --> <button class="player-btn">チョキ</button><!-- ボタンの表示 --> <button class="player-btn">パー</button><!-- ボタンの表示 --> <script> // JavaScriptを書くところ </script> </body> </html>
8行目：プレイヤーの手を表示する要素を作成してIDを付けます。
9-11行目：プレイヤーの手を入力するためのボタンをbutton要素で作成して、共通のクラス名を付けます。
2.プレイヤーのボタン操作の仕組みを作成します。
以下のコードをscript要素の中に追加していきます。
// プレイヤーの手で使用するもの
const playerDisp = document.getElementById('player-disp'); // プレイヤーの手を表示する要素
const playerBtns = document.getElementsByClassName('player-btn'); // プレイヤーの手のボタン要素
// プレイヤーの手を表示する関数
function displayPlayer() {
const playerHand = this.textContent; // プレイヤーの手を取得
playerDisp.textContent = playerHand; // プレイヤーの手を表示
}
// プレイヤーの手のボタンにイベントを登録
for (const element of playerBtns) {
element.addEventListener('click', displayPlayer);
}
15行目：プレイヤーの手を表示する要素の変数を準備します。
16行目：プレイヤーの手のボタン要素の変数を準備します。
プレイヤーの手を表示する関数を作成します。
20行目：クリックされたボタン自身のテキスト（グー／チョキ／パーの文字列）をtextContentプロパティで取得します。※この時の「this」はbutton要素自身を表しています。
21行目：取得したボタンのテキストを、プレイヤーの手を表示する要素のtextContentプロパティに代入します。
プレイヤーの手のボタンのClickイベントの処理を作成します。
25-27行目：取得したボタン要素は複数なので、for…of文を使って一つずつイベントに関数を登録します。
コンピュータの手の部分
コンピュータの手をランダムで決めて、表示する仕組みを作成します。
1.HTMLでコンピュータの手を表示する部分を作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>じゃんけんサンプル</title>
</head>
<body>
<div>コンピュータ: <span id="com-disp"></span></div><!-- コンピュータの手を表示 -->
<div>プレイヤー: <span id="player-disp"></span></div><!-- プレイヤーの手を表示 -->
<button class="player-btn">グー</button><!-- ボタンの表示 -->
<button class="player-btn">チョキ</button><!-- ボタンの表示 -->
<button class="player-btn">パー</button><!-- ボタンの表示 -->
8行目：コンピュータの手を表示する要素を作成してIDを付けます。
2.コンピュータの手の表示の処理を作成します。
script要素の中のコードを以下のように変更します。
// プレイヤーの手で使用するもの
const playerDisp = document.getElementById('player-disp'); // プレイヤーの手を表示する要素
const playerBtns = document.getElementsByClassName('player-btn'); // プレイヤーの手のボタン要素
// プレイヤーの手を表示する関数
function displayPlayer() {
const playerHand = this.textContent; // プレイヤーの手を取得
playerDisp.textContent = playerHand; // プレイヤーの手を表示
}
// コンピュータの手で使用するもの
const comDisp = document.getElementById('com-disp'); // コンピュータの手を表示する要素
const COM_HANDS = ['グー', 'チョキ', 'パー']; // コンピュータの手の配列
// コンピュータの手を表示する関数
function displayCom() {
const comRand = Math.floor(Math.random() * 3); // 0〜2のランダム値を生成
comDisp.textContent = COM_HANDS[comRand]; // コンピュータの手を表示
}
// プレイヤーの手のボタンにイベントを登録
for (const element of playerBtns) {
element.addEventListener('click', displayPlayer);
element.addEventListener('click', displayCom);
}
26行目：コンピュータの手を表示する要素の変数を準備します。
27行目：コンピュータの手を配列で作成します。
コンピュータの手を表示する関数を作成します。
31行目：じゃんけんの手は3つなので、0〜2のランダム値（乱数）を生成します。
32行目：コンピュータの手の配列の添字（要素番号）に、0〜2のランダム値を使用してコンピュータの手を決定します。※例えばランダム値が1なら、COM_HANDS[1]になり「チョキ」が表示されます。
38行目：プレイヤーの手のボタンをクリックしたタイミングでコンピュータの手も表示されるように、同じClickイベントに関数を登録します。
どっちが勝ったかを表示する
勝ち負けを表示した方が分かりやすいので、じゃんけんの結果を判定する処理を追加します。
1.HTMLで判定結果を表示する部分を作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>じゃんけんサンプル</title>
</head>
<body>
<div>コンピュータ: <span id="com-disp"></span></div><!-- コンピュータの手を表示 -->
<div>プレイヤー: <span id="player-disp"></span></div><!-- プレイヤーの手を表示 -->
<div>結果: <span id="result-disp"></span></div><!-- 結果を表示 -->
<button class="player-btn">グー</button><!-- ボタンの表示 -->
<button class="player-btn">チョキ</button><!-- ボタンの表示 -->
<button class="player-btn">パー</button><!-- ボタンの表示 -->
10行目：判定結果を表示する要素を作成してIDを付けます。
2.勝ち負けを判定する処理を作成します。
プレイヤーの手とコンピュータの手を比較して判定結果を分岐する処理を作成します。
script要素の中のコードを以下のように変更します。
// プレイヤーの手で使用するもの
const playerDisp = document.getElementById('player-disp'); // プレイヤーの手を表示する要素
const playerBtns = document.getElementsByClassName('player-btn'); // プレイヤーの手のボタン要素
// コンピュータの手で使用するもの
const comDisp = document.getElementById('com-disp'); // コンピュータの手を表示する要素
const COM_HANDS = ['グー', 'チョキ', 'パー']; // コンピュータの手の配列
// 判定結果で使用するもの
const resultDisp = document.getElementById('result-disp'); // 判定結果を表示する要素
// じゃんけんの結果を表示する関数
function displayJanken() {
// プレイヤーの手を表示する処理
const playerHand = this.textContent; // プレイヤーの手を取得
playerDisp.textContent = playerHand; // プレイヤーの手を表示
// コンピュータの手を表示する処理
const comRand = Math.floor(Math.random() * 3); // 0〜2のランダム値を生成
comDisp.textContent = COM_HANDS[comRand]; // コンピュータの手を表示
// 判定処理
if (COM_HANDS[comRand] == playerHand) {
resultDisp.textContent = 'あいこ';
} else if (COM_HANDS[comRand] == 'グー' && playerHand == 'パー') {
resultDisp.textContent = 'プレイヤーの勝ち';
} else if (COM_HANDS[comRand] == 'チョキ' && playerHand == 'グー') {
resultDisp.textContent = 'プレイヤーの勝ち';
} else if (COM_HANDS[comRand] == 'パー' && playerHand == 'チョキ') {
resultDisp.textContent = 'プレイヤーの勝ち';
} else {
resultDisp.textContent = 'プレイヤーの負け';
}
}
// じゃんけんのボタンにイベントを登録
for (const element of playerBtns) {
element.addEventListener('click', displayJanken);
}
26行目：勝ち負けの判定を表示する要素の変数を準備します。
29行目：プレイヤーの手を表示する関数とコンピュータの手を表示する関数を一つにまとめます。
39-49行目：if文を使ってプレイヤーの手とコンピュータの手を比較して判定結果を分岐させます。
54行目：じゃんけんの結果を表示する関数をbutton要素のClickイベントに登録します。
以上で完成です。
じゃんけんゲームのサンプルへ行く
まとめ
プログラミングは、少しずつコードを追加して、その都度正しく動くか確認します。さらにコードを追加したり変更したりして、また動作を確認します。このように繰り返しながらプログラムを完成させていきます。
最初から完成型にするのではなく役割などで分けて段階的に作っていくことで、ミスを減らすことができ、「思ったように動かない」などの事態を防ぐことができると思います。