Sの卒研ブログ

 敵が出現するマップを作成しました。 主人公は弓を所持しており、弓でランダムに動く敵キャラを攻撃することで敵を倒すことができます。逆に主人公が敵を倒せずHPを削られるとゲームオーバーになる仕組みです。 スペースキーを押すことで弓で攻撃できます。 敵を倒しきる＆特定の個所を踏むことで別のマップに移動できます。 　 当たり判定のコードは以下の通りです。 敵を倒すことで下の画像の通り奥の通路が開く仕組みになっています。 コードを見ればわかるように、敵のHPが０になると背景の画像が差し替えられるようにしています。 画像の表示や操作キャラクター、敵の挙動は問題なく実装できました。 ただ、コンソールなどを確認すると原因不明のエラーが発生していました。 敵キャラを攻撃したりダメージを受けた時の効果音の部分でトラブルが起きている状態です。 vscodeで確認しましたが、script要素部分に問題はないもののbody要素に問題エラーが発生しているようです。 audio要素の部分の部分を見ると、コードの末尾のスラッシュ部分が赤くなりエラーが起きていることが分かると思います。 次のマップを実装しながら原因を特定する予定です。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年 素材 ぴぽ「ぴぽや倉庫」（https://pipoya.net/sozai/#google_vignette閲覧日:2025年10月15日） ゲーム作成にあたり上記のサイトから画像をお借りしています。ありがとうございます。

 ブログ更新を失念していたため久方ぶりの投稿になりました。 内定式や内定先課題やら面接と同時並行していた課題の進捗を 載せようと思います。 マップの追加などをしました。ゼミでは二次元配列の変数に画像（マップチップ）を対応させることでマップを描画する方法をとっていました。 ただ、これだと手打ちで変数を打ちながらどの画像にどの数字を振ったかの管理が面倒です。 そのためあらかじめ素材を編集して一枚の画像としてマップを描画する方法をとりました。 上の画像がそのやり方で作ったマップです。 マップの特定のマスを踏むことで別のマップに移動できるようcaseで処理しています。処理は下のコードの通りです。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年 素材 ぴぽ「ぴぽや倉庫」（https://pipoya.net/sozai/#google_vignette閲覧日:2025年10月15日） ゲーム作成にあたり上記のサイトから画像をお借りしています。ありがとうございます。