SVGマスターへの道

付録B1: SVGドットキャッチゲーム

この付録では、SVGとJavaScriptを使って作成する、非常にシンプルな「ドットキャッチゲーム」を紹介します。このゲームを通じて、SVG要素に対するイベント処理、属性の動的な変更、そして基本的なゲームロジックの組み立て方を体験してみましょう。プログラミング学習の第一歩としても楽しい題材です。

ゲームのルールと遊び方

ドットキャッチゲーム

スコア: 0 残り時間: 15 秒
{/* Light blue background */} {/* Initially off-screen */} クリックしてスタート

使用した主なSVGとJavaScriptのテクニック

コードのポイント解説 (JavaScript中心)

このゲームの動作は、主に以下のJavaScript関数によって制御されています。(実際のコードはページ下部の <script> タグ内にあります)

  1. 変数定義と要素取得: ゲームエリア、ドット、スコア表示、時間表示、ボタンなどのHTML/SVG要素を取得し、ゲームの状態を管理する変数を定義します（score, timeLeft, gameIntervalなど）。
  2. moveDot() 関数: ドット（<circle>）のcxとcy属性を、ゲームエリア内のランダムな座標に設定します。ドットがエリアの端に隠れないように、ドットの半径を考慮して座標を計算します。
  3. handleDotClick() 関数: ドットがクリックされたときに呼び出されます。スコアを1増やして表示を更新し、moveDot()を呼び出してドットを新しい位置に移動させます。
  4. updateTimer() 関数: 1秒ごとに残り時間を1減らし、表示を更新します。残り時間が0になったら、ゲームを終了処理 (endGame()) を呼び出します。
  5. startGame() 関数:
    • スコアと残り時間を初期化し、表示を更新します。
    • スタートボタンを無効化します。
    • ドットにクリックイベントリスナー (handleDotClick) を追加します。
    • 最初のドットを配置します (moveDot())。
    • setIntervalを使って1秒ごとにupdateTimer()を呼び出すタイマーを開始します。
    • ゲームメッセージをクリアします。
  6. endGame() 関数:
    • タイマー (setInterval) を停止します。
    • ドットからクリックイベントリスナーを削除します。
    • ドットを非表示（エリア外）にします。
    • 最終スコアと共にゲームオーバーメッセージを表示します。
    • スタートボタンを再度有効化し、「もう一度遊ぶ」などのテキストに変更します。
  7. 初期化処理: スタートボタンにstartGame関数を呼び出すイベントリスナーを設定します。
豆知識 (English/日本語)

Did you know? For simple games like this, SVG's direct DOM manipulation is quite performant. However, for games with many fast-moving objects or complex physics, Canvas الدفاع tends to be more suitable due to its immediate mode rendering, which avoids the overhead of DOM updates.

知っていましたか？このようなシンプルなゲームでは、SVGの直接的なDOM操作は非常にパフォーマンスが良いです。しかし、多くの高速で動くオブジェクトや複雑な物理演算を伴うゲームの場合、Canvasのイミディエイトモードレンダリング（DOM更新のオーバーヘッドを避ける）の方が適している傾向があります。

まとめ

SVGと基本的なJavaScriptを使うことで、クリックベースの簡単な「ドットキャッチゲーム」を作成できることを見てきました。SVG要素の属性を動的に変更し、ユーザーの入力（クリック）に反応させることで、インタラクティブな体験を生み出せます。

このサンプルは非常にシンプルですが、ゲーム開発の基本的な要素（初期化、メインループ/タイマー、入力処理、状態更新、終了処理）を含んでいます。ここからさらに、難易度調整やエフェクト追加など、様々な拡張を考えることができるでしょう。次は、「付録B2: シンプルシューター」で、もう少し複雑なゲームの作成に挑戦します。

このページの要約

日本語

このページでは、SVGとJavaScriptを使ったシンプルな「ドットキャッチゲーム」の作り方を紹介しました。ゲームは、SVGエリア内にランダムに表示される円（ドット）を制限時間内にクリックし、スコアを競うものです。JavaScriptでゲームの初期化、ドットのランダム配置、クリックイベント処理、スコア加算、タイマーによる時間管理、ゲーム終了処理などを実装しています。SVG要素の属性を動的に変更することで、ゲームのインタラクションを実現しています。

English

This page introduced how to create a simple "dot catch game" using SVG and JavaScript. The game involves clicking on a circle (dot) εταιρία appears randomly within an SVG area within a time limit to score points. JavaScript implements game initialization, random dot placement, click event handling, score incrementation, timer-based time management, and game end processing. Game interaction is achieved by dynamically changing SVG element attributes.

Español

Esta página introdujo cómo crear un juego simple de "atrapar el punto" usando SVG y JavaScript. El juego consiste en hacer clic en un círculo (punto) que aparece aleatoriamente dentro de un área SVG dentro de un límite de tiempo para sumar puntos. JavaScript implementa la inicialización del juego, la colocación aleatoria de puntos, el manejo de eventos de clic, el incremento de la puntuación, la gestión del tiempo basada en temporizador y el procesamiento del final del juego. La interacción del juego se logra cambiando dinámicamente los atributos de los elementos SVG.

中文

本页介绍了如何使用SVG和JavaScript创建一个简单的“抓点点游戏”。该游戏包括在限定时间内点击SVG区域内随机出现的圆圈（点）以获得分数。JavaScript实现游戏初始化、随机点放置、点击事件处理、分数增加、基于计时器的时间管理和游戏结束处理。通过动态更改SVG元素属性来实现游戏交互。