今回は、ブラウザゲームのプログラムの中身はどうなっているのか見ていきます。
必要な3つの要素
ブラウザゲームのプログラムを機能的な役割で分けると、以下の3つの要素になると思います。
- 表示（出力）
-
ブラウザゲームには、ブラウザ上で文字列や画像を表示したり、音声を再生したりする仕組みが必要になります。
キャラクターの動きや背景の動き、エフェクトなどのアニメーションも重要な要素です。ブラウザゲームでは、これらをHTMLやCSS、JavaScriptを使用して表現します。
- 操作（入力）
-
ブラウザゲームは、いわゆる「インタラクティブコンテンツ」の一種です。
インタラクティブコンテンツとは、ユーザー（プレイヤー）と双方向にやり取りできるコンテンツのことです。
そのためには、ユーザー操作（入力）の情報を取得する仕組みが必要になります。ブラウザでアクセス可能な入力装置にはキーボード、マウス、タッチパネル、ゲームパッドなどがあり、これらの情報はJavaScriptで取得できます。
- 変更（処理）
-
ユーザー（プレイヤー）の入力を受け取っただけでは何も起こらないので、何か変更（処理）して返す必要があります。
プレイヤーの操作でキャラクターを動かすなどの処理や、ゲームの特性やルールを決める処理が必要になります。ゲームプログラミングの核になる部分で、ゲーム特有の処理方法（アルゴリズム）などを使って作成していきます。
ゲームエンジンなどを使わないで作ると大変ですが、思い通りに動くと楽しいですし、また勉強にもなります。
具体的な例
実際のソースコードを例にプログラムの構造を見ていきます。
数値がランダムに表示されるだけの単純なサイコロのプログラムです。
プログラム全体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サイコロサンプル</title>
</head>
<body>
<div id="result-disp">0</div><!-- 結果を表示 -->
<button id="roll-btn">サイコロを振る</button><!-- ボタンの表示 -->
<script>
// サイコロの関数で使用するもの
const resultDisp = document.getElementById('result-disp'); // 結果を表示する要素
let result = 0; // 結果の変数
// サイコロの関数
function rollDice() {
result = Math.floor(Math.random() * (7 - 1) + 1); // ランダム値の生成
resultDisp.textContent = result; // 結果を代入
}
// サイコロのボタンのイベント
const rollBtn = document.getElementById('roll-btn'); // サイコロを振るボタンの要素
rollBtn.addEventListener('click', rollDice); // イベントに登録
</script>
</body>
</html>
表示（出力）部分
HTMLで結果を表示する場所とサイコロを振るボタンを作成します。
<div id="result-disp">0</div><!-- 結果を表示 --> <button id="roll-btn">サイコロを振る</button><!-- ボタンの表示 -->
操作（入力）する部分
ボタンが押されたら実行されるように、サイコロの関数をイベントに登録します。
// サイコロのボタンのイベント
const rollBtn = document.getElementById('roll-btn'); // サイコロを振るボタンの要素
rollBtn.addEventListener('click', rollDice); // イベントに登録
変更（処理）する部分
サイコロの関数で使用するために、結果を表示する要素と結果を格納する変数を準備します。
1〜6のランダムな数を生成して結果の変数に代入する処理の関数を作成します。
// サイコロの関数で使用するもの
const resultDisp = document.getElementById('result-disp'); // 結果を表示する要素
let result = 0; // 結果の変数
// サイコロの関数
function rollDice() {
result = Math.floor(Math.random() * (7 - 1) + 1); // ランダム値の生成
resultDisp.textContent = result; // 結果を代入
}
まとめ
プログラミングは段階的に作成していくとやりやすくなります。
実際のソースコードは、はっきりと機能別に分けて書かれていませんので、見た目では分かりにくいですが、機能的な役割で分けて考えるとプログラミングの流れがつかみやすいと思います。
次回は、段階的にプログラミングしていくことを意識して、簡単なじゃんけんゲームを作ってみたいと思います。