【HTML5で作る】シューティングゲーム開発：これでなきゃ！ついにスマホに対応！を完全解説！ Ver1.5 -

この記事では、HTML5で作成されたシューティングゲームの最新バージョン1.5について詳しく解説します。特に、モバイル対応に焦点を当て、スマホでも快適にプレイできるようになった新機能をご紹介します。

【HTML & JavaScript】初心者向け！シューティングゲームを自作してプログラミングを学ぼう - Ver.1.0

HTML5とJavaScriptを使って初心者でも簡単にシューティングゲームを開発する方法を解説！環境構築から基本的なゲームロジック、追加機能の実装まで、サンプルコード付きで丁寧に説明します。スマホ対応もバッチリ！

【HTML & JavaScript】初心者向け！シューティングゲームを自作してプログラミングを学ぼう – Ver1.1　～自機を好みの画像に置き換える～

HTML5とJavaScriptを使って初心者向けにシューティングゲームを作る完全ガイドです。基礎設定からスコア表示、ゲームオーバー、レベルデザイン、他のゲーム要素の追加まで、ステップバイステップで解説します。

【HTML5で作る】シューティングゲーム開発：敵機の表示と動きを完全解説！Ver1.2

HTML5とJavaScriptを使ったシューティングゲーム開発の完全ガイド。初心者でも簡単に始められる方法を解説します。敵機の画像表示と動きを中心に、実際に動くサンプルコードを用いてステップバイステップで学べます。

【HTML5で作る】シューティングゲーム開発：スコア表示と宇宙っぽい背景を完全解説！ついでにスタートボタンも追加 Ver1.3

HTML5とJavaScriptを使ったシューティングゲーム開発の完全ガイド。スコア表示、宇宙をテーマにした背景、スタートボタンの追加で、ゲームの魅力が倍増！初心者でも理解しやすいサンプルコード付きで詳しく解説します。

【HTML5で作る】シューティングゲーム開発：これぞ醍醐味！敵機の爆発と自機の爆発を完全解説！ Ver1.4

Shooting Game Ver1.4は、最新の宇宙戦闘体験を提供します。強力な武器と高速の宇宙船で敵を撃破し、美しいグラフィックスと迫力のサウンドで楽しめる最高のシューティングゲームです。

Ver1.4からVer1.5への進化

モバイル対応の背景

シューティングゲーム開発の最新バージョン1.5では、スマホでも快適にプレイできるように多くの改良が施されました。これにより、プレイヤーはPCだけでなく、スマートフォンやタブレットでもスムーズにゲームを楽しむことができます。以下では、特に注目すべき新機能と改良点について詳しく解説します。

モバイル操作の導入

モバイルデバイスでの操作性向上のため、新たにタッチコントロールが実装されました。タッチスクリーンでの操作をスムーズにするため、以下のような改良が行われています。

タッチボタンの導入：画面下部に「移動」と「発射」のボタンが配置され、これによりプレイヤーは直感的に自機を操作し、敵を攻撃することができます。
スワイプ操作の対応：移動コントロールでは、スワイプ操作によって自機を左右に動かすことができます。このスワイプ操作は、レスポンスが良く、ゲームプレイの快適さを向上させています。

レスポンシブデザイン

HTMLとCSSの設定も見直され、レスポンシブデザインが採用されています。これにより、どのデバイスでも適切な画面レイアウトが適用され、プレイ中に画面のサイズが変わってもゲームの表示が崩れることはありません。

キャンバスの自動リサイズ：画面サイズに合わせてキャンバスが自動的にリサイズされるようになっています。これにより、デバイスの画面サイズにかかわらず、ゲームの見栄えが保たれます。
UI要素の位置調整：スコア表示やスタートボタン、操作ボタンなどのUI要素も、デバイスの画面サイズに応じて適切な位置に配置されるように工夫されています。

パフォーマンスの最適化

