HTML5とJavaScriptを使ってシューティングゲームを作る方法は、初心者にも魅力的で手軽なゲーム開発の入り口です。今回の記事では、以前のバージョンからの改良点を中心に、特に「敵機の画像表示と動き」に焦点を当てて解説します。shootinggame_ver1.1.htmlからshootinggame_ver1.2.htmlへのバージョンアップに伴い、敵機の動きや表示方法がどのように改善されたのか、具体的なコード例を交えて説明します。
まず、前回のバージョンでは、敵機は単純な四角形として描かれていました。しかし、新しいバージョンでは、敵機の画像を読み込んで表示することで、より視覚的に魅力的なゲーム体験を提供します。敵機の画像表示により、ゲームのクオリティが大幅に向上しました。
さらに、敵機の動きにも改良が加えられました。前回のバージョンでは、敵機は一定の速度で単調に移動していましたが、新バージョンではランダムに出現し、移動速度や位置も変化するため、ゲームの難易度と面白さが向上しています。また、当たり判定もより正確になり、弾と敵機の衝突がスムーズに処理されるようになりました。
この記事では、HTML5とCanvasを用いたゲームキャンバスの設定、JavaScriptによる画像の読み込み、敵機の生成と描画、弾の発射と当たり判定など、ゲーム開発に必要なステップを順を追って解説します。実際のコード例を交えながら、ゲームループやスコア管理など、重要な要素も詳しく説明します。これにより、初心者でも簡単にシューティングゲームを開発できるようになります。
バージョンアップにより、視覚的にリッチで操作性の高いゲームを作成できるようになったことを体感してください。この記事を読み進めることで、HTML5とJavaScriptの基礎を学びながら、実際に動くゲームを完成させることができます。これから始まるゲーム開発の旅を楽しんでください！
HTMLとJavascriptで作ったシューティングゲーム Ver1.2だよ
今回は敵の機体を悪っぽい画像に置き換えたよ^^
iframeで埋め込んでるから、ゲームを１回クリックしてアクティブにして
ね。クリックしないとスペースキーを押したとき画面がスクロールしちゃうから～♪
- →右矢印：機体を右に移動
- ←左矢印：期待を左に移動
- スペースキー：弾発射
- F5ボタン：最初からやり直し
まずはカスタムHTMLに貼ったコードを貼り付けるぞ！
<!-- HTML部分 -->
<canvas id="gameCanvas" width="480" height="600" style="border:1px solid #000000;"></canvas>
<!-- CSS部分 -->
<style>
body { text-align: center; }
canvas { background-color: #f0f0f0; }
</style>
<!-- JavaScript部分 -->
<script>
// ゲーム設定
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// 自機画像の読み込み
const shipImage = new Image();
shipImage.src = 'https://tokodomo.xyz/wp-content/uploads/2024/07/jiki.png';
const shipWidth = 50;
const shipHeight = 50;
let shipX = canvas.width / 2 - shipWidth / 2;
const shipY = canvas.height - shipHeight - 10;
let ship = { x: shipX, y: shipY, width: shipWidth, height: shipHeight, dx: 0 };
let bullets = [];
let enemies = [];
let score = 0;
// 敵機画像の読み込み
const enemyImage = new Image();
enemyImage.src = 'https://tokodomo.xyz/wp-content/uploads/2024/07/teki.png';
document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);
document.addEventListener("keypress", keyPressHandler);
function keyDownHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight") {
ship.dx = 5;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
ship.dx = -5;
}
}
function keyUpHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight" || e.key === "Left" || e.key === "ArrowLeft") {
ship.dx = 0;
}
}
function keyPressHandler(e) {
if (e.key === " " || e.key === "Spacebar") {
bullets.push({ x: ship.x + ship.width / 2 - 2.5, y: ship.y, width: 5, height: 10, dy: -5 });
}
}
function drawShip() {
ctx.drawImage(shipImage, ship.x, ship.y, ship.width, ship.height);
}
function drawBullets() {
ctx.fillStyle = "#FF0000";
bullets.forEach((bullet, index) => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
bullet.y += bullet.dy;
if (bullet.y < 0) {
bullets.splice(index, 1);
}
});
}
function drawEnemies() {
enemies.forEach((enemy, index) => {
ctx.drawImage(enemyImage, enemy.x, enemy.y, enemy.width, enemy.height);
enemy.y += enemy.dy;
if (enemy.y > canvas.height) {
enemies.splice(index, 1);
score--;
}
});
}
function createEnemies() {
if (Math.random() < 0.02) {
let enemyX = Math.random() * (canvas.width - 30);
enemies.push({ x: enemyX, y: 0, width: 30, height: 30, dy: 2 });
}
}
function detectCollisions() {
bullets.forEach((bullet, bulletIndex) => {
enemies.forEach((enemy, enemyIndex) => {
if (
bullet.x < enemy.x + enemy.width &&
bullet.x + bullet.width > enemy.x &&
bullet.y < enemy.y + enemy.height &&
bullet.y + bullet.height > enemy.y
) {
bullets.splice(bulletIndex, 1);
enemies.splice(enemyIndex, 1);
score++;
}
});
});
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ship.x += ship.dx;
if (ship.x < 0) ship.x = 0;
if (ship.x + ship.width > canvas.width) ship.x = canvas.width - ship.width;
drawShip();
drawBullets();
drawEnemies();
createEnemies();
detectCollisions();
requestAnimationFrame(update);
}
// ゲーム開始
document.addEventListener("DOMContentLoaded", (event) => {
update();
});
</script>ゲームの基本設定
このセクションでは、シューティングゲームの土台を作るための基本的な設定について説明します。HTMLとCSSを使用してゲームキャンバスを設定し、JavaScriptを使ってゲームの初期設定やループ処理を実装します。これらの設定は、ゲーム全体の動作をスムーズにし、プレイヤーが快適にゲームを楽しむための基盤となります。正確かつ丁寧に設定を行うことで、ゲーム開発の後半部分でのトラブルを回避し、クリエイティブな要素に集中することができます。各ステップを順を追って詳しく解説していくので、初心者の方でも安心して進められます。
ゲームキャンバスの設定
まず、シューティングゲームの舞台となるキャンバスを設定します。HTMLとCSSを使用して、キャンバスの要素を作成し、基本的なスタイルを整えます。キャンバスはゲームの中で描画を行うためのエリアであり、ここに自機や敵機、弾などのゲーム要素が表示されます。
<canvas id="gameCanvas" width="480" height="600" style="border:1px solid #000000;"></canvas>
<style>
body { text-align: center; }
canvas { background-color: #f0f0f0; }
</style>上記のコードは、HTMLとCSSを使用してキャンバスを設定する基本的な方法を示しています。ここで、キャンバスの幅と高さをそれぞれ480ピクセルと600ピクセルに設定し、黒い枠線を付けています。さらに、CSSを使ってキャンバスの背景色を淡いグレーに設定し、ゲームの見た目を整えます。
詳細な解説
キャンバス要素はHTML5で導入されたもので、グラフィックスやアニメーションを描画するための強力なツールです。JavaScriptを使ってキャンバスに描画を行うためには、まずキャンバス要素を取得し、そのコンテキスト（2Dや3Dなど）を取得する必要があります。ここでは、2Dコンテキストを使用します。
キャンバスの幅と高さは、ゲームのプレイエリアを定義する重要な設定です。480ピクセルの幅と600ピクセルの高さは、標準的なシューティングゲームのプレイエリアとして適しています。このサイズは、プレイヤーが自機を操作しやすく、また敵機や弾が画面内で適切に表示されるように設計されています。
次に、CSSを使ってキャンバスのスタイルを設定します。text-align: center;は、ページ全体のテキストを中央揃えにするためのスタイルであり、ゲームキャンバスをページの中央に配置する効果があります。background-color: #f0f0f0;は、キャンバスの背景色を設定するためのスタイルです。ここでは淡いグレーを使用していますが、これはゲーム要素が見やすく、目に優しい色合いです。
最後に、style="border:1px solid #000000;"を使ってキャンバスに黒い枠線を追加しています。この枠線は、ゲームエリアの境界を明確にし、プレイヤーにゲームのプレイエリアを視覚的に認識させるために重要です。
これで、シューティングゲームのキャンバスの基本設定が完了しました。次は、このキャンバスを使って具体的なゲーム要素を描画し、ゲームの動きを実装していきます。キャンバスの設定がしっかりできていることで、スムーズに次のステップに進むことができます！
JavaScriptによる初期設定
次に、JavaScriptを使ってキャンバスとコンテキストを取得し、自機や敵機の画像をロードします。また、初期の変数やオブジェクトの設定も行います。これにより、ゲームの基本的な構造を作り上げ、後続のゲームロジックの実装をスムーズに進めることができます。
まず、HTMLで設定したキャンバス要素をJavaScriptで取得し、その2Dコンテキストを取得します。2Dコンテキストは、キャンバス上に描画を行うためのAPIを提供します。次に、自機と敵機の画像をロードし、それらをキャンバスに描画する準備をします。さらに、ゲームの基本的な変数やオブジェクトを初期化します。これには、自機や敵機の位置、サイズ、速度、そして弾の管理などが含まれます。
// ゲーム設定
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// 自機画像の読み込み
const shipImage = new Image();
shipImage.src = 'https://tokodomo.xyz/wp-content/uploads/2024/07/jiki.png';
const shipWidth = 50;
const shipHeight = 50;
let shipX = canvas.width / 2 - shipWidth / 2;
const shipY = canvas.height - shipHeight - 10;
let ship = { x: shipX, y: shipY, width: shipWidth, height: shipHeight, dx: 0 };
let bullets = [];
let enemies = [];
let score = 0;
// 敵機画像の読み込み
const enemyImage = new Image();
enemyImage.src = 'https://tokodomo.xyz/wp-content/uploads/2024/07/teki.png';このコードでは、まずキャンバス要素を取得し、その2Dコンテキストをctx変数に格納します。次に、自機の画像をロードし、shipImageという変数に格納します。shipWidthとshipHeightを使って自機のサイズを設定し、shipXとshipYを使って自機の初期位置を計算します。これにより、自機がキャンバスの中央下部に配置されます。
自機の情報はshipというオブジェクトにまとめられています。このオブジェクトには、自機の位置（x, y）、サイズ（width, height）、および速度（dx）が含まれています。また、bullets、enemies、およびscoreという配列と変数も初期化されています。これらは、発射された弾、生成された敵機、およびゲームのスコアを管理するために使用されます。
さらに、敵機の画像も同様にロードし、enemyImageという変数に格納します。これにより、敵機の描画も準備が整いました。
この初期設定により、ゲームの基本的な要素が整い、次のステップに進む準備ができました。次は、これらの設定を基にして、実際にキャンバス上に自機や敵機を描画し、ゲームの動きを実現していきます。これにより、プレイヤーが自機を操作し、敵機と戦うシューティングゲームの基盤が完成します。
ゲームループの実装
ゲームループは、ゲームの動きを管理する心臓部です。requestAnimationFrameを使ってスムーズなアニメーションを実現し、ゲームの各要素を更新して描画します。これにより、プレイヤーの入力に応じて自機が動き、敵機がランダムに出現し、弾が発射されるといった動的なゲーム体験が可能になります。
まず、ゲームループの基本的な仕組みを理解しましょう。ゲームループは、継続的に呼び出される関数で、各フレームごとにゲームの状態を更新し、描画を行います。これにより、ゲームがリアルタイムで動くようになります。requestAnimationFrameは、ブラウザが最適なタイミングで描画を行うためのメソッドで、スムーズなアニメーションを実現します。
function update() {
// キャンバスをクリア
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 自機の位置を更新
ship.x += ship.dx;
if (ship.x < 0) ship.x = 0;
if (ship.x + ship.width > canvas.width) ship.x = canvas.width - ship.width;
// 自機の描画
drawShip();
// 弾の描画と更新
drawBullets();
// 敵機の描画と更新
drawEnemies();
// 新しい敵機の生成
createEnemies();
// 当たり判定の検出
detectCollisions();
// 次のフレームをリクエスト
requestAnimationFrame(update);
}
// ゲーム開始
document.addEventListener("DOMContentLoaded", (event) => {
update();
});このコードでは、updateという関数がゲームループを実装しています。requestAnimationFrameを使って、次のフレームの描画をブラウザにリクエストしています。この関数は、キャンバスをクリアし、自機の位置を更新し、すべてのゲーム要素を描画するために使用されます。
まず、ctx.clearRect(0, 0, canvas.width, canvas.height);でキャンバスをクリアします。これにより、前のフレームの描画内容を消去し、新しいフレームの描画を開始します。次に、自機の位置を更新します。ship.x += ship.dx;で自機のx座標を更新し、キャンバスの端を越えないようにチェックします。
次に、自機を描画するためにdrawShip関数を呼び出します。さらに、弾を描画して更新するためにdrawBullets関数を、敵機を描画して更新するためにdrawEnemies関数を呼び出します。新しい敵機を生成するためにcreateEnemies関数を呼び出し、最後に弾と敵機の当たり判定を検出するためにdetectCollisions関数を呼び出します。
この一連の処理を行うことで、ゲームの各要素がリアルタイムで更新され、描画されます。これにより、プレイヤーはスムーズに動くゲーム体験を楽しむことができます。ゲームループは、ゲームの動きを管理する中核であり、これがあることでゲーム全体が生き生きと動き出します。
敵機の表示と動き
このセクションでは、シューティングゲームの敵機の表示と動きについて詳しく解説します。敵機の画像を読み込み、生成し、キャンバス上で動かす方法を説明します。
みんながワクワクする敵機の登場です！ゲームをもっと楽しく、もっとエキサイティングにするためには、敵機の存在が欠かせませんよね。まずは、敵機の画像を読み込み、ゲームに表示する方法から始めましょう。
まず、敵機の画像を読み込むためにJavaScriptのImageオブジェクトを使用します。このオブジェクトを使うことで、画像を簡単にロードし、キャンバス上に描画することができます。下のコードを見てください：
// 敵機画像の読み込み
const enemyImage = new Image();
enemyImage.src = 'https://tokodomo.xyz/wp-content/uploads/2024/07/teki.png';このコードでは、新しいImageオブジェクトを作成し、そのsrcプロパティに敵機の画像URLを指定しています。この画像はキャンバスに描画される準備が整いました。次に、敵機の生成と表示について詳しく見ていきましょう。
敵機を生成するために、敵機の位置、サイズ、速度などを設定します。そして、ランダムな位置に敵機を生成し、それをゲームのループ内で描画するようにします。これにより、プレイヤーは予測不能な場所から敵機が現れるため、ゲームがよりダイナミックで挑戦的になります。
さらに、敵機の動きについても説明します。敵機は上から下へ向かって移動するように設定します。これはシューティングゲームの基本的な動きの一つで、プレイヤーはこの敵機を避けながら、または撃ちながら進むことになります。
敵機の生成と移動は以下のように行います：
function createEnemies() {
if (Math.random() < 0.02) {
let enemyX = Math.random() * (canvas.width - 30);
enemies.push({ x: enemyX, y: 0, width: 30, height: 30, dy: 2 });
}
}このコードでは、Math.random()を使ってランダムな位置に敵機を生成しています。Math.random() < 0.02の条件によって、一定の確率で新しい敵機が生成されます。enemyXはキャンバスの幅に基づいてランダムに決定され、敵機のサイズ（30×30ピクセル）と下方向への速度（dy: 2）が設定されています。
このようにして生成された敵機は、ゲームループ内で描画され、移動されます。敵機の位置はフレームごとに更新され、下方向に動いていきます。これにより、ゲームのプレイフィールドに常に新しい敵機が登場し、プレイヤーに挑戦を提供します。
敵機の表示と動きの設定が完了したら、次はこれらをキャンバス上に描画し、動きをつけるためのコードを実装していきます。これで、ゲームがさらにエキサイティングで楽しいものになります！
さて、これらの設定がすべて整ったら、次は敵機がキャンバス上で実際に動く様子を見てみましょう。皆さんが作るゲームが、どれほど素晴らしいものになるか楽しみですね！
敵機画像のロード
敵機の画像を読み込み、ゲーム内で表示する準備をします。これにより、ゲームが視覚的にリッチになります。
さて、楽しみにしているシューティングゲームの次のステップです！今回は、敵機の画像を読み込んでゲーム内に表示する方法を一緒に学びましょう。敵機の画像があると、ゲームがもっとカラフルで面白くなりますよね。さあ、さっそく始めましょう！
まずは、JavaScriptで画像を読み込む方法について説明します。画像を読み込むために、JavaScriptのImageオブジェクトを使います。このオブジェクトを使うことで、簡単に画像をロードし、後でキャンバスに描画することができるんです。以下のコードを見てください。
// 敵機画像の読み込み
const enemyImage = new Image();
enemyImage.src = 'https://tokodomo.xyz/wp-content/uploads/2024/07/teki.png';このコードは、とてもシンプルですがとても重要です。まず、新しいImageオブジェクトを作成しています。そして、そのsrcプロパティに敵機の画像URLを設定します。これにより、指定したURLから画像がロードされ、enemyImageオブジェクトに保存されます。
画像をロードすることで、ゲーム内で敵機を表示する準備が整います。ロードされた画像は、キャンバスに描画されるときに使用されます。これにより、ゲームが視覚的に豊かになり、プレイヤーはよりリアルな体験を楽しむことができます。
次に、画像をキャンバスに描画する方法について説明しますが、それは次の見出しで詳しく解説します。ここでは、画像の読み込みの重要性についてもう少し掘り下げてみましょう。
ゲーム開発において、画像の読み込みは非常に重要なステップです。なぜなら、画像がなければ、ゲームのビジュアルが非常にシンプルで味気ないものになってしまうからです。特にシューティングゲームでは、敵機や自機、背景など多くの画像が必要となります。これらの画像を適切に読み込み、表示することで、ゲームの雰囲気やクオリティが大きく向上します。
また、画像の読み込みには注意点があります。画像の読み込みは非同期で行われるため、画像が完全にロードされる前に描画しようとするとエラーが発生することがあります。これを防ぐために、画像のonloadイベントを利用して、画像がロードされた後に描画を行うようにすることが一般的です。しかし、ここでは基本的な説明に留め、詳細な実装は次のセクションで扱います。
以上で、敵機の画像の読み込みについての説明は終わりです。このステップをしっかりと理解し、次に進む準備を整えましょう。ゲームがますます楽しくなること間違いなしです！
敵機の生成
敵機をランダムな位置に生成し、ゲームフィールドに追加します。敵機は一定の確率で生成され、下方向に移動します。
次は敵機の生成について学びましょう。ゲームをもっとエキサイティングにするためには、敵機がランダムな位置に出現して動くことが重要です。これによって、プレイヤーはいつどこから敵機が出現するか予測できず、ゲームがより挑戦的になります。
まず、敵機の生成方法について説明します。敵機を生成するためには、一定の確率で新しい敵機を作り出す必要があります。これを実現するために、Math.random()関数を使用します。この関数は0から1の間のランダムな数を生成します。これを使って、敵機の生成確率を設定しましょう。
以下のコードを見てください：
function createEnemies() {
if (Math.random() < 0.02) {
let enemyX = Math.random() * (canvas.width - 30);
enemies.push({ x: enemyX, y: 0, width: 30, height: 30, dy: 2 });
}
}このコードでは、Math.random()関数を使って0.02（2%）の確率で新しい敵機を生成しています。if (Math.random() < 0.02)の条件を満たすと、新しい敵機が作成され、enemies配列に追加されます。敵機のx座標はMath.random() * (canvas.width - 30)でランダムに決定され、y座標は0（画面の上部）に設定されます。敵機のサイズは30×30ピクセルで、下方向に移動する速度（dy）は2ピクセルです。
これで、敵機がランダムな位置に生成されるようになりました。次に、生成された敵機をゲームフィールドに追加し、下方向に移動させる方法について説明します。敵機の位置はフレームごとに更新され、y座標が増加します。これにより、敵機は画面の上部から下部に向かって移動します。
ゲームループ内で、生成された敵機を描画し、移動させる処理を行います。これにより、ゲーム内で動く敵機をプレイヤーが目で追うことができ、シューティングゲームらしいダイナミックなプレイ体験が実現します。
敵機の生成と移動がうまくいくと、ゲームがますます楽しくなりますね！このステップをしっかり理解して、自分のゲームに活かしましょう。次のセクションでは、生成された敵機をキャンバス上に描画し、動かす方法について詳しく説明しますので、お楽しみに！
H3: 敵機の描画
生成した敵機をキャンバスに描画し、移動させます。移動中に画面外に出た敵機は削除されます。
さて、みんな！次は敵機を実際にキャンバスに描画して、ゲームをさらに楽しくしましょう！敵機が画面に現れて動くことで、ゲームは一気にエキサイティングになりますよ。今回は、生成された敵機をキャンバスに描画し、移動させる方法を一緒に学びましょう。
まず、敵機を描画するためには、ゲームループの中で敵機の位置を更新し、その新しい位置に敵機を描画します。これにより、敵機が上から下に移動するアニメーションが実現できます。以下のコードを見てください。
function drawEnemies() {
enemies.forEach((enemy, index) => {
ctx.drawImage(enemyImage, enemy.x, enemy.y, enemy.width, enemy.height);
enemy.y += enemy.dy;
if (enemy.y > canvas.height) {
enemies.splice(index, 1);
}
});
}このコードは、drawEnemiesという関数を定義しています。この関数は、enemies配列の中のすべての敵機を描画し、その位置を更新します。具体的には、ctx.drawImage(enemyImage, enemy.x, enemy.y, enemy.width, enemy.height)を使って、敵機の画像をキャンバスに描画します。enemy.xとenemy.yは敵機の現在の位置を示し、enemy.widthとenemy.heightは敵機のサイズを示しています。
次に、enemy.y += enemy.dyで、敵機のy座標を更新します。これにより、敵機が下方向に移動します。enemy.dyは敵機の移動速度を示しており、この値を増減することで敵機の移動速度を調整できます。
さらに、敵機が画面外に出たかどうかをチェックする必要があります。if (enemy.y > canvas.height)で、敵機がキャンバスの高さを超えた場合、その敵機をenemies配列から削除します。これにより、画面外に出た敵機が適切に管理され、メモリリークを防ぎます。
このようにして、敵機が生成されてから画面外に出るまでの一連の動きを管理することができます。ゲームループの中でdrawEnemies関数を呼び出すことで、敵機の動きをリアルタイムで更新し、プレイヤーに挑戦を提供します。
敵機の描画と移動がうまくいくと、ゲームがますます楽しくなりますね！このステップをしっかり理解して、自分のゲームに活かしましょう。次のセクションでは、さらに詳細なゲームロジックについて説明しますので、お楽しみに！
以上で、敵機の描画についての説明は終わりです。これで敵機をキャンバスに描画し、動かす準備が整いました。次のステップに進んで、ゲームをさらに面白くしていきましょう！
自機と弾の動き
このセクションでは、自機とその弾の動きについて解説します。キーボードで自機を操作し、スペースキーで弾を発射する方法を説明します。
今回は自機とその弾の動きについて学びましょう。シューティングゲームの楽しさは、プレイヤーが自機を操作して敵を倒すことにありますよね。自機を自由に動かして、弾を発射できるようにするための方法を一緒に見ていきましょう！
まず、自機を操作する方法から説明します。自機の動きは、キーボードの左右の矢印キーを使って制御します。JavaScriptのイベントリスナーを使って、キーが押されたときと離されたときの動きを設定します。以下のコードを見てください。
document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);
function keyDownHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight") {
ship.dx = 5;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
ship.dx = -5;
}
}
function keyUpHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight" || e.key === "Left" || e.key === "ArrowLeft") {
ship.dx = 0;
}
}このコードでは、keydownイベントとkeyupイベントをリッスンし、それぞれのイベントが発生したときにkeyDownHandlerとkeyUpHandler関数を呼び出します。keyDownHandler関数では、右矢印キーまたはRightキーが押されたときに自機が右に移動し、左矢印キーまたはLeftキーが押されたときに自機が左に移動するように設定しています。また、keyUpHandler関数では、矢印キーが離されたときに自機の移動を停止させます。
次に、自機が移動するための設定が完了したら、弾を発射する方法について説明します。スペースキーを使って弾を発射するには、keypressイベントを使用します。以下のコードを見てください。
document.addEventListener("keypress", keyPressHandler);
function keyPressHandler(e) {
if (e.key === " " || e.key === "Spacebar") {
bullets.push({ x: ship.x + ship.width / 2 - 2.5, y: ship.y, width: 5, height: 10, dy: -5 });
}
}このコードでは、keypressイベントをリッスンし、スペースキーが押されたときにkeyPressHandler関数を呼び出します。keyPressHandler関数では、弾を発射するためにbullets配列に新しい弾を追加します。弾の初期位置は自機の中央から発射されるように設定されており、弾は上方向に移動します。
これで、自機と弾の基本的な動きを実現することができました。自機を左右に移動させ、スペースキーで弾を発射することで、プレイヤーは敵を倒すことができます。
シューティングゲームの基本的な操作を理解することで、ゲームをプレイする楽しさが一段と増しますね！このステップをしっかりマスターして、自分のゲームをより楽しいものにしましょう。次のセクションでは、弾の描画と当たり判定について詳しく説明しますので、お楽しみに！
自機の操作
自機の移動は、キーボードイベントを利用して行います。左右の矢印キーで自機を左右に移動させます。
次は自機の操作方法を学びましょう。自機を自在に動かせるようになると、ゲームがもっと楽しくなりますよね。今回は、キーボードの左右の矢印キーを使って、自機を左右に動かす方法を説明します。
まず、自機を動かすためには、JavaScriptのイベントリスナーを使います。イベントリスナーは、特定のイベントが発生したときに特定の関数を呼び出すためのものです。ここでは、キーボードのキーが押されたときと離されたときに、自機の動きを制御するための関数を呼び出します。
document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);
function keyDownHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight") {
ship.dx = 5;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
ship.dx = -5;
}
}
function keyUpHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight" || e.key === "Left" || e.key === "ArrowLeft") {
ship.dx = 0;
}
}このコードでは、keydownイベントとkeyupイベントをリッスンしています。keydownイベントはキーが押されたときに発生し、keyupイベントはキーが離されたときに発生します。document.addEventListenerを使って、これらのイベントが発生したときにそれぞれkeyDownHandlerとkeyUpHandler関数を呼び出します。
keyDownHandler関数では、右矢印キーまたはRightキーが押されたときに自機が右に移動し、左矢印キーまたはLeftキーが押されたときに自機が左に移動するように設定しています。具体的には、ship.dxに移動速度を設定することで、自機の移動方向と速度を制御しています。右に移動する場合は正の値（ここでは5）、左に移動する場合は負の値（ここでは-5）を設定します。
keyUpHandler関数では、矢印キーが離されたときにship.dxを0に設定します。これにより、自機の移動が停止します。これらの設定により、自機がスムーズに左右に移動できるようになります。
次に、ゲームループの中で自機の位置を更新する処理を追加します。ship.xにship.dxを加算することで、自機の位置を更新します。また、自機がキャンバスの端を越えないようにするためのチェックも行います。
このようにして、キーボードの左右の矢印キーを使って自機を自由に操作できるようになります。自機の操作ができると、ゲームが一層楽しくなりますね！このステップをしっかり理解して、自分のゲームに応用してみましょう。
弾の発射
スペースキーで弾を発射し、弾が上方向に移動する処理を実装します。
今回は自機から弾を発射する方法を学びましょう。シューティングゲームの醍醐味は、敵を倒すための弾の発射にありますよね。今回は、スペースキーを使って弾を発射し、それが上方向に移動するようにする方法を一緒に見ていきましょう。
まず、弾を発射するためには、キーボードのスペースキーを押したときに弾が生成されるようにします。これには、JavaScriptのイベントリスナーを使って、スペースキーが押されたときに特定の関数を呼び出すように設定します。以下のコードを見てください。
document.addEventListener("keypress", keyPressHandler);
function keyPressHandler(e) {
if (e.key === " " || e.key === "Spacebar") {
bullets.push({ x: ship.x + ship.width / 2 - 2.5, y: ship.y, width: 5, height: 10, dy: -5 });
}
}このコードでは、keypressイベントをリッスンし、スペースキーが押されたときにkeyPressHandler関数を呼び出します。keyPressHandler関数では、新しい弾を生成してbullets配列に追加します。弾の初期位置は、自機の中央から発射されるように設定されています。
具体的には、bullets.push({ x: ship.x + ship.width / 2 - 2.5, y: ship.y, width: 5, height: 10, dy: -5 });で新しい弾を生成しています。弾のx座標は、自機の中央から発射されるように、自機のx座標に自機の幅の半分を足して、その位置に弾の幅の半分を引いた値に設定します。弾のy座標は、自機のy座標と同じです。また、弾の幅と高さをそれぞれ5ピクセルと10ピクセルに設定し、上方向に移動する速度（dy）を-5に設定しています。
これで、スペースキーを押すと弾が発射されるようになりました。次に、発射された弾が上方向に移動する処理を追加します。ゲームループ内で弾の位置を更新し、弾がキャンバスの外に出た場合に削除する処理を実装します。
弾の移動処理は次のようになります。
function drawBullets() {
ctx.fillStyle = "#FF0000";
bullets.forEach((bullet, index) => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
bullet.y += bullet.dy;
if (bullet.y < 0) {
bullets.splice(index, 1);
}
});
}このコードでは、drawBullets関数を使って弾を描画し、その位置を更新します。ctx.fillStyle = "#FF0000";で弾の色を赤に設定し、ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);で弾を描画します。弾のy座標をbullet.dyの値で更新し、上方向に移動させます。また、弾がキャンバスの上端を超えた場合、bullets配列からその弾を削除します。
これで、自機から発射された弾が上方向に移動するようになりました。ゲームのプレイ中に弾を発射して敵を倒すことで、ゲームがよりダイナミックで楽しいものになりますね！
弾の描画
発射された弾をキャンバスに描画し、移動させます。画面外に出た弾は削除されます。
今回は発射された弾をキャンバスに描画し、その弾が移動するようにする方法を学びましょう。弾がしっかりと描画され、移動することで、ゲームがさらにリアルで面白くなりますよ。
まず、発射された弾をキャンバスに描画する方法について説明します。JavaScriptのfillRectメソッドを使って、弾をキャンバス上に描画します。弾の描画処理は、ゲームループの中で行われます。以下のコードを見てください。
function drawBullets() {
ctx.fillStyle = "#FF0000";
bullets.forEach((bullet, index) => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
bullet.y += bullet.dy;
if (bullet.y < 0) {
bullets.splice(index, 1);
}
});
}このコードでは、まずctx.fillStyle = "#FF0000";で弾の色を赤に設定しています。次に、bullets配列の中にあるすべての弾を描画するためにforEachメソッドを使用しています。それぞれの弾に対して、ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);を使って弾を描画します。bullet.xとbullet.yは弾の現在の位置を示し、bullet.widthとbullet.heightは弾のサイズを示します。
次に、弾が上方向に移動する処理を追加します。bullet.y += bullet.dy;で弾のy座標を更新し、弾が上に移動するようにします。bullet.dyは弾の移動速度を示しており、ここでは-5に設定されています。これにより、弾が毎フレーム5ピクセル上に移動します。
さらに、弾が画面外に出たかどうかをチェックし、画面外に出た弾を削除します。if (bullet.y < 0)で、弾がキャンバスの上端を超えた場合をチェックし、bullets.splice(index, 1);でその弾をbullets配列から削除します。これにより、不要な弾が配列に残らず、メモリリークを防ぐことができます。
このようにして、発射された弾がキャンバスに描画され、上方向に移動し、画面外に出た弾が適切に削除されるようになります。弾の描画と移動がうまくいくと、ゲームがさらに楽しくなりますね！このステップをしっかり理解して、自分のゲームに応用してみましょう。
自機と弾の動き
このセクションでは、自機とその弾の動きについて解説します。キーボードで自機を操作し、スペースキーで弾を発射する方法を説明します。
今回は、自機とその弾の動きについて学びましょう。シューティングゲームの楽しさは、自機を自在に動かして敵を倒すことにありますよね。このセクションでは、キーボードで自機を操作し、スペースキーで弾を発射する方法を詳しく説明します。さあ、一緒に楽しく学びましょう！
まず、自機の操作から始めます。自機の移動は、キーボードの左右の矢印キーを使って行います。JavaScriptのイベントリスナーを使って、キーが押されたときと離されたときの動きを設定します。以下のコードを見てください。
document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);
function keyDownHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight") {
ship.dx = 5;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
ship.dx = -5;
}
}
function keyUpHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight" || e.key === "Left" || e.key === "ArrowLeft") {
ship.dx = 0;
}
}このコードでは、keydownイベントとkeyupイベントをリッスンしています。keydownイベントはキーが押されたときに発生し、keyupイベントはキーが離されたときに発生します。document.addEventListenerを使って、これらのイベントが発生したときにそれぞれkeyDownHandlerとkeyUpHandler関数を呼び出します。
keyDownHandler関数では、右矢印キーまたはRightキーが押されたときに自機が右に移動し、左矢印キーまたはLeftキーが押されたときに自機が左に移動するように設定しています。具体的には、ship.dxに移動速度を設定することで、自機の移動方向と速度を制御しています。右に移動する場合は正の値（ここでは5）、左に移動する場合は負の値（ここでは-5）を設定します。
keyUpHandler関数では、矢印キーが離されたときにship.dxを0に設定します。これにより、自機の移動が停止します。これらの設定により、自機がスムーズに左右に移動できるようになります。
次に、弾の発射方法について説明します。スペースキーを使って弾を発射するためには、keypressイベントを使用します。以下のコードを見てください。
document.addEventListener("keypress", keyPressHandler);
function keyPressHandler(e) {
if (e.key === " " || e.key === "Spacebar") {
bullets.push({ x: ship.x + ship.width / 2 - 2.5, y: ship.y, width: 5, height: 10, dy: -5 });
}
}このコードでは、keypressイベントをリッスンし、スペースキーが押されたときにkeyPressHandler関数を呼び出します。keyPressHandler関数では、新しい弾を生成してbullets配列に追加します。弾の初期位置は、自機の中央から発射されるように設定されています。
具体的には、bullets.push({ x: ship.x + ship.width / 2 - 2.5, y: ship.y, width: 5, height: 10, dy: -5 });で新しい弾を生成しています。弾のx座標は、自機の中央から発射されるように、自機のx座標に自機の幅の半分を足して、その位置に弾の幅の半分を引いた値に設定します。弾のy座標は、自機のy座標と同じです。また、弾の幅と高さをそれぞれ5ピクセルと10ピクセルに設定し、上方向に移動する速度（dy）を-5に設定しています。
これで、自機を操作して弾を発射する準備が整いました。次に、弾の描画と移動について詳しく説明しますので、お楽しみに！
自機の操作
自機の移動は、キーボードイベントを利用して行います。左右の矢印キーで自機を左右に移動させます。
今回は自機の操作方法を学びましょう。シューティングゲームでは、自機を自由に動かせることが大切ですよね。これから、自機を左右の矢印キーで動かす方法を一緒に見ていきましょう。準備はいいですか？
まず、自機を動かすためには、JavaScriptのイベントリスナーを使います。イベントリスナーは、特定のイベントが発生したときに特定の関数を呼び出すためのものです。ここでは、キーボードのキーが押されたときと離されたときに、自機の動きを制御するための関数を呼び出します。以下のコードを見てください。
document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);
function keyDownHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight") {
ship.dx = 5;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
ship.dx = -5;
}
}
function keyUpHandler(e) {
if (e.key === "Right" || e.key === "ArrowRight" || e.key === "Left" || e.key === "ArrowLeft") {
ship.dx = 0;
}
}このコードでは、keydownイベントとkeyupイベントをリッスンしています。keydownイベントはキーが押されたときに発生し、keyupイベントはキーが離されたときに発生します。document.addEventListenerを使って、これらのイベントが発生したときにそれぞれkeyDownHandlerとkeyUpHandler関数を呼び出します。
keyDownHandler関数では、右矢印キーまたはRightキーが押されたときに自機が右に移動し、左矢印キーまたはLeftキーが押されたときに自機が左に移動するように設定しています。具体的には、ship.dxに移動速度を設定することで、自機の移動方向と速度を制御しています。右に移動する場合は正の値（ここでは5）、左に移動する場合は負の値（ここでは-5）を設定します。
keyUpHandler関数では、矢印キーが離されたときにship.dxを0に設定します。これにより、自機の移動が停止します。これらの設定により、自機がスムーズに左右に移動できるようになります。
次に、ゲームループの中で自機の位置を更新する処理を追加します。ship.xにship.dxを加算することで、自機の位置を更新します。また、自機がキャンバスの端を越えないようにするためのチェックも行います。以下のコードを見てください。
function updateShipPosition() {
ship.x += ship.dx;
if (ship.x < 0) ship.x = 0;
if (ship.x + ship.width > canvas.width) ship.x = canvas.width - ship.width;
}このコードでは、ship.xにship.dxを加算することで自機の位置を更新しています。さらに、自機がキャンバスの左端を越えないようにif (ship.x < 0) ship.x = 0;とし、右端を越えないようにif (ship.x + ship.width > canvas.width) ship.x = canvas.width - ship.width;というチェックを行っています。これにより、自機がキャンバス内に留まるように制御します。
これで、自機の操作方法が完成しました。キーボードの左右の矢印キーで自機をスムーズに動かすことができます。自機の操作がしっかりできると、ゲームがさらに楽しくなりますね！このステップをしっかり理解して、自分のゲームに応用してみましょう。
弾の発射
スペースキーで弾を発射し、弾が上方向に移動する処理を実装します。
今回は、自機から弾を発射する方法を学びましょう。シューティングゲームの醍醐味は、敵を倒すために弾を発射することですよね。ここでは、スペースキーを使って弾を発射し、それが上方向に移動するようにする方法を説明します。さあ、一緒に楽しく学んでいきましょう！
まず、弾を発射するためには、キーボードのスペースキーが押されたときに弾が生成されるようにします。これを実現するために、JavaScriptのイベントリスナーを使用します。イベントリスナーは、特定のイベントが発生したときに特定の関数を呼び出すためのものです。以下のコードを見てください。
document.addEventListener("keypress", keyPressHandler);
function keyPressHandler(e) {
if (e.key === " " || e.key === "Spacebar") {
bullets.push({ x: ship.x + ship.width / 2 - 2.5, y: ship.y, width: 5, height: 10, dy: -5 });
}
}このコードでは、keypressイベントをリッスンし、スペースキーが押されたときにkeyPressHandler関数を呼び出します。keyPressHandler関数では、新しい弾を生成してbullets配列に追加します。弾の初期位置は、自機の中央から発射されるように設定されています。
具体的には、bullets.push({ x: ship.x + ship.width / 2 - 2.5, y: ship.y, width: 5, height: 10, dy: -5 });で新しい弾を生成しています。弾のx座標は、自機の中央から発射されるように、自機のx座標に自機の幅の半分を足して、その位置に弾の幅の半分を引いた値に設定します。弾のy座標は、自機のy座標と同じです。また、弾の幅と高さをそれぞれ5ピクセルと10ピクセルに設定し、上方向に移動する速度（dy）を-5に設定しています。
これで、スペースキーを押すと弾が発射されるようになりました。次に、発射された弾が上方向に移動する処理を追加します。ゲームループ内で弾の位置を更新し、弾がキャンバスの外に出た場合に削除する処理を実装します。
弾の移動処理は次のようになります。
function drawBullets() {
ctx.fillStyle = "#FF0000";
bullets.forEach((bullet, index) => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
bullet.y += bullet.dy;
if (bullet.y < 0) {
bullets.splice(index, 1);
}
});
}このコードでは、drawBullets関数を使って弾を描画し、その位置を更新します。ctx.fillStyle = "#FF0000";で弾の色を赤に設定し、ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);で弾を描画します。弾のy座標をbullet.dyの値で更新し、上方向に移動させます。また、弾がキャンバスの上端を超えた場合、bullets配列からその弾を削除します。
これで、自機から発射された弾が上方向に移動するようになりました。ゲームのプレイ中に弾を発射して敵を倒すことで、ゲームがよりダイナミックで楽しいものになりますね！
弾の描画
発射された弾をキャンバスに描画し、移動させます。画面外に出た弾は削除されます。
今回は、自機から発射された弾をキャンバスに描画し、その弾が上方向に移動する方法を学びましょう。弾がしっかりと描画され、移動することで、ゲームがさらにリアルで面白くなりますよ。
まず、発射された弾をキャンバスに描画する方法について説明します。JavaScriptのfillRectメソッドを使って、弾をキャンバス上に描画します。弾の描画処理は、ゲームループの中で行われます。以下のコードを見てください。
function drawBullets() {
ctx.fillStyle = "#FF0000";
bullets.forEach((bullet, index) => {
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
bullet.y += bullet.dy;
if (bullet.y < 0) {
bullets.splice(index, 1);
}
});
}このコードでは、まずctx.fillStyle = "#FF0000";で弾の色を赤に設定しています。次に、bullets配列の中にあるすべての弾を描画するためにforEachメソッドを使用しています。それぞれの弾に対して、ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);を使って弾を描画します。bullet.xとbullet.yは弾の現在の位置を示し、bullet.widthとbullet.heightは弾のサイズを示します。
次に、弾が上方向に移動する処理を追加します。bullet.y += bullet.dy;で弾のy座標を更新し、弾が上に移動するようにします。bullet.dyは弾の移動速度を示しており、ここでは-5に設定されています。これにより、弾が毎フレーム5ピクセル上に移動します。
さらに、弾が画面外に出たかどうかをチェックし、画面外に出た弾を削除します。if (bullet.y < 0)で、弾がキャンバスの上端を超えた場合をチェックし、bullets.splice(index, 1);でその弾をbullets配列から削除します。これにより、不要な弾が配列に残らず、メモリリークを防ぐことができます。
このようにして、発射された弾がキャンバスに描画され、上方向に移動し、画面外に出た弾が適切に削除されるようになります。弾の描画と移動がうまくいくと、ゲームがさらに楽しくなりますね！このステップをしっかり理解して、自分のゲームに応用してみましょう。
ここで学んだことを活かして、弾を正確に描画し、動かすことで、ゲームのプレイ体験を向上させることができます。次のステップでは、さらにゲームの詳細なロジックについて学びますので、お楽しみに！
当たり判定とスコア管理
このセクションでは、ゲームの重要な要素である当たり判定とスコア管理について解説します。弾と敵機の衝突を検出し、スコアをリアルタイムで管理します。
みんな、こんにちは！今回は、シューティングゲームで欠かせない「当たり判定」と「スコア管理」について学びます。ゲームの面白さを引き立てるためには、敵機を撃ち落としたときに正確にスコアが計算されることが重要ですよね。さあ、一緒にこの重要な要素を実装していきましょう！
まずは、当たり判定から説明します。当たり判定とは、弾が敵機に当たったかどうかを検出する処理です。これを実現するために、弾と敵機の位置を比較して、重なっているかどうかをチェックします。以下のコードを見てください。
function detectCollisions() {
bullets.forEach((bullet, bulletIndex) => {
enemies.forEach((enemy, enemyIndex) => {
if (bullet.x < enemy.x + enemy.width &&
bullet.x + bullet.width > enemy.x &&
bullet.y < enemy.y + enemy.height &&
bullet.y + bullet.height > enemy.y) {
// 衝突が検出された場合、弾と敵機を削除
bullets.splice(bulletIndex, 1);
enemies.splice(enemyIndex, 1);
// スコアを加算
score += 100;
}
});
});
}このコードでは、detectCollisions関数が弾と敵機の衝突を検出します。bullets配列とenemies配列のすべての要素をループし、それぞれの弾と敵機の位置を比較しています。if文の条件は、弾と敵機の境界が重なっているかどうかをチェックします。もし重なっている場合、bullets配列とenemies配列から該当する弾と敵機を削除し、スコアを100点加算します。
次に、スコア管理について説明します。スコア管理は、ゲームの進行中にプレイヤーのスコアをリアルタイムで追跡するためのものです。スコアは敵機を撃ち落とすたびに増加し、画面に表示されます。以下のコードを見てください。
let score = 0;
function drawScore() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Score: " + score, 8, 20);
}このコードでは、score変数がプレイヤーのスコアを保持します。drawScore関数は、スコアをキャンバス上に描画します。ctx.fontでフォントを設定し、ctx.fillStyleでテキストの色を設定します。ctx.fillTextでスコアを指定した位置（ここではキャンバスの左上）に描画します。
ゲームループの中でdrawScore関数を呼び出すことで、スコアがリアルタイムで更新され、プレイヤーに表示されます。これにより、プレイヤーは自分のスコアを常に確認しながらゲームを楽しむことができます。
これで、当たり判定とスコア管理の基本的な実装が完了しました。弾が敵機に当たったときにスコアが加算されることで、ゲームがさらにエキサイティングになりますね！このステップをしっかり理解して、自分のゲームに応用してみましょう。
スコアの管理
敵機を撃破した際にスコアを増加させ、画面外に逃した際には減少させる処理を実装します。
シューティングゲームにおけるスコアの管理方法を学びましょう。スコアの管理はゲームの楽しさを増幅させる重要な要素です。敵機を撃破したときにスコアが増加し、敵機を逃してしまったときにはスコアが減少するようにすることで、プレイヤーにやりがいと緊張感を提供します。さあ、一緒に楽しく学びましょう！
まず、スコアを管理するための基本的な設定から始めます。ゲーム開始時にスコアを0に設定し、スコアを表示するための関数を作成します。以下のコードを見てください。
let score = 0;
function drawScore() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Score: " + score, 8, 20);
}このコードでは、まずscore変数を宣言し、初期値を0に設定します。次に、drawScore関数を定義し、スコアをキャンバスに表示します。ctx.fontでフォントを設定し、ctx.fillStyleでテキストの色を設定します。ctx.fillTextを使ってスコアを指定した位置（ここではキャンバスの左上）に描画します。
次に、敵機を撃破した際にスコアを増加させる処理を実装します。これは、弾と敵機の当たり判定が行われたときにスコアを加算することで実現します。以下のコードを見てください。
function detectCollisions() {
bullets.forEach((bullet, bulletIndex) => {
enemies.forEach((enemy, enemyIndex) => {
if (bullet.x < enemy.x + enemy.width &&
bullet.x + bullet.width > enemy.x &&
bullet.y < enemy.y + enemy.height &&
bullet.y + bullet.height > enemy.y) {
// 衝突が検出された場合、弾と敵機を削除
bullets.splice(bulletIndex, 1);
enemies.splice(enemyIndex, 1);
// スコアを加算
score += 100;
}
});
});
}このコードでは、detectCollisions関数が弾と敵機の衝突を検出します。衝突が検出された場合、弾と敵機をそれぞれの配列から削除し、スコアを100点加算します。これにより、敵機を撃破したときにスコアが増加します。
次に、敵機を逃した際にスコアを減少させる処理を追加します。これは、敵機が画面外に出たときにスコアを減少させることで実現します。以下のコードを見てください。
function updateEnemies() {
enemies.forEach((enemy, index) => {
enemy.y += enemy.dy;
if (enemy.y > canvas.height) {
enemies.splice(index, 1);
// スコアを減少
score -= 50;
}
});
}このコードでは、updateEnemies関数が敵機の位置を更新し、敵機が画面外に出たかどうかをチェックします。敵機が画面外に出た場合、enemies配列からその敵機を削除し、スコアを50点減少させます。これにより、敵機を逃したときにスコアが減少します。
これで、スコアの増加と減少の処理が完成しました。ゲーム中にスコアがリアルタイムで変動することで、プレイヤーは自分のパフォーマンスを確認しながらゲームを楽しむことができます。このステップをしっかり理解して、自分のゲームに応用してみましょう。
スコアの表示
現在のスコアを画面に表示します。スコアの増減がリアルタイムで反映されるようにします。
ここではゲーム中にプレイヤーのスコアを画面に表示する方法を学びましょう。スコアがリアルタイムで反映されると、ゲームの進行状況がわかりやすくなり、プレイヤーはもっと楽しめますよね。さあ、一緒に楽しく学びましょう！
まず、スコアを画面に表示するための基本的な設定から始めます。ゲーム開始時にスコアを0に設定し、スコアを表示するための関数を作成します。以下のコードを見てください。
let score = 0;
function drawScore() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Score: " + score, 8, 20);
}このコードでは、まずscore変数を宣言し、初期値を0に設定します。次に、drawScore関数を定義し、スコアをキャンバスに表示します。ctx.fontでフォントを設定し、ctx.fillStyleでテキストの色を設定します。ctx.fillTextを使ってスコアを指定した位置（ここではキャンバスの左上）に描画します。
次に、スコアの増減がリアルタイムで反映されるようにするために、ゲームループの中でdrawScore関数を呼び出します。これにより、スコアが更新されるたびに画面に反映されるようになります。以下のコードを見てください。
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// その他の描画や更新処理
drawScore();
requestAnimationFrame(gameLoop);
}このコードでは、gameLoop関数内でdrawScore関数を呼び出しています。ctx.clearRectでキャンバスをクリアし、その後にスコアを描画します。これにより、スコアがリアルタイムで更新され、プレイヤーが常に最新のスコアを確認できるようになります。
また、スコアの増減が適切に反映されるように、敵機を撃破した際にスコアを加算し、敵機を逃した際にスコアを減算する処理も実装しておきます。以下のコードを見てください。
function detectCollisions() {
bullets.forEach((bullet, bulletIndex) => {
enemies.forEach((enemy, enemyIndex) => {
if (bullet.x < enemy.x + enemy.width &&
bullet.x + bullet.width > enemy.x &&
bullet.y < enemy.y + enemy.height &&
bullet.y + bullet.height > enemy.y) {
bullets.splice(bulletIndex, 1);
enemies.splice(enemyIndex, 1);
score += 100;
}
});
});
}
function updateEnemies() {
enemies.forEach((enemy, index) => {
enemy.y += enemy.dy;
if (enemy.y > canvas.height) {
enemies.splice(index, 1);
score -= 50;
}
});
}このコードでは、detectCollisions関数が弾と敵機の衝突を検出し、衝突が検出された場合にスコアを100点加算します。updateEnemies関数では、敵機が画面外に出た場合にスコアを50点減算します。これにより、スコアの増減がリアルタイムで反映されます。
これで、スコアの表示とリアルタイム更新の基本的な実装が完了しました。ゲーム中にスコアがリアルタイムで反映されることで、プレイヤーは自分のパフォーマンスを確認しながらゲームを楽しむことができます。このステップをしっかり理解して、自分のゲームに応用してみましょう。
まとめ
この記事の最後に、シューティングゲーム開発のポイントを総括します。これまで学んだ内容を復習し、さらなる学習リソースを紹介します。ここまでシューティングゲーム開発の基礎を学んできました。自機の操作から敵機の生成、弾の発射と移動、当たり判定、そしてスコア管理まで、ゲームを作るための重要な要素を一つ一つ丁寧に説明してきましたね。これからは、これまで学んだ内容を振り返り、さらに自分のスキルを高めるためのリソースを紹介します。
まず、ゲーム開発の基本設定から振り返ります。HTML5のCanvasとJavaScriptを使って、ゲームのキャンバスを設定し、初期設定を行いました。Canvasは、ブラウザ上でグラフィックを描画するための強力なツールです。ゲームの基本設定をしっかり理解することで、ゲームの土台を作ることができました。
次に、自機の操作と弾の発射について学びました。キーボードの左右の矢印キーで自機を移動させ、スペースキーで弾を発射する方法を実装しました。JavaScriptのイベントリスナーを使って、キーボード入力をキャッチし、自機や弾の動きを制御しましたね。これにより、プレイヤーが自由に自機を操作し、敵機を撃ち落とす楽しみを提供することができました。
さらに、敵機の生成と移動、そして描画についても学びました。ランダムな位置に敵機を生成し、キャンバス上で動かすことで、ゲームの難易度を調整しました。敵機の動きを制御することで、ゲームのダイナミズムを生み出し、プレイヤーに挑戦を提供しました。
また、当たり判定とスコア管理についても詳しく説明しました。弾と敵機の衝突を検出し、スコアをリアルタイムで管理することで、ゲームの楽しさをさらに引き立てました。スコアが増減することで、プレイヤーは自分のパフォーマンスを確認しながらゲームを楽しむことができます。
ここで学んだ基本的な技術を応用して、さらに複雑な機能を追加していくことができます。たとえば、パワーアップアイテムを追加したり、異なる種類の敵機を登場させたりすることで、ゲームの深みを増すことができます。
これで、シューティングゲーム開発の基本的なポイントはすべてカバーしました。
追加リソースの紹介
さらに学習を進めたい方には、以下のリソースをおすすめします：
みんな、こんにちは！ここまでシューティングゲームの作り方を学んできましたが、もっと深く学びたいと思う人もいるでしょう。そこで、さらに学習を進めるための素晴らしいリソースを紹介します。これらのリソースを活用して、もっと高度な技術を身に付け、自分のゲームをさらに魅力的にしましょう。
1. Mozilla Developer Network (MDN) Web Docs
MDN Web Docsは、HTML5やJavaScript、Canvasに関する詳細なドキュメントやチュートリアルが揃っている素晴らしいリソースです。基礎から応用まで、幅広い情報が網羅されているため、初めて学ぶ人からプロフェッショナルまで役立つ情報が満載です。特にCanvas APIに関するセクションは、グラフィックやアニメーションの技術を深く理解するのに役立ちます。
- MDN Web Docs（英語サイト）
2. 書籍「JavaScriptゲーム開発入門: Phaserフレームワークの活用」
この書籍は、JavaScriptの基礎から実践的な応用までを丁寧に解説しているため、初心者から中級者まで幅広い読者にとって非常に有益です。特に、ゲーム開発に必要な基本的なスキルをしっかりと身につけることができます。HTML5とJavaScriptを使ったシューティングゲームの開発に役立つ内容が豊富に含まれており、具体的なサンプルコードを通じて理解を深めることができます。
 | JavaScriptゲーム開発入門: Phaserフレームワークの活用: JavaScriptを使ったゲーム開発の基本を学び、楽しいゲームを作ろう！ 新品価格 |
