付録B2: SVGシンプルシューターゲーム
この付録では、SVGとJavaScriptを使って、古典的なシューティングゲームの非常にシンプルなバージョンを作成します。自機を操作し、弾を発射して画面上部から現れる敵を撃ち落とすゲームです。このサンプルを通じて、キーボード入力の処理、複数のSVG要素の動的な生成・移動・削除、そして簡単な衝突判定といった、よりゲームらしいインタラクションの実装に触れてみましょう。
ゲームのルールと遊び方
- 「スタート」ボタンを押すとゲームが始まります。
- SVGエリアの下部に自機（青い三角形）が表示されます。
- キーボードの左右矢印キー (
←,→) で自機を左右に移動できます。 - スペースキー (
Space) で自機から弾（黄色い円）を発射します。弾は上方向にまっすぐ進みます。 - 画面上部から敵（赤い四角形）がランダムなX位置に出現し、下にゆっくりと移動してきます。
- 発射した弾が敵に当たると、敵は消滅しスコアが10点加算されます。
- 敵が画面の一番下に到達するか、自機に衝突するとゲームオーバーです。
- できるだけ高いスコアを目指しましょう！
シンプルシューター
使用した主なSVGとJavaScriptのテクニック
- SVG要素:
<polygon>(自機)、<circle>(弾)、<rect>(敵)。 - キーボードイベント処理 (
keydown,keyup): 自機の移動や弾の発射を検知。 - ゲームループ (
requestAnimationFrame): 画面のフレーム更新ごとにゲームの状態（弾の移動、敵の移動・出現、衝突判定など）を更新し、再描画。 - 動的な要素管理: 発射された弾や出現する敵をJavaScriptの配列で管理し、SVG要素を動的に生成・属性変更・削除。
- 衝突判定: 各要素のバウンディングボックス (
getBBox()) を使った単純な矩形同士の重なり判定。 - 状態管理: ゲームがプレイ中か、ゲームオーバーかなどの状態を管理。
Did you know? The `getBBox()` method in SVG returns the tightest bounding box around an element's geometry, excluding stroke width. If you need to include stroke in collision detection, you might need to adjust the bounding box dimensions manually or use more advanced techniques. Also, `getBBox()` results are in the element's local coordinate system if it has transformations; for global coordinates, `getBoundingClientRect()` might be more useful but needs conversion to SVG space.
知っていましたか？SVGの`getBBox()`メソッドは、要素のジオメトリ（線の太さは除く）を囲む最小のバウンディングボックスを返します。衝突判定に線の太さを含めたい場合は、バウンディングボックスの寸法を手動で調整するか、より高度なテクニックを使う必要があるかもしれません。また、`getBBox()`の結果は、要素に変形が適用されている場合、その要素のローカル座標系での値になります。グローバル座標が必要な場合は `getBoundingClientRect()` の方が役立つかもしれませんが、SVG座標空間への変換が必要です。
まとめ
このシューティングゲームのサンプルは、SVGでどこまでゲーム的な要素を実装できるかの一例です。より複雑なゲームには専門のエンジンが適していますが、SVGでもアイデア次第で楽しいインタラクティブコンテンツが作れますね。
次は、付録の最後のゲーム「付録B3: テキストアドベンチャー風ゲーム」で、SVGを使った物語体験に挑戦しましょう。
このページの要約
日本語
このページでは、SVGとJavaScriptを使ったシンプルなシューティングゲームの作り方を紹介しました。プレイヤーはキーボードで自機を操作し、弾を発射して敵を撃ちます。敵は画面上部から出現し下に移動します。弾と敵の衝突判定は各SVG要素のgetBBox()メソッドで得られるバウンディングボックスの重なりで判定します。ゲームの進行はrequestAnimationFrameによるゲームループで管理し、SVG要素の属性を動的に変更することでオブジェクトの移動や生成・削除を行っています。
English
This page introduced how to create a simple shooter game using SVG and JavaScript. The player controls a ship via the keyboard, firing bullets to shoot enemies that appear from the top of the screen and move downwards. Collision detection between bullets and enemies is determined by overlapping bounding boxes obtained using the getBBox() method of SVG elements. Game progression is managed by a game loop using requestAnimationFrame, dynamically changing SVG element attributes for object movement, creation, and deletion.
Español
Esta página introdujo cómo crear un juego de disparos simple usando SVG y JavaScript. El jugador controla una nave mediante el teclado, disparando balas para derribar enemigos que aparecen desde la parte superior de la pantalla y se mueven hacia abajo. La detección de colisiones entre balas y enemigos se determina mediante la superposición de cuadros delimitadores obtenidos con el método getBBox() de los elementos SVG. La progresión del juego se gestiona mediante un bucle de juego que utiliza requestAnimationFrame, cambiando dinámicamente los atributos de los elementos SVG para el movimiento, creación y eliminación de objetos.
中文
本页介绍了如何使用SVG和JavaScript创建一个简单的射击游戏。玩家通过键盘控制飞船，发射子弹射击从屏幕顶部出现并向下移动的敌人。子弹和敌人之间的碰撞检测是通过SVG元素的getBBox()方法获得的边界框是否重叠来确定的。游戏进程由使用requestAnimationFrame的游戏循环管理，通过动态更改SVG元素属性来实现对象的移动、创建和删除。