移動制限と選択肢の追加

串です。先週は下記を行いました。

・持ち物ページを開いた時に、プレイヤーの動きを制限する

・イベントでの選択肢の追加

　まず、持ち物ページについてですが、今まではwキーで持ち物ページを開いた後、方向キーを押すとプレイヤーが移動し、持ち物ページが閉じていました。持ち物ページは、方向キーで各アイテムに表示を合わせると、アイテムの詳細や使用の可否を問うものにしたいと考えているため、一度ページを開いたら方向キーによるプレイヤーの移動を止めたいと考えていました。

　今回はそのプレイヤーの移動を止める部分を作成しました。wキーを押すことで、変数wの値を変え、w=0の時のみ、方向キーによるプレイヤーの移動を行うように設定しました。

　w=0が、方向キーで移動

　w=1は、持ち物ページを開く

という処理にしており、wキーを押すと

　w=1-w

を実行して、wの値を変えています。

　次に、会話イベントでの選択肢の追加についてですが、メインストーリー終盤で、プレイヤーにはいかいいえを問うものを作りたいと考えていたため、今回は選択肢を表示させるところまで作成しました。

　持ち物の時と同じく変数sを用意して、選択肢を表示したい場面でs=1にし、方向キーによるプレイヤーの移動を制限しています。

　そのため、はいといいえの切り替えは方向キーの上下で行います。

　今後は、エンターキーなどを使って選択肢を決定し、さらにイベントを繋げていきたいと考えています。

今後やっていきたいこと

・選択肢による分岐とメインストーリーの作成

・サブストーリーの作成

　選択肢の設置ができたことで、メインストーリーが進められそうなので、引き続き作成していきます。サブストーリーの方も進めていきたいと思います。

　今週作成したものは、仕組みはシンプルですが中々上手くいかず、いくつか試行錯誤をしました。持ち物ページは、元々はwキーを押すことで、mtmnpaint(持ち物を描画する関数)を実行していましたが、プレイヤーの動きを制限するために変数wを追加しました。if文による分岐を作りましたが、持ち物ページが画面上に表示されなかったため、新たにmtmnw関数を作り、プレイヤーが何らかのキー入力をする度に、mtmnw関数を実行してwの値を確認し、mtmnpaintを実行するかを判断する仕組みにしました。

　他にも、選択肢を表示する際に繰り返し同じ関数を実行するため、不透明度が上がっていく問題がありました。会話イベントなどで後ろに表示している黒背景は不透明度70%なのですが、選択肢を表示する際に、今のシステムは上から塗り潰す形のため、下にうっすらと前の画面が残っていました。表示画面を消してから描画し直すようにするには、マップの表示と会話画面の表示と全て実行し直す必要があったため、選択肢の画面のみを確実に塗り替えられるように、不透明度を100%にしました。

マップ制作で使用させていただいた素材は、ぴぽや倉庫様からお借りしています。

https://pipoya.net/sozai/

＜参考文献＞

・MDN Web Docs 「CanvasRendingContext2D: strokeStyle プロパティ - Web API」、

(https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/strokeStyle　閲覧日：2025年12月3日)

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

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

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