この本を活用して、さらにJavaScriptのスキルを向上させ、より高度なゲーム開発に挑戦してみましょう。これからも自分のアイデアを形にして、楽しいゲームを作り上げてくださいね！
3. オンラインコース「JavaScriptゲーム開発入門」
オンラインで学べるコースも非常に便利です。このコースでは、実践的なプロジェクトを通じてゲーム開発のスキルを磨くことができます。動画による解説とともに、ハンズオンの演習を通じて、実際にコードを書きながら学ぶことができるため、理解が深まります。特に、初心者がつまずきやすいポイントを丁寧に解説してくれるので、独学で学ぶよりも効率的にスキルアップが可能です。
4. ゲーム開発コミュニティ
コミュニティに参加することも大切です。同じ興味を持つ仲間と情報を共有し合うことで、新しいアイデアや技術を学ぶことができます。例えば、GitHubやStack Overflowなどのオンラインコミュニティに参加することで、実際のプロジェクトに取り組む開発者からのフィードバックを得ることができます。また、TwitterやDiscordなどのSNSを活用して、最新のトレンドや技術情報をキャッチアップするのも良いでしょう。
- GitHub（英語サイト）
- Stack Overflow（英語サイト）
5. オープンソースライブラリとフレームワーク
ゲーム開発をさらに加速させるためには、オープンソースのライブラリやフレームワークを活用するのもおすすめです。例えば、PhaserやPixiJSなどのJavaScriptライブラリは、2Dゲームの開発に非常に便利です。これらのライブラリを使うことで、基本的な機能を簡単に実装でき、より高度な機能に集中することができます。
これらのリソースを活用して、さらに学習を深め、自分のスキルを向上させましょう。みんなが自分のゲームを作り上げ、もっと楽しいゲーム開発の世界に飛び込んでいくことを楽しみにしています！次のステップに向けて、がんばってくださいね！
コメント