【初心者以外もいいかも】ゲームで学ぶJavaScript入門

2020 6/05

Kindle Unlimited に『ゲームで学ぶJavaScript入門』というものがあったので、なんとなしに読んでみたところ、なかなか良い内容でした。

2015年出版の本ですが、言語の基礎の部分の説明と、ゲームプログラミングの考え方が記載されているため、JavaScriptのバージョンアップによる陳腐化はしていません。

おそらく、数年後も問題なく通用する内容でしょう。

本書は Chapter1 – Chapter6 で構成されており 、 Chapter1 – Chapter4 までは、 HTML, CSS, JavaScript, Canvas についての基本の説明です。

私は仕事でWEBサイト制作をやっているので、 Chapter4 まではさらさら~と流し見した程度ですが、Chapter5 からは新鮮な内容でした。

例えば、ビット演算子の使い方は、WEBサイト制作の時には全然使っていなかったので「ひょえ~なるほど~。こういう風に使うものなのか~」と感心しっぱなしでした。

具体的には、 Chapter5 5-3 CarryIt というセクションです。

CarryIt の説明を引用します。

CarryIt昔からある定番ゲームです。
人が荷物を所定の位置に移動させるだけのシンプルなゲームです。
ただし、人は荷物を引っ張ることはできず、押すことしかできません。
また、ふたつを同時に押すことはできません。
すべての荷物を所定の場所に移動してください。
実際にやってみると思いのほか難しいかもしれません。

田中賢一郎.ゲームで学ぶJavaScript入門HTML5&CSSも身につく!(Kindleの位置No.2949-2952).株式会社インプレス.Kindle版.

『パックマン』のような平面のマップを動かして、荷物を押してゴールに持っていくゲームのことですね。

むしろ『ゼルダの伝説』のダンジョンの推理ギミックみたいなものですかね。

CarryIt を作るには、二次元配列に特定の数字を割り当てて、壁、通路、荷物、ゴールという役割とする仮想のマップを作ります。

その仮想マップを使って、ユーザーはキーボード操作で移動できるようにするわけですが、通路は移動できて、壁は移動できない、という処理が必要です。

ただ、それだけならビット演算子を使わなくても作成は可能です。

しかし本書は、ビット演算子に慣れること、また、コード量を少なくできることを理由として、ビット演算子を使う方法を紹介しています。

ビット演算子を使ってやることは、

  • 二次元配列の各数値の2ビット目の 0, 1 で移動できる・できないを判定すること
  • 移動後の値の更新をする

の2つです。

前者の移動できる・できないの判定はともかく、後者の移動後の値更新は、目から鱗でした。

コードの一部を引用します。

data[dy0][dx0]^=2; //隣の荷物をクリア
data[dy1][dx1]|=2; //さらに先に荷物をセット

田中賢一郎.ゲームで学ぶJavaScript入門HTML5&CSSも身につく!(Kindleの位置No.3058-3059).株式会社インプレス.Kindle版.

^演算子はビット排他論理和といって、0を1に、1を0に反転するものです。「^=2」とすることで、2ビット目を反転した結果を自分自身に代入します。

|演算子はOR演算子です。「|=2」とすることで、2ビット目のビットを1にした結果を自分自身に代入します。

田中賢一郎.ゲームで学ぶJavaScript入門HTML5&CSSも身につく!(Kindleの位置No.3060-3062).株式会社インプレス.Kindle版.

ビット演算子を使わない場合、荷物とゴールが重なった時など、前の数値を保存しておくなどの対応が必要になりますが、ビット演算子を使って値を変換してしまえば簡単に実現できてしまうんですね。

うーん。これは知らなかったです。

サイト制作でJavaScriptを使うことと、ゲームのプログラミングをするのは、用途が全然違うんだなぁと、感嘆するばかりでした。

コメント

コメントする

目次
閉じる