モバイルデバイスでは、PCとは異なるパフォーマンス要件があります。そこで、ゲームの処理を最適化し、どのデバイスでもスムーズに動作するように改良が加えられました。

アニメーションの最適化：特に敵キャラクターや弾、爆発エフェクトのアニメーションが軽量化され、パフォーマンスが向上しました。
イベントリスナーの効率化：タッチイベントやキーイベントのリスナーが見直され、不要なイベントの処理を削減しています。

コードサンプル

以下に、主要なコードサンプルを示します。

// キャンバスのリサイズ関数
function resizeCanvas() {
  const container = document.getElementById('gameContainer');
  const width = container.clientWidth;
  const height = width * (600 / 480);
  canvas.width = width;
  canvas.height = height;
  shipX = canvas.width / 2 - shipWidth / 2;
  shipY = canvas.height - shipHeight - 10;
  ship = { x: shipX, y: shipY, width: shipWidth, height: shipHeight, dx: 0 };
}

// スワイプ操作対応
moveControl.addEventListener("touchmove", (e) => {
  for (const touch of e.touches) {
    const previousX = touches[touch.identifier];
    if (previousX !== undefined) {
      const deltaX = touch.clientX - previousX;
      ship.x += deltaX * 0.9;
      if (ship.x < 0) ship.x = 0;
      if (ship.x + ship.width > canvas.width) ship.x = canvas.width - ship.width;
      touches[touch.identifier] = touch.clientX;
    }
  }
  e.preventDefault();
});

操作性の向上

タッチ操作の実装

Ver1.5では、モバイルデバイスでの操作性が大幅に向上しました。タッチパネルを利用した新しい操作方法が追加され、スマートフォンやタブレットでのプレイがさらに快適になっています。プレイヤーはスワイプ操作で自機を左右に移動させることができ、タップ操作で弾丸を発射することができます。この直感的な操作方法により、モバイルデバイスでもストレスなくゲームを楽しむことができます。

タッチ操作は、以下のような具体的な実装が行われています：

スワイプ操作：プレイヤーが画面をスワイプすることで、自機を滑らかに左右に移動させることができます。この操作は、特に敵の攻撃を避ける際に非常に役立ちます。スワイプの速度に応じて自機の移動速度が変わるため、プレイヤーは直感的に自機をコントロールできます。
タップ操作：画面をタップすることで、弾丸を発射することができます。これにより、敵を攻撃する操作が簡単になり、より迅速に反応することができます。連続タップによる連射も可能で、白熱したバトルを楽しむことができます。

キーボード操作の改善

PCブラウザ版では、キーボード操作がさらに改善され、プレイヤーがより快適にゲームをプレイできるようになりました。従来の左右の矢印キーとZキーによる操作方法が見直され、反応速度や操作感が向上しています。

具体的な改善点は以下の通りです：

矢印キーの操作感向上：左右の矢印キーを使用して自機を移動させる際の反応速度が向上し、スムーズな操作が可能になりました。これにより、プレイヤーは敵の攻撃を避けたり、効率的に敵を攻撃するためのポジショニングを行いやすくなりました。
Zキーによる発射：Zキーを押すことで弾丸を発射する操作も改善され、より直感的で迅速な攻撃が可能です。キー入力のレスポンスが向上し、プレイヤーは敵の動きに即座に反応できます。

UIの改善

ユーザーインターフェース（UI）の改善も大きなポイントです。スコア表示やゲームオーバー画面が見やすくなり、プレイヤーの利便性が向上しました。UIの改良により、プレイヤーはゲームプレイに集中しやすくなっています。

主なUIの改善点は以下の通りです：

スコア表示：スコア表示は画面の上部に固定され、プレイヤーは常に現在のスコアを確認できます。これにより、プレイ中にスコアを意識しながら戦略を練ることが可能です。スコア表示は背景に溶け込むようにデザインされており、プレイの邪魔になりません。
ゲームオーバー画面：ゲームオーバー時には、プレイヤーの最終スコアが画面中央に大きく表示されます。これにより、プレイヤーは自分の成果を確認しやすくなり、再挑戦するモチベーションを高めます。また、ゲームオーバー画面はシンプルかつ見やすいデザインになっており、次のゲーム開始までの流れがスムーズです。

