画像の差し替え

 一部画像を差し替えました。

ゲームを作成する際に本体のプログラムを優先していました。そのため、主人公や敵などの固有グラフィックはゼミで配布されたものを流用していました。

このままでは味気ないため一部画像を差し替えることにしました。

下記のとおりです。

主人公のbefor after

befor
after


敵キャラのbefor after

befor

after


ゲーム作成中はbeforの方に見慣れていたので新鮮です。


参考文献

田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年

田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年

田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年

素材
前田デザイン室「DOTTOWN｝（https://dotown.maeda-design-room.net/閲覧⽇：2026 年 1 ⽉ 19 ⽇）
ぴぽ「ぴぽや倉庫」（https://pipoya.net/sozai/#google_vignette閲覧日:2025年1月19日）

ゲーム作成にあたり上記のサイトから画像をお借りしています。ありがとうございます。




このブログの人気の投稿

はじめに

イメージ
 初めまして。 東京経済大学のSです。 このブログでは卒業研究で取り組むプログラムの進捗について、日誌形式で掲載します。 開発しているゲームの画面です。 昨年度に作成したプログラムに改良を加えながら完成させる予定です。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年 素材 ぴぽ「ぴぽや倉庫」（https://pipoya.net/sozai/#google_vignette閲覧日:2025年7月24日） 「いらすとや」（https://www.irasutoya.com/閲覧日:2025年7月24日） ゲーム作成にあたり上記のサイトから画像をお借りしています。ありがとうございます。
続きを読む

マップ追加2

イメージ
 敵が出現するマップを作成しました。 主人公は弓を所持しており、弓でランダムに動く敵キャラを攻撃することで敵を倒すことができます。逆に主人公が敵を倒せず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日） ゲーム作成にあたり上記のサイトから画像をお借りしています。ありがとうございます。
続きを読む

マップ追加1

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