JavaScriptでモグラ叩き？を作る

　なんとなく思い立って、JavaScriptでゲームを作ることにしました。JavaScriptは、HTMLの補助に少し使ったことがあるくらいで、ほとんど使ったことがありません。

　とりあえず調べてみると、JavaScriptでゲームを作るなら、タイピングやモグラたたきが、最初に作るものとしては良さそうでしたので、まずは、それを作ることにしました。

　HTMLやCSS部分は、前に作ったものをほぼ流用することにして、メインとなるゲーム部分の仕様をさっさと決め、メインプログラムの製作にとり掛かりました。

　今回のモグラたたきの仕様は・・・

・サイズは９×９
・画像はテンキー配列の数字（１～９）
・対応するテンキーを押すと叩ける

としました。

　画像は、数字のPNG画像を用意しても良かったのですが、canvas上に直接その都度描写することにしました。段階としては、

１．枠を表示
２．乱数で数字を表示
３．叩かれたら丸を表示して消すor時間が経ったら消す

の繰り返しです。この流れをコードにすると、下のような感じですね。

function draw(x, y) {
ctx.beginPath();
ctx.rect(x + 5, y + 5, width - 10, width - 10);
ctx.strokeStyle = "deepskyblue";
ctx.lineWidth = 3;
ctx.stroke();
}

numbers[i] = (7 + i - (6 * Math.floor(i / 3)));
ctx.font = '50px sans-serif';
ctx.fillStyle = 'deepskyblue';
ctx.fillText(numbers[i], x + width / 4, y + 0.75 * width);

ctx.beginPath();
ctx.arc((i % 3) * width + width / 2, Math.floor(i / 3) * width + width / 2, 26, 0, 2 * Math.PI);
ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.stroke();

widthは、最初に
const width = 64;
として設定している定数です。
変数xとyとiで、キャンバスに描写するときの位置や状態を管理しています。
色々と入っている数式は、位置の調整などをするためのものです。

　あとは、制限時間の６０秒以内にどれだけ得点を稼げるかという形式にして、ゲームっぽく仕上げてみました。できたのは、下のような感じです。

開始時の画面

終了時の画面

　という感じで、今回のモグラ叩きは完成しましたが、どこにもモグラはいないので、これはタイピングゲームのような気もします。よほど打ち慣れてない方でなければ、45点くらいは普通に取れると思います。なお、スタート時はクリックではなく、タブキーを押してからテンキー横のエンターを押してスタートをするのがお勧めではあります。

　今回はネットなどで、いろんな方が作ったコードを参考にしたのですが、自力である程度、作れるレベルにまで成れればいいなとは思います。ちなみに完成したものは、以下のアドレスから見ることができます。

テンキー１分勝負！ - MakeNumber

　ちなみに、今回の副産物がこれです。押したキーのコードを、キャンバス上に表示させるツールです。自分がキーコードを知るのに、楽だから作っただけです。他のサイトにも、キーコードをチェックするものはありましたが、自前で持っておいた方が良さそうでしたので。

キーチェッカー

　キーチェッカーの、コードは以下の通りです。特に問題は無いと思いますが、慣れていないのでおかしなところがあるかもしれません。

//変数宣言
let ctx; //描画用
const width = 192; //キャンバスの幅
//キャンバスの設定
window.onload = function() {
 let c = $("canvas");
 ctx = c.getContext("2d");
 draw();
 window.onkeydown = keyHandler;
};
//描画処理
function draw() {
  ctx.beginPath();
  ctx.rect(5, 5, width - 10, width - 10);
  ctx.strokeStyle = "deepskyblue";
  ctx.lineWidth = 3;
  ctx.stroke();
}
//キーボードのイベントハンドラ
function keyHandler(e) {
 let x;
 x= e.keyCode;
 ctx.clearRect(10, 10, width - 20, width -20);
 ctx.font = '60px sans-serif';
 ctx.fillStyle = 'deepskyblue';
 ctx.fillText(x, 40, 115);
}
//その他
function $(id) {return document.getElementById(id);}

　さて、次は何を作りましょうか。perlのCGIの製作は、動作チェックが面倒なので、こっち系の方がいいかなあ。jsならブラウザさえあれば、動作確認できますしね。