具体的なコードサンプル

以下に、タッチ操作とキーボード操作の実装例を示します：

// スワイプ操作の実装
moveControl.addEventListener("touchmove", (e) => {
  for (const touch of e.touches) {
    const previousX = touches[touch.identifier];
    if (previousX !== undefined) {
      const deltaX = touch.clientX - previousX;
      ship.x += deltaX * 0.9;
      if (ship.x < 0) ship.x = 0;
      if (ship.x + ship.width > canvas.width) ship.x = canvas.width - ship.width;
      touches[touch.identifier] = touch.clientX;
    }
  }
  e.preventDefault();
});

// キーボード操作の改善
document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);

function keyDownHandler(e) {
  keys[e.key] = true;
  if (keys["ArrowRight"] && !keys["ArrowLeft"]) {
    ship.dx = 5;
  } else if (keys["ArrowLeft"] && !keys["ArrowRight"]) {
    ship.dx = -5;
  } else if (keys["ArrowRight"] && keys["ArrowLeft"]) {
    ship.dx = 0;
  }
}

function keyUpHandler(e) {
  keys[e.key] = false;
  if (keys["ArrowRight"] && !keys["ArrowLeft"]) {
    ship.dx = 5;
  } else if (keys["ArrowLeft"] && !keys["ArrowRight"]) {
    ship.dx = -5;
  } else {
    ship.dx = 0;
  }
}

これらの改善により、Ver1.5ではプレイヤーがさらに快適にシューティングゲームを楽しむことができるようになりました。

ゲームプレイの向上

敵キャラクターの複雑な動きや新しいビジュアルエフェクト、見やすいスコア表示やゲームオーバー画面、スマートフォンでのタッチ操作とPCでのキーボード操作

エネミーAIの強化

Ver1.5では、敵キャラクターのAIが大幅に強化されました。これにより、敵の動きがより複雑かつ多様になり、プレイヤーにとって一層挑戦的なゲームプレイが提供されます。具体的には、敵は単純な直線的な動きだけでなく、プレイヤーの動きを予測し、巧妙に回避や攻撃を行うようになりました。例えば、プレイヤーが弾を発射した際、敵がその弾を避けるように移動するシステムが導入されています。このような改良により、ゲームの戦略性が増し、プレイヤーはより緻密な計画を立てる必要があります。

以下に、エネミーAI強化の一部コードを示します：

// 敵の動きを更新する関数
function updateEnemyAI(enemy) {
  // 敵がプレイヤーを追跡するようにする
  if (enemy.y < player.y) {
    enemy.dy += 0.1;
  } else {
    enemy.dy -= 0.1;
  }
  // 敵の動きをランダム化する
  enemy.dx += (Math.random() - 0.5) * 0.2;
}

新たなエフェクトの追加

Ver1.5では、ゲームのビジュアル面で大きな進化が見られます。特に、爆発エフェクトや背景の星の動きが一層リアルになり、プレイヤーを没入させる要素が増えました。新しい爆発エフェクトは、複数のフレームを使用して滑らかなアニメーションを実現しており、敵を倒したときの爽快感が倍増しています。また、背景の星もランダムに動くように設定されており、よりリアルな宇宙空間が描かれています。これにより、プレイヤーはゲームの世界に引き込まれ、より臨場感のある体験を楽しむことができます。

具体的なエフェクトのコードは以下の通りです：

// 爆発エフェクトの設定
const explosionImages = [
  new Image(),
  new Image()
];
explosionImages[0].src = 'https://example.com/explosion1.png';
explosionImages[1].src = 'https://example.com/explosion2.png';

