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

タイピングゲーム制作を通してプログラミングに強くなろう!
ということで、オリジナル 対戦型タイピングゲームの制作過程を紹介しています。
このタイピングゲームは
- HTML
- CSS
- JavaScript
の3種類の言語で制作していて初心者でも取り扱いやすい内容になっていて、
高校の情報1のプログラミング実技授業としてもオススメです!
この記事では制作過程の「Step2攻撃のモーションをつくろう」ということで、CSSとJavaScriptファイルを更新して、攻撃のモーションを加えてみましょう!
目次

HTMLで<audio>タグを挿入し、JavaScriptを使用して鳴らせるようになりましょう。
アレンジ2は1時間程度で完成する見込みです。
編集したファイルを開き、ゲームスタートするとBGMが鳴っていればOKです。

それではアレンジ2をどのように進めていくか順に説明します。
まずは、ゲームで使用したいBGMや効果音を見つけましょう。
たとえば
- ゲームの間ずっと流れるBGM
- 攻撃する際の効果音
- タイピングのたびに流れる効果音
などを準備すると良いでしょう。
以下は無料で使用できる効果音を探せるサイトです。ぜひ活用してみてください。
▶︎効果音ラボ
オーディオファイルの収納方法:
音声データを決めたら、以下のように新規フォルダを作成し、そこにそれぞれのファイルを収録しましょう。
- プロジェクトルートフォルダ
- assets(またはstatic)
- audio
- bgm:背景音楽用のフォルダ
- sfx:効果音(Sound Effects)用のフォルダ
- audio
- assets(またはstatic)
この構造により、背景音楽(BGM)と効果音(SFX)を分けて管理できます。例えば、攻撃音やアイテム取得音などの効果音は**sfx
フォルダに、ゲームの背景音楽はbgm
**フォルダに収納します。
効果音を決めたら、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>
HTMLファイルにaudioタグを挿入した後、JavaScriptで音楽を鳴らせるようにしましょう。
// BGMの再生を開始
const bgm = document.getElementById('bgm');
bgm.volume = 0.5; // 音量を半分に設定
bgm.play().catch(e => {
console.error("BGMの再生に失敗しました: ", e);
});

最後に模範コードと課題用コードの例を紹介します。
課題用コードの編集箇所は好きにアレンジしてください!
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は既に完成しているファイルに必要箇所だけ追記するようにしましょう。
模範コード
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();
}
2つ目のアレンジ案として「BGMと効果音の挿入」を紹介しました。
使用する音声ファイルが著作権などに抵触しないか注意しておく必要はありますが、作成者の世界観なども反映する部分ですので生徒のセンスが光る箇所です。
生徒のオリジナリティが反映された作品に仕上げてもらえると嬉しいです。
スポンサーリンク