JavaScript»体験講座 体験講座 ゲームをつくろう もぐらたたき編

ファイル名: js-trial/quest_01857.html

背景画像の表示

最初に、キャンバスという、ゲーム画面を表示する領域をつくります。index.htmlの<body>と</body>でかこまれた部分に、次のように入力しましょう。<canvas>でかこまれた部分がゲーム画面を表示するところ、<script>でかこまれた部分がプログラムを書くところになります。

<body>
  <canvas id="canvas" width="320" height="400"></canvas>
  <script>
  </script>
</body>

つづいて、<script>と</script>でかこまれた部分に次のようにプログラムを書いてください。// から始まっている行はコメントといって、プログラムの説明が書かれているだけなので、入力しなくてもかまいません。

<script>
  // 表示する画像の読み込み
  const bg = new new Image();
  window.onload = function() {
    bg.src = "images/bg.png";
  };

  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  // 画面を表示する関数(かんすう。いろいろな命令をまとめてひとつにしたもの)
  const draw = function() {
    ctx.drawImage(bg, 0, 25);
  };

  // 画面を表示する関数を、50ミリ秒ごと(1秒に20回)に実行する。
  setInterval(draw, 50);
</script>

書けたら、index.htmlをブラウザで開いてみます。次のように表示されればOKです。画像が表示されているだけのように見えますが、実は一秒間に20回、同じ画像を繰り返し何度も表示しています。

モグラを表示します。

// 表示する画像の読み込み
const bg = new Image();
const mogu = new Image();
const hit = new Image();

window.onload = function() {
  bg.src = "images/bg.png";
  mogu.src = "images/mogu.png";
  hit.src = "images/hit.png";
};

const OFF = 0;  // モグラがいない
const ON = 1;   // モグラが頭をだした
const HIT = 2;  // モグラをたたいた

// モグラの穴。OFFはモグラが頭をだしていないことを表します。
const mogus = [OFF, OFF, OFF, OFF, OFF, OFF, OFF, OFF, OFF, OFF, OFF, OFF];

const BASE_Y = 90; // 背景の山の高さ
const MOGU_W = 80; // モグラの横幅
const MOGU_H = 80; // モグラの縦幅

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const draw = function() {

  ctx.drawImage(bg, 0, 25);

  // 12匹のモグラそれぞれについて、頭を出しているかどうかを調べて、出していたら表示
  for (let i = 0; i < mogus.length; i++) {
    const x = (i % 4) * MOGU_W;
    const y = BASE_Y + Math.floor(i / 4) * 80;

    switch (mogus[i]) {
      case OFF:
        break;
      case ON:
        ctx.drawImage(mogu, x, y);
        break;
      case OFF:
        ctx.drawImage(hit, x, y);
        break;
    }
  }

};

// 画面を表示する関数を、50ミリ秒ごと(1秒に20回)に実行する。
setInterval(draw, 50);

18行目のONとOFFを入れ替えれば、モグラが頭をだす位置がかわります。ためしに先頭の3つをONに変えてページを読み込み直すと、次のように表示されます。ONまたはOFFは12個ならんでいます。この12個がそれぞれどのモグラに対応しているのかを確認して、モグラの位置を計算している式の意味を考えてみましょう。

確認が終わったらすべてのモグラをOFFに戻しておいてください。

どのモグラが頭をだすのかランダムに決める

これまで入力したプログラムのすぐ下につづけて、次のプログラムを入力してください。

// どのモグラが頭をだすのか決める関数
const pyoko = function() {
  for (let i = 0; i < mogus.length; i++) {
    mogus[i] = Math.random() < 0.3 ? ON : OFF;
  }
};

// モグラが頭をだす関数を、1000ミリ秒(1秒)ごとに実行する。
setInterval(pyoko, 1000);

ページを読み込みなおすと、モグラが1秒ごとに頭をだしたり隠れたりします。モグラの状態が変わるのは1秒ごと、画面を書き換えているのは50ミリ秒ごとです。いまは画面を書き換える回数が無駄に多いですが、モグラをたたく時にこれが重要になります。

モグラをたたく

いよいよモグラをたたきます。<canvas>領域のどこかがマウスでクリックされたら、クリックされた位置にどのモグラがいるかを調べ、その位置のモグラが頭をだしていたら、ヒット成功となります。

// モグラをたたく
canvas.onmousedown = function(e) {

  // どのモグラがたたかれたかを判定
  const row = Math.floor(e.pageX / MOGU_W);
  const col = Math.floor((e.pageY - BASE_Y) / MOGU_H);
  const i = col * 4 + row;

  // たたかれたモグラが頭をだしている状態だったらヒット!
  if (mogus[i] === ON) {
    mogus[i] = HIT;
  }
};

泣かせる

モグラをたたいたときに音を鳴らします。プログラム中の画像を読み込んでいる箇所に、次のように音声ファイルを読み込む処理を追加します。

const bg = new Image();
const mogu = new Image();
const hit = new Image();
const audio = new Audio();

window.onload = function() {
  bg.src = "images/bg.png";
  mogu.src = "images/mogu.png";
  hit.src = "images/hit.png";
  audio.src = "audios/itai.wav";
};

つづいて、モグラをたたいたときの処理を行っている箇所に、次のように音声ファイルの再生処理を追加してください。

if (mogus[i] === ON) {
  mogus[i] = HIT;
  // 音声ファイルの再生
  audio.play();
  const newAudio = new Audio();
  newAudio.src = audio.src;
  audio = newAudio;
}

書き終わったら、ブラウザの表示を更新し、モグラをたたいてみてください。音がなります。音声ファイルはいくつか用意してあるので、好きなファイルに変更してみましょう。

スコアをつける

モグラの頭のON/OFFを設定している箇所の下に、点数を記憶しておく変数を追加し、

const mogus = [OFF, OFF, OFF, OFF, OFF, OFF, OFF, OFF, OFF, OFF, OFF, OFF];

// これを追加
let score = 0;

その点数を画面の上段に表示するよう、画面を描画する関数の中にプログラムを追加します。

const draw = function() {

  ctx.drawImage(bg, 0, 25);

  // これを追加
  ctx.fillStyle = "#fff";
  ctx.fillRect(0, 0, 320, 25);
  ctx.font = "bold 20px Consolas, 'Courier New', monospace";
  ctx.fillStyle = "#000";
  ctx.lineWidth = 1;
  ctx.fillText("SCORE " + score, 10, 20);

  for (let i = 0; i < mogus.length; i++) {

最後に、モグラをたたいた時に点数を増やします。

if (mogus[i] === ON) {
  mogus[i] = HIT;
  audio.play();
  const newAudio = new Audio();
  newAudio.src = audio.src;
  audio = newAudio;

  // これを追加
  score += 10;
}

書き終わったら、またブラウザの表示を更新して、モグラをたたいてみてください。ちゃんと点数が増えていますか? これでもぐらたたきゲームは完成です!