// 爆発エフェクトを描画する関数
function drawExplosions() {
  explosions.forEach((explosion, index) => {
    const frame = Math.floor(explosion.frame / 4); // フレームをスローダウン
    if (frame >= explosionFrameCount) {
      explosions.splice(index, 1); // 爆発アニメーション終了
      return;
    }
    ctx.drawImage(explosionImages[explosion.useFirstImage ? 0 : 1], 0, 0, explosionFrameWidth, explosionFrameHeight, explosion.x, explosion.y, explosion.width, explosion.height);
    explosion.frame++;
  });
}

UIの改善

主なUIの改善点は以下の通りです：

スコア表示：スコア表示は画面の上部に固定され、プレイヤーは常に現在のスコアを確認できます。これにより、プレイ中にスコアを意識しながら戦略を練ることが可能です。スコア表示は背景に溶け込むようにデザインされており、プレイの邪魔になりません。
ゲームオーバー画面：ゲームオーバー時には、プレイヤーの最終スコアが画面中央に大きく表示されます。これにより、プレイヤーは自分の成果を確認しやすくなり、再挑戦するモチベーションを高めます。また、ゲームオーバー画面はシンプルかつ見やすいデザインになっており、次のゲーム開始までの流れがスムーズです。

具体的なUIのコード例を以下に示します：

// スコア表示の更新関数
function updateScore() {
  document.getElementById("scoreDisplay").innerText = `スコア: ${score}`;
}

// ゲームオーバー時のスコア表示関数
function displayFinalScore() {
  const finalScoreElement = document.getElementById("finalScore");
  finalScoreElement.innerText = `GAME OVER\nSCORE: ${score}`;
  finalScoreElement.style.display = "block";
}

操作性の向上

Ver1.5では、プレイヤーの操作性がさらに向上しました。特にタッチ操作とキーボード操作の両方が見直され、より直感的で反応の良い操作が可能になっています。スマートフォンやタブレットでは、スワイプやタップによる操作が追加され、PCブラウザ版ではキーボード操作が改善されました。

以下に、操作性向上のための具体的なコードを示します：

// スワイプ操作の実装
moveControl.addEventListener("touchmove", (e) => {
  for (const touch of e.touches) {
    const previousX = touches[touch.identifier];
    if (previousX !== undefined) {
      const deltaX = touch.clientX - previousX;
      ship.x += deltaX * 0.9;
      if (ship.x < 0) ship.x = 0;
      if (ship.x + ship.width > canvas.width) ship.x = canvas.width - ship.width;
      touches[touch.identifier] = touch.clientX;
    }
  }
  e.preventDefault();
});

// キーボード操作の改善
document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);

function keyDownHandler(e) {
  keys[e.key] = true;
  if (keys["ArrowRight"] && !keys["ArrowLeft"]) {
    ship.dx = 5;
  } else if (keys["ArrowLeft"] && !keys["ArrowRight"]) {
    ship.dx = -5;
  } else if (keys["ArrowRight"] && keys["ArrowLeft"]) {
    ship.dx = 0;
  }
}

function keyUpHandler(e) {
  keys[e.key] = false;
  if (keys["ArrowRight"] && !keys["ArrowLeft"]) {
    ship.dx = 5;
  } else if (keys["ArrowLeft"] && !keys["ArrowRight"]) {
    ship.dx = -5;
  } else {
    ship.dx = 0;
  }
}

Ver1.5では、これらの改良により、プレイヤーがより快適にシューティングゲームを楽しむことができるようになりました。

開発の背景と技術的な詳細

HTML5とJavaScriptの活用

Ver1.5のシューティングゲームでは、HTML5のCanvas要素とJavaScriptを最大限に活用しています。これにより、スムーズで高速なグラフィック描写を実現し、リッチなゲーム体験を提供しています。Canvas要素は、ブラウザ上で動的なグラフィックスを描画するための非常に強力なツールであり、JavaScriptと組み合わせることで、リアルタイムのアニメーションやインタラクションが可能になります。

具体的には、以下のような技術が使用されています：

