【対戦型タイピングゲームアレンジ2】ゲームにBGMと効果音をつけよう - コトゼニ～学習塾とボクと、時々プログラミング〜

【PR】この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

コトゼニ

タイピングゲーム制作を通してプログラミングに強くなろう！

ということで、オリジナル対戦型タイピングゲームの制作過程を紹介しています。

このタイピングゲームは

HTML
CSS
JavaScript

の3種類の言語で制作していて初心者でも取り扱いやすい内容になっていて、

高校の情報1のプログラミング実技授業としてもオススメです！

この記事では制作過程の「Step2攻撃のモーションをつくろう」ということで、CSSとJavaScriptファイルを更新して、攻撃のモーションを加えてみましょう！

1 アレンジ2の詳細
2 アレンジ2の流れ
3 模範コードと課題用コードの例
4 まとめ

アレンジ2の詳細

アレンジ2の目標

HTMLで<audio>タグを挿入し、JavaScriptを使用して鳴らせるようになりましょう。

アレンジ2の必要時間（目安）

アレンジ2は1時間程度で完成する見込みです。

アレンジ2のゴール

編集したファイルを開き、ゲームスタートするとBGMが鳴っていればOKです。

アレンジ2の流れ

それではアレンジ2をどのように進めていくか順に説明します。

課題①ゲームで使用したいBGMや効果音を見つける

まずは、ゲームで使用したいBGMや効果音を見つけましょう。

たとえば

ゲームの間ずっと流れるBGM
攻撃する際の効果音
タイピングのたびに流れる効果音

などを準備すると良いでしょう。

以下は無料で使用できる効果音を探せるサイトです。ぜひ活用してみてください。

▶︎効果音ラボ

オーディオファイルの収納方法:

音声データを決めたら、以下のように新規フォルダを作成し、そこにそれぞれのファイルを収録しましょう。

プロジェクトルートフォルダ
- assets（またはstatic）
  - audio
    - bgm：背景音楽用のフォルダ
    - sfx：効果音（Sound Effects）用のフォルダ

この構造により、背景音楽（BGM）と効果音（SFX）を分けて管理できます。例えば、攻撃音やアイテム取得音などの効果音は**sfxフォルダに、ゲームの背景音楽はbgm**フォルダに収納します。

課題②HTMLファイルにaudioタグを挿入する

効果音を決めたら、HTMLファイルでaudioファイルを読み込めるようにしましょう。

入力するコードは以下がサンプルです。

<audio id="bgm" loop>
  <source src="assets/audio/bgm/game_bgm.mp3" type="audio/mp3">
  お使いのブラウザはaudio要素をサポートしていません。
</audio>

<audio id="attackSound">
  <source src="assets/audio/sfx/attack_sound.mp3" type="audio/mp3">
  お使いのブラウザはaudio要素をサポートしていません。
</audio>

課題③JavaScriptにスクリプトを追記する

HTMLファイルにaudioタグを挿入した後、JavaScriptで音楽を鳴らせるようにしましょう。

    // BGMの再生を開始
    const bgm = document.getElementById('bgm');
		bgm.volume = 0.5; // 音量を半分に設定
    bgm.play().catch(e => {
        console.error("BGMの再生に失敗しました: ", e);
    });

模範コードと課題用コードの例

最後に模範コードと課題用コードの例を紹介します。

課題用コードの編集箇所は好きにアレンジしてください！

HTMLファイル

HTMLファイルでaudioタグを挿入する際はファイルのリンクを正しく記述するようにしましょう。

模範コード

<audio id="bgm" loop>
  <source src="assets/audio/bgm/game_bgm.mp3" type="audio/mp3">
  お使いのブラウザはaudio要素をサポートしていません。
</audio>

<audio id="attackSound">
  <source src="assets/audio/sfx/attack_sound.mp3" type="audio/mp3">
  お使いのブラウザはaudio要素をサポートしていません。
</audio>

音声ファイルの名称はわかりやすいものに変更しておきましょう。

課題用コードの例

<audio id="bgm" loop>
  <source src="assets/audio/bgm/■■■.mp3" type="audio/mp3">
  お使いのブラウザはaudio要素をサポートしていません。
</audio>

<audio id="attackSound">
  <source src="assets/audio/sfx/■■■.mp3" type="audio/mp3">
  お使いのブラウザはaudio要素をサポートしていません。
</audio>

JavaScriptファイル

JavaScriptは既に完成しているファイルに必要箇所だけ追記するようにしましょう。

模範コード

function startGame() {
    startScreen.classList.remove('active'); // 開始画面を非表示に
    battleScreen.classList.add('active');   // 対戦画面を表示
    nextWord();                             // 次の単語を表示

    // BGMの再生を開始
    const bgm = document.getElementById('bgm');
		bgm.volume = 0.5; // 音量を半分に設定
    bgm.play().catch(e => {
        console.error("BGMの再生に失敗しました: ", e);
    });
}

function attackEnemy(damage, isCritical) {
  // 効果音の再生
  playAttackSound();
  
  // 攻撃処理...
}

function playAttackSound() {
  const attackSound = document.getElementById('attackSound');
  attackSound.play();
}

課題用コードの例

function startGame() {
    startScreen.classList.remove('active'); // 開始画面を非表示に
    battleScreen.classList.add('active');   // 対戦画面を表示
    nextWord();                             // 次の単語を表示

    // BGMの再生を開始
    const bgm = document.getElementById('■■■');
		bgm.volume = 0.5; // 音量を半分に設定
    bgm.play().catch(e => {
        console.error("BGMの再生に失敗しました: ", e);
    });
}

function attackEnemy(damage, isCritical) {
  // 効果音の再生
  ■■■();
  
  // 攻撃処理...
}

function playAttackSound() {
  const attackSound = document.getElementById('■■■');
  attackSound.play();
}