プログラミング初心者でも楽しく学べるシューティングゲーム作成シリーズの第2弾！今回は、自機を好みの画像に置き換える方法を解説します。前回作成したシンプルな自機を、オリジナルのかっこいいデザインに変更して、より魅力的なゲームに仕上げましょう。HTMLとJavaScriptを使ったゲーム開発のステップを一緒に進めながら、プログラミングスキルを楽しく身につけましょう！
HTMLとJavascriptで作ったシューティングゲーム Ver1.1だよ
今回は自分の機体を好みの画像に置き換えてみたよ^^
下のかっこいい青い機体が自機だよｂ
iframeで埋め込んでるから、ゲームを１回クリックしてアクティブにして
ね。クリックしないとスペースキーを押したとき画面がスクロールしちゃうから～♪
- →右矢印：機体を右に移動
- ←左矢印：期待を左に移動
- スペースキー：弾発射
- F5ボタン：最初からやり直し
シューティングゲームの基本設定
シューティングゲームの基本設定は、ゲームの土台を作り上げる重要なステップです。HTML、CSS、JavaScriptを組み合わせて、ゲームの基盤をしっかりと構築しましょう。このセクションでは、HTMLとCSSを使ってゲームの基本的な見た目を整え、JavaScriptを使ってゲームの動作を実装します。具体的には、キャンバスの設定、自機の初期位置とサイズの決定、ユーザー入力に応じた動作の設定を行います。HTMLではキャンバス要素を使ってゲームの描画領域を作り、CSSでそのスタイルを設定します。JavaScriptでは、キャンバスに描画するためのコンテキストを取得し、自機の動作や弾の発射、敵の生成と動きを制御するロジックを実装します。これにより、プレイヤーが矢印キーやスペースキーを使って自機を操作し、弾を発射して敵を倒す基本的なシューティングゲームが完成します。基本設定をしっかりと理解し実装することで、今後の拡張やカスタマイズが容易になります。さあ、シューティングゲームの基本設定を学びながら、プログラミングの楽しさを体感しましょう！
HTMLとCSSの設定
シューティングゲームの制作において、まず重要なのがHTMLとCSSの設定です。この設定により、ゲームの基本的な見た目と構造を作り上げることができます。今回のバージョン1.1では、ゲームキャンバスを中心に据え、プレイヤーが操作する自機を表示します。
HTMLの設定
HTMLでは、ゲームの描画領域としてキャンバスを定義します。以下はその基本的なコードです：
<canvas id="gameCanvas" width="480" height="600" style="border:1px solid #000000;"></canvas>このコードにより、幅480ピクセル、高さ600ピクセルのキャンバスが生成され、黒い境界線が表示されます。キャンバスは、ゲームの全てのグラフィックが描かれる場所です。
CSSの設定
次に、CSSを使ってページ全体のスタイルを整えます。以下のコードでは、キャンバスの背景色を淡い灰色に設定し、ページ全体のテキストを中央揃えにしています。
<style>
body { text-align: center; }
canvas { background-color: #f0f0f0; }
</style>このスタイルにより、ゲーム画面が見やすくなり、プレイヤーにとっての視認性が向上します。
全体の流れ
HTMLとCSSの設定が完了すると、次はJavaScriptを使ってゲームの動作を実装します。まずは、キャンバス要素を取得し、描画コンテキストを設定します。
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");ここで取得したctx（コンテキスト）は、キャンバス上に描画するためのメソッドやプロパティを提供します。これを使って、自機や弾、敵などのゲーム要素を描画していきます。
HTMLとCSSの設定は、シューティングゲーム制作の第一歩です。これにより、ゲームの基本的な見た目と構造が整い、次のステップであるJavaScriptを使った動作の実装がスムーズに進みます。HTMLでキャンバスを定義し、CSSでスタイルを整えることで、視覚的に見やすいゲーム画面を作成できます。
JavaScriptの初期設定
シューティングゲームを制作する際の最初のステップは、JavaScriptを用いた初期設定です。ここでは、ゲームの基本的な動作を実現するための設定を行います。この段階では、キャンバス要素の取得、自機の設定、キーボード入力の処理などを実装します。これにより、ゲームが正常に動作し、プレイヤーが自機を操作できるようになります。
まず、キャンバス要素と描画コンテキストを取得します。以下のコードでは、HTML内のキャンバス要素を取得し、2D描画用のコンテキストを設定しています。
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 shipDx = 0;自機の移動を制御するために、キーボード入力のイベントリスナーを追加します。これにより、プレイヤーが矢印キーを使用して自機を左右に移動させることができます。
document.addEventListener("keydown", (e) => {
if (e.key === "Right" || e.key === "ArrowRight") {
shipDx = 5;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
shipDx = -5;
}
});
document.addEventListener("keyup", (e) => {
if (e.key === "Right" || e.key === "ArrowRight" || e.key === "Left" || e.key === "ArrowLeft") {
shipDx = 0;
}
});次に、自機の位置を更新し、キャンバス上に描画します。この関数は、毎フレームごとに自機の位置を更新し、キャンバスを再描画します。
function drawShip() {
ctx.drawImage(shipImage, shipX, shipY, shipWidth, shipHeight);
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
shipX += shipDx;
if (shipX < 0) shipX = 0;
if (shipX + shipWidth > canvas.width) shipX = canvas.width - shipWidth;
drawShip();
requestAnimationFrame(update);
}
update();このようにして、JavaScriptの初期設定を行うことで、プレイヤーが自機を操作できる基本的なシューティングゲームが完成します。これらの設定をしっかりと行うことで、ゲームの土台がしっかりと築かれ、今後の機能追加や調整が容易になります。
自機の設定
シューティングゲームにおける自機の設定は、プレイヤーが操作するキャラクターの動作や見た目を定義する重要な部分です。このセクションでは、自機の画像を読み込み、キャンバスに描画する方法について説明します。また、自機の位置とサイズの設定、移動の制御についても解説します。これにより、ゲーム内でプレイヤーが自機を自由に操作できるようになります。
まず、自機の画像を読み込みます。この画像はオンラインから取得され、ゲーム内で表示される自機として使用されます。以下のコードでは、自機の画像を指定されたURLから読み込んでいます。
const shipImage = new Image();
shipImage.src = 'https://tokodomo.xyz/wp-content/uploads/2024/07/jiki.png';次に、自機の初期位置とサイズを設定します。自機の幅と高さを50ピクセルに設定し、キャンバスの中央下部に配置します。これにより、ゲーム開始時に自機が画面中央に表示されます。
const shipWidth = 50;
const shipHeight = 50;
let shipX = canvas.width / 2 - shipWidth / 2;
const shipY = canvas.height - shipHeight - 10;
let shipDx = 0;自機の移動を制御するために、キーボード入力のイベントリスナーを追加します。プレイヤーが矢印キーを押すと、自機が左右に移動するように設定します。
document.addEventListener("keydown", (e) => {
if (e.key === "Right" || e.key === "ArrowRight") {
shipDx = 5;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
shipDx = -5;
}
});
document.addEventListener("keyup", (e) => {
if (e.key === "Right" || e.key === "ArrowRight" || e.key === "Left" || e.key === "ArrowLeft") {
shipDx = 0;
}
});自機の位置を更新し、キャンバス上に描画します。自機がキャンバスの端に到達した場合、キャンバスの外に出ないように制御します。
function drawShip() {
ctx.drawImage(shipImage, shipX, shipY, shipWidth, shipHeight);
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
shipX += shipDx;
if (shipX < 0) shipX = 0;
if (shipX + shipWidth > canvas.width) shipX = canvas.width - shipWidth;
drawShip();
requestAnimationFrame(update);
}
update();この設定により、自機が画面上に表示され、プレイヤーの入力に応じて左右に移動することができます。これがシューティングゲームの基本的な自機設定の手順です。
自機を画像に置き換える方法
シューティングゲームの自機をデフォルトのブロックから魅力的な画像に置き換えることで、ゲームのビジュアルを大幅に向上させることができます。この記事では、shootinggame_ver1.1.htmlのコードを使用して、自機を画像に置き換える方法を詳しく解説します。
まず、使用する画像を選定し、オンラインにアップロードします。ここでは、以下のURLの画像を使用します：
https://tokodomo.xyz/wp-content/uploads/2024/07/jiki.png次に、JavaScriptでこの画像を読み込みます。以下のコードを使用して画像を読み込み、ゲームに使用します。
const shipImage = new Image();
shipImage.src = 'https://tokodomo.xyz/wp-content/uploads/2024/07/jiki.png';画像が読み込まれたら、自機の位置とサイズを設定します。以下のコードでは、自機の幅を50ピクセル、高さを50ピクセルに設定し、キャンバスの中央下部に配置します。
const shipWidth = 50;
const shipHeight = 50;
let shipX = canvas.width / 2 - shipWidth / 2;
const shipY = canvas.height - shipHeight - 10;
let shipDx = 0;次に、自機をキャンバス上に描画するための関数を定義します。以下のコードを使用して、自機の画像をキャンバスに描画します。
function drawShip() {
ctx.drawImage(shipImage, shipX, shipY, shipWidth, shipHeight);
}自機がユーザーの入力に応じて移動できるようにするために、キーボード入力のイベントリスナーを設定します。以下のコードを使用して、矢印キーで自機を左右に移動させます。
document.addEventListener("keydown", (e) => {
if (e.key === "Right" || e.key === "ArrowRight") {
shipDx = 5;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
shipDx = -5;
}
});
document.addEventListener("keyup", (e) => {
if (e.key === "Right" || e.key === "ArrowRight" || e.key === "Left" || e.key === "ArrowLeft") {
shipDx = 0;
}
});最後に、自機の位置を更新し、キャンバス上に描画する関数を定義します。この関数は、毎フレームごとに自機の位置を更新し、キャンバスを再描画します。
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
shipX += shipDx;
if (shipX < 0) shipX = 0;
if (shipX + shipWidth > canvas.width) shipX = canvas.width - shipWidth;
drawShip();
requestAnimationFrame(update);
}
update();この設定により、ゲーム内で自機が画像として表示され、ユーザーの入力に応じて左右に移動することができます。自機を画像に置き換えることで、ゲームのビジュアルが大幅に向上し、より魅力的なゲーム体験を提供することができます。
画像の読み込みと設定
シューティングゲームの開発において、画像の読み込みと設定は重要なステップです。このプロセスにより、ゲーム内の視覚要素が正しく表示され、プレイヤーが自機を操作できるようになります。この記事では、shootinggame_ver1.1.htmlのコードを使用して、画像の読み込みと設定方法について詳しく解説します。
まず、画像を読み込むために、JavaScriptのImageオブジェクトを使用します。以下のコードは、自機の画像を指定されたURLから読み込む例です。
const shipImage = new Image();
shipImage.src = 'https://tokodomo.xyz/wp-content/uploads/2024/07/jiki.png';このコードにより、shipImageオブジェクトが作成され、指定されたURLから画像が読み込まれます。画像の読み込みが完了すると、shipImageオブジェクトは、キャンバス上に描画するための準備が整います。
次に、画像のサイズと位置を設定します。自機の幅と高さをそれぞれ50ピクセルに設定し、キャンバスの中央下部に配置します。
const shipWidth = 50;
const shipHeight = 50;
let shipX = canvas.width / 2 - shipWidth / 2;
const shipY = canvas.height - shipHeight - 10;
let shipDx = 0;これにより、ゲーム開始時に自機がキャンバスの中央下部に表示され、適切なサイズで描画されます。次に、画像をキャンバス上に描画するための関数を定義します。
function drawShip() {
ctx.drawImage(shipImage, shipX, shipY, shipWidth, shipHeight);
}この関数は、ctx.drawImageメソッドを使用して、指定された位置とサイズで画像をキャンバス上に描画します。これにより、プレイヤーが自機を視覚的に確認できるようになります。
さらに、自機がプレイヤーの入力に応じて移動できるようにするために、キーボード入力のイベントリスナーを設定します。以下のコードでは、矢印キーを使用して自機を左右に移動させます。
document.addEventListener("keydown", (e) => {
if (e.key === "Right" || e.key === "ArrowRight") {
shipDx = 5;
} else if (e.key === "Left" || e.key === "ArrowLeft") {
shipDx = -5;
}
});
document.addEventListener("keyup", (e) => {
if (e.key === "Right" || e.key === "ArrowRight" || e.key === "Left" || e.key === "ArrowLeft") {
shipDx = 0;
}
});最後に、画像の位置を更新し、キャンバス上に再描画する関数を定義します。この関数は、毎フレームごとに自機の位置を更新し、キャンバスを再描画します。
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
shipX += shipDx;
if (shipX < 0) shipX = 0;
if (shipX + shipWidth > canvas.width) shipX = canvas.width - shipWidth;
drawShip();
requestAnimationFrame(update);
}
update();この設定により、ゲーム内で自機が画像として表示され、プレイヤーの入力に応じて左右に移動することができます。これが画像の読み込みと設定の基本的な手順です。
画像の描画
シューティングゲームにおける画像の描画は、プレイヤーの視覚的な体験を豊かにするための重要なステップです。このセクションでは、shootinggame_ver1.1.htmlのコードを使用して、画像をキャンバス上に描画する方法について詳しく説明します。具体的には、JavaScriptを使用して自機の画像をキャンバスに表示し、ユーザーの入力に応じて動作させる方法を解説します。
まず、画像をキャンバスに描画するためには、事前に読み込んだ画像オブジェクトを使用します。以下のコードでは、キャンバスの描画コンテキストを取得し、画像を指定された位置とサイズで描画します。
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 shipDx = 0;次に、画像を描画する関数を定義します。この関数では、drawImageメソッドを使用して、キャンバス上に画像を描画します。
function drawShip() {
ctx.drawImage(shipImage, shipX, shipY, shipWidth, shipHeight);
}このdrawShip関数は、自機の画像をキャンバス上の指定された位置に描画します。drawImageメソッドは、画像オブジェクト、X座標、Y座標、幅、高さを引数に取ります。この設定により、自機が正しい位置とサイズで表示されます。
次に、画像を動的に更新し、キャンバスを再描画するためのupdate関数を定義します。この関数は、毎フレームごとにキャンバスをクリアし、自機の位置を更新して再描画します。
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
shipX += shipDx;
if (shipX < 0) shipX = 0;
if (shipX + shipWidth > canvas.width) shipX = canvas.width - shipWidth;
drawShip();
requestAnimationFrame(update);
}
update();このupdate関数では、clearRectメソッドを使用してキャンバスをクリアし、shipXの値を更新して自機の位置を変更します。キャンバスの境界を超えないようにするために、shipXの値が0未満またはキャンバスの幅を超えた場合に調整します。その後、drawShip関数を呼び出して自機を描画し、requestAnimationFrameメソッドを使用して次のフレームをリクエストします。
このようにして、自機の画像をキャンバスに描画し、プレイヤーの入力に応じて動作させることができます。これにより、シューティングゲームの視覚的な要素が向上し、より魅力的なゲーム体験を提供することができます。
弾と敵の設定
シューティングゲームの魅力は、プレイヤーが弾を発射して敵を倒すアクションにあります。このセクションでは、shootinggame_ver1.1.htmlのコードを使用して、弾と敵の設定方法について詳しく説明します。弾の生成と動作、敵の生成と動作、およびそれらの当たり判定について順を追って解説します。
まず、弾を生成し、キャンバス上で動作させるための設定を行います。以下のコードでは、スペースバーが押されたときに弾を生成し、弾の位置と動作を定義します。
let bullets = [];
document.addEventListener("keypress", keyPressHandler);
function keyPressHandler(e) {
if (e.key === " " || e.key === "Spacebar") {
bullets.push({ x: shipX + shipWidth / 2 - 2.5, y: shipY, width: 5, height: 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);
}
});
}敵の生成と動作についても設定します。敵はランダムな位置から生成され、一定の速度で画面下方向に移動します。以下のコードは、敵を生成し、その動作を定義します。
let enemies = [];
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 drawEnemies() {
ctx.fillStyle = "#00FF00";
enemies.forEach((enemy, index) => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
enemy.y += enemy.dy;
if (enemy.y > canvas.height) {
enemies.splice(index, 1);
}
});
}最後に、弾と敵の当たり判定を実装します。以下のコードは、弾が敵に当たった場合に両方を削除し、スコアを更新するロジックを含んでいます。
let score = 0;
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++;
}
});
});
}これらの設定により、弾と敵の生成、動作、および当たり判定が実現されます。プレイヤーはスペースバーを押して弾を発射し、敵を倒すことでスコアを稼ぐことができるようになります。
弾の設定と描画
シューティングゲームにおいて、弾の設定と描画はプレイヤーが敵を倒すための基本的な機能です。このセクションでは、shootinggame_ver1.1.htmlのコードを使用して、弾の設定と描画方法について詳しく説明します。弾の生成、描画、およびキャンバス上での動作を実現するための手順を順を追って解説します。
まず、プレイヤーがスペースバーを押すと弾を生成するためのイベントリスナーを追加します。以下のコードでは、スペースバーが押されたときに弾のオブジェクトを生成し、弾の位置と速度を設定します。
let bullets = [];
document.addEventListener("keypress", keyPressHandler);
function keyPressHandler(e) {
if (e.key === " " || e.key === "Spacebar") {
bullets.push({ x: shipX + shipWidth / 2 - 2.5, y: shipY, width: 5, height: 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関数は、キャンバス上に弾を描画し、弾が移動するたびにその位置を更新します。弾がキャンバスの上端に達した場合、弾を削除することでメモリの無駄な消費を防ぎます。
弾の生成と描画を実現するためには、ゲームのメインループにdrawBullets関数を追加する必要があります。以下のコードは、キャンバスをクリアし、自機と弾を描画し、弾の位置を更新するメインループの一部です。
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
shipX += shipDx;
if (shipX < 0) shipX = 0;
if (shipX + shipWidth > canvas.width) shipX = canvas.width - shipWidth;
drawShip();
drawBullets();
createEnemies();
drawEnemies();
detectCollisions();
requestAnimationFrame(update);
}
update();このupdate関数では、キャンバスをクリアし、自機と弾、敵を描画し、それぞれの位置を更新します。requestAnimationFrameを使用して、スムーズなアニメーションを実現しています。
これらの設定により、プレイヤーはスペースバーを押して弾を発射し、弾がキャンバス上を移動する様子を視覚的に確認することができます。弾の設定と描画は、シューティングゲームにおける基本的な機能の一部であり、プレイヤーにとって重要な操作要素となります。
敵の設定と描画
シューティングゲームにおいて、敵の設定と描画はゲームの難易度と楽しさを大きく左右する要素です。この記事では、shootinggame_ver1.1.htmlのコードを使用して、敵の生成、描画、および動作を設定する方法について詳しく解説します。
まず、敵を生成するための関数を定義します。敵はランダムな位置から生成され、一定の速度で画面下方向に移動します。以下のコードは、敵のオブジェクトを生成し、敵の位置と速度を設定しています。
let enemies = [];
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 drawEnemies() {
ctx.fillStyle = "#00FF00";
enemies.forEach((enemy, index) => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
enemy.y += enemy.dy;
if (enemy.y > canvas.height) {
enemies.splice(index, 1);
}
});
}このdrawEnemies関数では、キャンバス上に敵を描画し、敵が移動するたびにその位置を更新します。敵がキャンバスの下端に達した場合、敵を削除することでメモリの無駄な消費を防ぎます。
また、敵が生成される頻度や速度を調整することで、ゲームの難易度を変えることができます。例えば、敵の生成確率を増やしたり、敵の移動速度を速くすることで、ゲームがより難しくなります。
最後に、敵の生成と描画をゲームのメインループに組み込みます。以下のコードは、update関数の中でcreateEnemiesとdrawEnemies関数を呼び出し、敵の生成と描画を毎フレームごとに実行するようにしています。
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
shipX += shipDx;
if (shipX < 0) shipX = 0;
if (shipX + shipWidth > canvas.width) shipX = canvas.width - shipWidth;
drawShip();
drawBullets();
createEnemies();
drawEnemies();
detectCollisions();
requestAnimationFrame(update);
}
update();このupdate関数では、キャンバスをクリアし、自機、弾、敵を描画し、それぞれの位置を更新します。requestAnimationFrameを使用して、スムーズなアニメーションを実現しています。
当たり判定の実装
シューティングゲームにおいて、当たり判定の実装は非常に重要な要素です。これにより、弾が敵に当たったときの反応や、敵が自機に接触したときのダメージ処理が可能になります。この記事では、shootinggame_ver1.1.htmlのコードを使用して、当たり判定の実装方法について詳しく解説します。
まず、当たり判定を行うためには、弾と敵の位置を比較する必要があります。以下のコードでは、弾が敵に当たった場合、弾と敵の両方を削除し、スコアを更新するロジックを実装しています。
let score = 0;
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++;
}
});
});
}このコードでは、弾と敵の位置を比較して、重なっている場合にそれぞれの配列から削除します。弾が敵に当たるとスコアが1点増加します。spliceメソッドを使用して、配列から該当する弾と敵を削除します。
次に、この当たり判定の関数をゲームのメインループに組み込みます。以下のコードは、update関数の中でdetectCollisions関数を呼び出し、弾と敵の当たり判定を毎フレームごとに実行するようにしています。
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
shipX += shipDx;
if (shipX < 0) shipX = 0;
if (shipX + shipWidth > canvas.width) shipX = canvas.width - shipWidth;
drawShip();
drawBullets();
drawEnemies();
createEnemies();
detectCollisions();
requestAnimationFrame(update);
}
update();このupdate関数では、キャンバスをクリアし、自機、弾、敵を描画し、弾と敵の当たり判定を行います。requestAnimationFrameメソッドを使用して、スムーズなアニメーションを実現しています。
また、ゲームの状態をリセットするために、スコアのリセットや敵と弾のリストをクリアする機能も実装できます。これにより、ゲームオーバー時や再スタート時にゲームの状態を初期化することが可能になります。
このようにして、当たり判定の実装により、シューティングゲームにおけるインタラクティブな要素が実現され、プレイヤーが敵を倒すことでゲームが進行する仕組みが整います。
ゲームの拡張
ここからは、今後実装したい機能さ、希望いっぱいさ。
シューティングゲームの基本的な要素が完成したら、次はゲームを拡張してより魅力的な体験を提供するためのアイデアを考えてみましょう。拡張には、新しい機能の追加、ゲームの難易度調整、ビジュアルやサウンドの改善などが含まれます。ここでは、shootinggame_ver1.1.htmlのコードに基づいて、いくつかの具体的な拡張方法を提案します。
まず、ゲームの難易度を調整するために、敵の種類や動作パターンを増やすことが考えられます。現在のコードでは、敵は一種類の四角形で、一定の速度でまっすぐ下に移動します。これを変更して、例えば、速さや大きさが異なる敵、ジグザグに動く敵、弾を発射する敵などを追加することで、プレイヤーに多様な挑戦を提供できます。
次に、パワーアップアイテムの追加です。プレイヤーが特定の敵を倒すとアイテムがドロップし、それを取得することで自機の性能が一時的に向上します。例えば、連射速度が上がる、弾の威力が増す、シールドが張られるなどの効果を持つアイテムを実装すると、ゲームプレイがより戦略的になります。
ビジュアル面では、背景画像やエフェクトを追加することで、ゲームの見た目を一段と魅力的にすることができます。現在の背景は単色のグレーですが、星空や宇宙船の内部など、ゲームのテーマに合った背景画像を使用することで、臨場感が増します。また、敵を倒したときや自機がダメージを受けたときにエフェクトを追加することで、視覚的なフィードバックを強化できます。
サウンドの追加も忘れてはいけません。シューティングゲームでは、弾の発射音、敵が爆発する音、背景音楽などがゲームの雰囲気を大いに盛り上げます。適切なサウンドエフェクトを導入することで、プレイヤーの没入感を高めることができます。
さらに、スコアやライフの表示を工夫することも重要です。現在のコードではスコアのみが実装されていますが、画面上部にスコアや残りライフを表示することで、プレイヤーは自身の状況を把握しやすくなります。特定のスコアに到達したらボーナスライフを得られるなど、スコアに基づいた報酬システムを追加するのも良いでしょう。
これらの拡張を通じて、シューティングゲームはより多彩で奥深いものになります。プレイヤーに新たな挑戦と楽しさを提供するために、ぜひこれらのアイデアを試してみてください。
スコア表示の実装
シューティングゲームにおいて、スコア表示の実装はプレイヤーに達成感を提供し、ゲームのモチベーションを高めるための重要な要素です。この記事では、shootinggame_ver1.1.htmlのコードを使用して、スコア表示の実装方法について詳しく解説します。具体的には、スコアの更新と表示、ゲームのメインループにおけるスコアの描画方法を説明します。
まず、スコアを保持するための変数を定義します。以下のコードでは、スコアを0に初期化し、弾が敵に当たるたびに1点ずつ加算されるように設定します。
let score = 0;次に、スコアを画面上に表示するための関数を定義します。この関数では、fillTextメソッドを使用して、キャンバス上にスコアを描画します。
function drawScore() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Score: " + score, 8, 20);
}このdrawScore関数では、フォントスタイルと色を設定し、キャンバスの左上隅にスコアを表示します。スコアの位置やスタイルは、好みに応じて調整できます。
次に、弾と敵の当たり判定を行う関数detectCollisions内でスコアを更新します。以下のコードでは、弾が敵に当たるとスコアが1点加算されます。
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++;
}
});
});
}このコードにより、弾が敵に当たるたびにスコアが1点加算され、敵と弾はそれぞれの配列から削除されます。
最後に、ゲームのメインループにdrawScore関数を追加し、毎フレームごとにスコアを更新して表示します。以下のコードは、update関数の中でdrawScore関数を呼び出し、スコアを画面上に描画するようにしています。
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
shipX += shipDx;
if (shipX < 0) shipX = 0;
if (shipX + shipWidth > canvas.width) shipX = canvas.width - shipWidth;
drawShip();
drawBullets();
createEnemies();
drawEnemies();
detectCollisions();
drawScore();
requestAnimationFrame(update);
}
update();このupdate関数では、キャンバスをクリアし、自機、弾、敵を描画し、それぞれの位置を更新し、スコアを表示します。requestAnimationFrameメソッドを使用して、スムーズなアニメーションを実現しています。
これにより、プレイヤーはゲーム中に現在のスコアをリアルタイムで確認でき、達成感を感じながらプレイすることができます。スコア表示の実装は、シューティングゲームにおいて非常に重要な要素の一つです。
レベルデザインの基本
シューティングゲームのレベルデザインは、プレイヤーの体験を豊かにし、ゲームのリプレイ性を高めるための重要な要素です。この記事では、shootinggame_ver1.1.htmlのコードを使用して、基本的なレベルデザインの手法について説明します。レベルデザインの基本は、ゲームの難易度調整、敵の配置、パワーアップアイテムの導入など、多岐にわたります。
まず、ゲームの難易度を調整する方法として、敵の出現頻度と移動速度を変えることが考えられます。以下のコードでは、ゲームの進行に応じて敵の出現頻度を増やし、移動速度を速くすることで、徐々に難易度が上がるように設定します。
let level = 1;
let enemySpeed = 2;
function createEnemies() {
if (Math.random() < 0.02 + (level * 0.01)) {
let enemyX = Math.random() * (canvas.width - 30);
enemies.push({ x: enemyX, y: 0, width: 30, height: 30, dy: enemySpeed });
}
}
function levelUp() {
level++;
enemySpeed += 0.5;
}このコードでは、レベルが上がるごとに敵の出現頻度と移動速度が増加します。これにより、プレイヤーはゲームが進むにつれて新たな挑戦を感じることができます。
次に、敵の配置を工夫することで、プレイヤーに多様な戦略を求めることができます。例えば、敵が特定のパターンで出現するように設定することで、プレイヤーはそのパターンを覚えて対処する楽しさを味わえます。
また、パワーアップアイテムの導入も効果的です。パワーアップアイテムを取得すると、一時的に自機の攻撃力が上がったり、シールドが張られたりすることで、プレイヤーに有利な状況を提供できます。以下のコードは、パワーアップアイテムをランダムに出現させる方法の一例です。
let powerUps = [];
function createPowerUps() {
if (Math.random() < 0.01) {
let powerUpX = Math.random() * (canvas.width - 20);
powerUps.push({ x: powerUpX, y: 0, width: 20, height: 20, dy: 1 });
}
}
function drawPowerUps() {
ctx.fillStyle = "#FFD700";
powerUps.forEach((powerUp, index) => {
ctx.fillRect(powerUp.x, powerUp.y, powerUp.width, powerUp.height);
powerUp.y += powerUp.dy;
if (powerUp.y > canvas.height) {
powerUps.splice(index, 1);
}
});
}このコードでは、パワーアップアイテムがランダムな位置からゆっくりと落ちてきます。プレイヤーがこれを取得することで、一時的にゲームの進行を有利にすることができます。
レベルデザインの基本を理解し、これらの要素を組み合わせることで、シューティングゲームは単調にならず、プレイヤーに新たな挑戦と楽しさを提供することができます。ゲームの難易度調整、敵の配置、パワーアップアイテムの導入を工夫して、魅力的なゲーム体験を設計しましょう。
ゲームオーバーとリスタート
シューティングゲームにおいて、ゲームオーバーとリスタートの実装は、プレイヤーに一貫したゲーム体験を提供するために欠かせない要素です。この記事では、shootinggame_ver1.1.htmlのコードを使用して、ゲームオーバーとリスタートの設定方法について詳しく解説します。
まず、ゲームオーバーの条件を設定します。一般的には、自機が敵に当たった場合や、敵が一定数画面下に到達した場合などが考えられます。以下のコードでは、自機が敵に当たった場合にゲームオーバーとなる例を示します。
let gameOver = false;
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++;
}
});
});
enemies.forEach((enemy) => {
if (
ship.x < enemy.x + enemy.width &&
ship.x + ship.width > enemy.x &&
ship.y < enemy.y + enemy.height &&
ship.y + ship.height > enemy.y
) {
gameOver = true;
}
});
}このコードでは、敵が自機に当たるとgameOverフラグがtrueに設定され、ゲームオーバーとなります。
次に、ゲームオーバー時の画面表示とリスタートの設定を行います。ゲームオーバー時に「Game Over」のメッセージを表示し、リスタートのためのイベントリスナーを追加します。
function drawGameOver() {
ctx.font = "48px Arial";
ctx.fillStyle = "#FF0000";
ctx.fillText("Game Over", canvas.width / 2 - 150, canvas.height / 2);
}
function checkGameOver() {
if (gameOver) {
drawGameOver();
document.removeEventListener("keydown", keyDownHandler);
document.removeEventListener("keyup", keyUpHandler);
document.removeEventListener("keypress", keyPressHandler);
canvas.addEventListener("click", restartGame);
}
}
function restartGame() {
gameOver = false;
score = 0;
bullets = [];
enemies = [];
ship.x = canvas.width / 2 - ship.width / 2;
canvas.removeEventListener("click", restartGame);
document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);
document.addEventListener("keypress", keyPressHandler);
update();
}このコードでは、gameOverがtrueの場合に「Game Over」のメッセージを表示し、クリックイベントリスナーを追加してリスタートを可能にします。リスタート時には、ゲームの状態を初期化し、イベントリスナーを再度有効にします。
最後に、ゲームのメインループにゲームオーバーのチェックを組み込みます。以下のコードは、update関数の中でcheckGameOver関数を呼び出し、ゲームオーバー状態を確認します。
function update() {
if (gameOver) {
checkGameOver();
return;
}
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();
createEnemies();
drawEnemies();
detectCollisions();
drawScore();
requestAnimationFrame(update);
}
update();このupdate関数では、gameOverフラグがtrueの場合にcheckGameOver関数を呼び出し、ゲームオーバーの状態を処理します。
これにより、シューティングゲームにおけるゲームオーバーとリスタートの機能が実現され、プレイヤーはゲームの終わりと再挑戦をスムーズに行うことができます。
さらなる学びへのステップ
シューティングゲームVer1.1の実装が完了し、基礎的なゲーム制作の知識を習得した今、次に進むべきステップを考えてみましょう。この段階では、より高度な技術を学び、ゲームのクオリティを向上させるための方法を探ることが重要です。ここでは、さらなる学びへのステップとして、いくつかの方向性を提案します。
まず、JavaScriptのフレームワークやライブラリの活用を検討してみましょう。例えば、Phaser、PIXI.js、Three.jsなどの強力なライブラリを使用することで、より複雑で高機能なゲームを開発することができます。これらのライブラリは、グラフィックスの描画やアニメーション、物理エンジンなど、多くの便利な機能を提供しており、独自の機能を一から実装する手間を省くことができます。
次に、ゲームのビジュアルとサウンドを強化する方法を学びましょう。高品質な画像やエフェクト、BGMや効果音を導入することで、ゲームの没入感が大幅に向上します。オープンソースのアセットやサウンドライブラリを活用するか、自分で作成することを試みてください。また、アニメーションの技術を学び、キャラクターや背景が動くことでゲームに生命を吹き込むことができます。
さらに、ゲームのパフォーマンス最適化にも挑戦しましょう。大規模なゲームでは、描画の最適化やメモリ管理、フレームレートの安定化が重要な課題となります。デベロッパーツールを使用してパフォーマンスのボトルネックを特定し、効率的なコードを書く方法を学ぶことが求められます。
また、ゲームのマルチプラットフォーム対応を考慮することも重要です。現代のゲームは、PCだけでなく、スマートフォンやタブレットなど、様々なデバイスでプレイされることを前提としています。レスポンシブデザインを採用し、画面サイズや入力方法に応じて適切に対応する方法を学びましょう。
最後に、コミュニティへの参加をおすすめします。GitHubやStack Overflowなどのプラットフォームで他の開発者と交流し、フィードバックをもらうことで、自分のスキルをさらに高めることができます。また、オープンソースプロジェクトに貢献することで、実際のプロジェクトでの経験を積むことも可能です。
これらのステップを踏むことで、あなたのゲーム開発スキルは飛躍的に向上するでしょう。学び続けることで、より魅力的で高品質なゲームを作り出すことができるようになります。次のステップに進み、さらなる挑戦を楽しんでください。
他のゲーム要素の追加
シューティングゲームの基本的な要素が完成したら、次に進むべきは他のゲーム要素を追加して、ゲームプレイをさらに豊かで魅力的なものにすることです。この記事では、shootinggame_ver1.1.htmlのコードを基に、他のゲーム要素を追加する方法について詳しく解説します。これには、パワーアップアイテム、ボス戦、ステージクリア条件などの導入が含まれます。
まず、パワーアップアイテムの追加です。プレイヤーが特定の敵を倒すとアイテムがドロップし、それを取得することで自機の性能が一時的に向上します。以下のコードは、パワーアップアイテムをランダムに生成し、取得した際に弾の威力が増す例を示します。
let powerUps = [];
function createPowerUps() {
if (Math.random() < 0.01) {
let powerUpX = Math.random() * (canvas.width - 20);
powerUps.push({ x: powerUpX, y: 0, width: 20, height: 20, dy: 1 });
}
}
function drawPowerUps() {
ctx.fillStyle = "#FFD700";
powerUps.forEach((powerUp, index) => {
ctx.fillRect(powerUp.x, powerUp.y, powerUp.width, powerUp.height);
powerUp.y += powerUp.dy;
if (powerUp.y > canvas.height) {
powerUps.splice(index, 1);
}
});
}
function checkPowerUpCollision() {
powerUps.forEach((powerUp, index) => {
if (
ship.x < powerUp.x + powerUp.width &&
ship.x + ship.width > powerUp.x &&
ship.y < powerUp.y + powerUp.height &&
ship.y + ship.height > powerUp.y
) {
powerUps.splice(index, 1);
// パワーアップ効果を適用
bullets.forEach(bullet => bullet.dy *= 2);
}
});
}次に、ボス戦の追加です。ステージの最後に強力なボスを登場させることで、プレイヤーに大きな挑戦を提供します。以下のコードは、特定の条件を満たしたときにボスを生成し、その行動パターンを設定する例です。
let boss = null;
function createBoss() {
if (score > 50 && !boss) {
boss = { x: canvas.width / 2 - 50, y: 0, width: 100, height: 100, dy: 1 };
}
}
function drawBoss() {
if (boss) {
ctx.fillStyle = "#FF0000";
ctx.fillRect(boss.x, boss.y, boss.width, boss.height);
boss.y += boss.dy;
if (boss.y > canvas.height) {
boss = null;
score -= 10; // ボスが逃げた場合のペナルティ
}
}
}さらに、ステージクリア条件の設定も重要です。プレイヤーが一定のスコアに達したり、ボスを倒したりした場合に次のステージに進むようにします。これにより、ゲームの目標が明確になり、達成感が得られます。
function checkStageClear() {
if (score >= 100) {
// 次のステージに進む処理
alert("Stage Clear!");
score = 0;
levelUp();
}
}これらの要素を追加することで、シューティングゲームはより多彩で奥深いものになります。プレイヤーに新たな挑戦と楽しさを提供するために、これらのアイデアを試してみてください。
ライブラリやフレームワークの利用
シューティングゲームをさらに進化させるためには、JavaScriptのライブラリやフレームワークを活用することが非常に有効です。これらのツールは、複雑な機能を簡単に実装できるようにし、開発効率を大幅に向上させます。この記事では、shootinggame_ver1.1.htmlのコードを基に、代表的なライブラリやフレームワークの利用方法について詳しく解説します。
まず、Phaserについて紹介します。Phaserは、2Dゲーム開発に特化した強力なフレームワークで、豊富な機能を提供しています。例えば、スプライトの管理、アニメーション、物理エンジン、音声の処理など、多くの機能を簡単に利用することができます。以下のコードは、Phaserを使用して基本的なゲームシーンを作成する例です。
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
update: update
}
};
const game = new Phaser.Game(config);
function preload() {
this.load.image('ship', 'https://tokodomo.xyz/wp-content/uploads/2024/07/jiki.png');
}
function create() {
this.ship = this.add.image(400, 300, 'ship');
}
function update() {
// ゲームの更新ロジック
}このコードでは、Phaserの基本的なゲーム構成を示しています。preload関数で画像を読み込み、create関数でスプライトを作成します。update関数では、ゲームの更新ロジックを実装します。Phaserを使用することで、これまで手動で実装していた多くの機能を簡潔に実装できます。
次に、Three.jsを使用して3D要素を追加する方法を紹介します。Three.jsは、WebGLを利用した強力な3Dライブラリで、リアルな3Dグラフィックスを簡単に実装できます。以下のコードは、Three.jsを使用してシンプルな3Dシーンを作成する例です。
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();このコードでは、Three.jsを使用して基本的な3Dオブジェクト（立方体）を作成し、回転させています。Three.jsを使用することで、2Dゲームに3D要素を追加し、視覚的なインパクトを高めることができます。
これらのライブラリやフレームワークを活用することで、ゲーム開発の効率と品質を大幅に向上させることができます。それぞれのツールの特性を理解し、適切に選択して使用することで、より魅力的で複雑なゲームを作成できるようになります。
オンラインでの学びのリソース
シューティングゲームの開発を進める中で、オンラインの学びのリソースを活用することは非常に重要です。インターネット上には、プログラミングの初心者から上級者まで、幅広いレベルの学習者に対応したリソースが豊富に存在します。この記事では、shootinggame_ver1.1.htmlのコードを基に、オンラインで利用できる学びのリソースについて詳しく解説します。
まず、JavaScriptとHTML5の基礎を学ぶためのリソースとして、MDN Web Docs（英語サイト）が挙げられます。MDNは、Mozillaが提供する無料のドキュメントサイトで、Web開発に必要な技術や最新の標準仕様について詳しく解説しています。特にJavaScriptやCanvas APIの基本的な使い方を学ぶには最適です。
次に、具体的なゲーム開発のチュートリアルを提供するサイトとして、W3Schools（英語サイト）があります。W3Schoolsは、簡潔で分かりやすいチュートリアルが特徴で、初心者でもステップバイステップで学習を進めることができます。ゲームの基礎から応用まで、幅広いトピックをカバーしています。
また、GitHub（英語サイト）を活用することで、他の開発者が公開しているソースコードやプロジェクトを参照することができます。GitHubには多くのオープンソースプロジェクトがあり、実際のコードを読んだり、自分のプロジェクトに取り入れたりすることで、実践的なスキルを身につけることができます。特に、他の開発者と共同でプロジェクトを進める経験は非常に貴重です。
さらに、オンラインの学習プラットフォームとしては、UdemyやCourseraなどがあります。これらのプラットフォームでは、プロフェッショナルな講師によるビデオ講座が提供されており、自分のペースで学習を進めることができます。特に、ゲーム開発に特化したコースやプロジェクトベースの学習が充実しているため、実践的なスキルを身につけることができます。
最後に、Stack Overflow（英語サイト）などのQ&Aサイトを活用することも重要です。プログラミングの問題や疑問が生じた際に、他の開発者が提供する回答や解決策を参照することで、迅速に問題を解決できます。また、自分自身で質問を投稿し、コミュニティからフィードバックを受けることもできます。
これらのオンラインリソースを活用することで、シューティングゲームの開発スキルをさらに向上させることができます。自分に合ったリソースを見つけ、継続的に学習を続けることで、より高度なゲーム開発に挑戦してみてください。
まとめ
シューティングゲームVer1.1の開発を通じて、HTML5とJavaScriptの基礎的な技術を学び、実践する機会を得ました。本記事では、ゲームの設定、スコア表示、ゲームオーバーとリスタート、さらにはレベルデザインや他のゲーム要素の追加など、多岐にわたるトピックについて詳しく解説しました。これらの技術は、今後のゲーム開発やWebプログラミングにおいて非常に有用です。
まず、HTMLとCSSの基本設定から始め、キャンバス要素を利用してゲーム画面を作成しました。JavaScriptの初期設定では、ゲームの主要なロジックとイベントハンドリングを実装し、スムーズなゲームプレイを実現しました。特に、スコア表示やゲームオーバーのロジックは、ユーザーインターフェースの基本として理解を深めるのに役立ちます。
次に、自機を好みの画像に置き換えることで、ゲームのビジュアル面を向上させました。画像の読み込みと設定、そして描画方法を学び、ゲームに個性を持たせることができました。また、弾と敵の設定および描画を通じて、ゲーム内のオブジェクト管理の基本を理解しました。当たり判定の実装により、ゲームの動的な要素を追加し、プレイヤーに挑戦を提供することができました。
さらに、ゲームの拡張として、パワーアップアイテムやボス戦の導入を試みました。これにより、ゲームプレイのバリエーションが増し、プレイヤーにとってより魅力的な体験を提供することができました。また、ライブラリやフレームワークの利用を検討することで、より高度な機能を簡単に実装する方法を学びました。特にPhaserやThree.jsの活用は、ゲーム開発の効率を大幅に向上させることができます。
オンラインでの学びのリソースも重要です。MDN Web DocsやW3Schools、GitHub、Udemy、Stack Overflowなど、多くのリソースを活用して知識を深めることができます。これらのリソースを活用することで、常に最新の情報を入手し、スキルを向上させることができます。
最後に、この記事を通じて、シューティングゲームの基本から応用までを包括的に学びました。今後も継続して学びを深め、さらに高度なゲーム開発に挑戦してください。ゲーム開発の旅はまだ始まったばかりです。楽しみながら学び続けることで、あなたのスキルは飛躍的に向上することでしょう。
shootinggame_ver1.1.html
おまたせしました～、では簡単HTMLとCSSとJavascriptで作る簡単シューティングゲームのバージョン1.1！
「自分の機体だけ画像にしてみた！」
どうぞ～♪
<!-- 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;
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() {
ctx.fillStyle = "#00FF00";
enemies.forEach((enemy, index) => {
ctx.fillRect(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>
コメント