Canvas API：Canvas APIを用いて、ゲームの背景、キャラクター、弾丸、エフェクトなどを描画しています。
リクエストアニメーションフレーム：スムーズなアニメーションを実現するために、requestAnimationFrameを使用しています。これにより、フレームごとの更新が最適化され、パフォーマンスが向上します。
イベントリスナー：ユーザーの入力をキャプチャするために、キーボードやタッチイベントのリスナーを設定しています。

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // ゲームオブジェクトの描画コード
  requestAnimationFrame(draw);
}

draw();

レスポンシブデザインの実装方法

ゲームがさまざまなデバイスで快適にプレイできるように、CSSを活用してレスポンシブデザインが実装されています。これにより、PC、タブレット、スマートフォンなど、異なる画面サイズに自動的に適応するゲームレイアウトが実現されています。

以下の技術が使用されています：

メディアクエリ：CSSのメディアクエリを使用して、デバイスの画面サイズに応じてレイアウトを変更しています。
フレックスボックス：フレックスボックスを利用して、UI要素の配置を柔軟に調整しています。
相対的な単位：画面サイズに依存しないレイアウトを実現するために、相対的な単位（％、vh、vwなど）を使用しています。

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#gameCanvas {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 縦横比を維持する */
}

タッチ操作の実装方法

Ver1.5では、スマートフォンやタブレットでの直感的な操作を可能にするために、JavaScriptでタッチイベントが実装されています。これにより、タッチスクリーンデバイスでの操作性が大幅に向上しています。

主な実装方法は以下の通りです：

タッチイベントリスナー：touchstart、touchmove、touchendイベントをキャプチャして、自機の移動や弾の発射を制御しています。
スワイプ操作：スワイプ操作により、自機をスムーズに移動させることができます。
タップ操作：タップ操作で弾を発射することができ、簡単に攻撃が行えます。

const moveControl = document.getElementById("moveControl");
const fireButton = document.getElementById("fireButton");

moveControl.addEventListener("touchmove", (e) => {
  for (const touch of e.touches) {
    const deltaX = touch.clientX - touch.clientXStart;
    ship.x += deltaX * 0.9;
    if (ship.x < 0) ship.x = 0;
    if (ship.x + ship.width > canvas.width) ship.x = canvas.width - ship.width;
    touch.clientXStart = touch.clientX;
  }
  e.preventDefault();
});

fireButton.addEventListener("touchstart", (e) => {
  fireBullet();
  e.preventDefault();
});

これらの技術を駆使することで、Ver1.5のシューティングゲームは、様々なデバイスで快適にプレイできるようになり、ユーザーに一貫したゲーム体験を提供しています。

今後のアップデート予定

今後予定されているアップデート内容や新機能についての情報をお伝えします。

Ver1.5のリリースに続き、開発チームはさらなる改良と新機能の追加を計画しています。以下に、今後のアップデート予定をいくつかご紹介します。

新しいゲームモードの追加

新たなゲームモードが追加される予定です。これにより、プレイヤーは従来のストーリーモードだけでなく、チャレンジモードやサバイバルモードなど、さまざまなプレイスタイルを楽しむことができるようになります。特に、サバイバルモードでは、無限に出現する敵をどれだけ長く生き延びるかを競うことができます。

マルチプレイヤー機能の実装

オンラインマルチプレイヤー機能が実装される予定です。この機能により、プレイヤーは友人や他のプレイヤーとリアルタイムで対戦や協力プレイを楽しむことができるようになります。マルチプレイヤー機能の追加は、ゲームの楽しみをさらに広げる大きなステップとなるでしょう。

グラフィックとサウンドの実装

ゲームのビジュアルとオーディオ体験をさらに向上させるために、グラフィックのアップグレードとサウンドの実装が予定されています。これには、より高解像度のテクスチャ、新しいエフェクト、そして臨場感あふれるサウンドトラックの追加が含まれます。これにより、プレイヤーはより没入感のあるゲーム体験を楽しむことができるようになります。