「Third」開発日誌

 串です。今週は下記を行いました。 ・サブストーリーの持ち物の管理 ・ストーリー進行に伴う時間の変化 　まず、サブストーリーでの持ち物の管理についてですが、以前pushを使ってアイテムを配列の最後に追加するという処理は組み込んでいました。今回は、アイテムがなくなった時に持ち物ページから消えるような処理を作りました。 mtmn = mtmn.filtter(function(mtmn){     return mtmn !== "・アイテム名"; }) 　filterを使ったループ処理で、配列内の値を検索して削除しています。returnの後の条件文で、アイテム名以外のものを配列に戻しています。 　次にストーリー進行に伴う時間の変化についてですが、以前やりたいと書いていた時間帯の変化を描画できるようにしました。 　メインストーリーにおける特殊なアイテムの取得などのタイミングで変数dayの値を変える処理を作りました。day1では夕方、day2では夜になるように設定しています。 今後やっていきたいこと ・メインストーリーの作成 ・サブストーリーの作成 　今回はゲームシナリオを進めるというよりは、それに伴う演出的な部分の作成を主に行ったので、今後は実際のシナリオ部分の作成をしていきたいと思います。 　 マップ制作で使用させていただいた素材は、ぴぽや倉庫様からお借りしています。 https://pipoya.net/sozai/ ＜参考文献＞ ・MDN Web Docs「grobalCompositeOperation プロパティ -Web API | MDN」、(https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation　閲覧日：2025年12月15日) ・techmania.jp 「【JavaScript入門】 filterで条件に合致する値を配列から抽出する」、(https://techmania.jp/blog/javascript-filter/　閲覧日：2025年12月13日) ・侍エンジニア 「【JavaScript入門】 配列要素を削除する方法のすべて！」、(https://www.sejuku.net/...

 串です。今週は下記を行いました。 ・ページ送り ・選択肢を選択した後の分岐 ・サブストーリーの素材作成 　まずページ送りについてですが、今までキャラクターとの会話イベントでは１ページ分の台詞を表示していました。会話は方向キーで主人公が移動することで閉じていましたが、エンターキーを押すことで次のページへ移動し、長い台詞などに対応できるようにしました。 　コードは二重配列を使用し、ページ数をカウントしながら、一列ずつ表示するようにしています。以前作成したものと同じ方法で、会話イベントが始まったら変数を１に変え、移動を制限しています。配列の最後の要素が表示されるまではエンターキーで配列の順番を送っていき、最後の要素に来たら変数を０に戻して再び移動を出来るようにしています。 　選択肢を選択した後の分岐についてですが、はいを選んだ後に別の会話イベントが発生するように設定しました。新たなフラグを設置し、配列の最後の要素でエンターキーを押した時に、フラグが立っていれば別の会話イベントへ移るという流れです。 　最後にサブストーリーの素材作成についてですが、新たなマップを用意し、そこに必要なキャラクターを配置しました。 　わらしべ長者的なイベントなので、数珠繋ぎでフラグが成立するように設定していきます。プログラミングの方には関係がありませんが、村人はメインキャラと違いを生むために目元をシンプルに描いています。他にも二人のキャラクターを配置すれば、サブストーリーに必要なキャラクターが出揃います。 今後やっていきたいこと ・メインストーリーの作成 ・サブストーリーの作成 ・日付の変更 　上に二つはこれまで通り、引き続き行っていきたいと思います。フラグの設置をメインに行っていきます。 　日付の変更は以前も書きましたが、どのように組み込めるかを考えていきたいと思います。 マップ制作で使用させていただいた素材は、ぴぽや倉庫様からお借りしています。 https://pipoya.net/sozai/ ＜参考文献＞ ・田中賢一郎『ゲームで学ぶJavaScript 入門』インプレス、2015年 ・田中賢一郎『ゲームを作りながら楽しく学べるHTML5+JavaScript 入門』インプレス、2017年 ・田中賢一郎『ゲームで学ぶJavaScript 入門　増補改訂版～ブラウザゲームづくりでH...

串です。先週は下記を行いました。 ・持ち物ページを開いた時に、プレイヤーの動きを制限する ・イベントでの選択肢の追加 　まず、持ち物ページについてですが、今までは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を実行するかを判断する仕組みにしました。 　他にも、選択肢を表示す...

 串です。今週は下記を行いました。 ・メインストーリーに必要なフラグの設置 ・flag以外の変数iを利用した処理 ・持ち物参照ページの作成 　フラグの設置に関してですが、現在予定しているフラグ数21に対して、18までの設置が完了しました。かなり終盤に入っていますが、ここからの処理がかなり複雑になってきそうです。フラグ設置に関してはこれまでとそれほど変わりがないため割愛します。 　次に変数iの利用についてですが、ストーリーの途中で道に置いてある武器を無力化して進む場面があり、すべてにフラグを使用するよりも別の変数を設置した方が見やすいと考えたため使ってみました。 　このステージに来るまではフラグで処理しているため、このステージに来ている段階で前のフラグ状況は関係ないものとして考えています。新たに変数iを定義して、武器を一つ無力化すごとにiが加算されていくようにしています。iの値に応じてプレイヤーが進めるかどうかを判定しています。 　変数を新たにすることで、flag19が何番目の樽で、のように考える必要がなく、一つ目の樽を無力化したらi=1のようにシンプルに考えることができました。 　持ち物参照ページについてですが、以前ｗキーを押してページが出てくるところまで作成していましたが、ちゃんと持ち物が増えた場合には持ち物ページにアイテムが追加される処理を追加しました。 　mtmn[]という配列を用意して、プレイヤーが新たなアイテムを入手するごとに、     mtmn.push("・アイテム名") で入手したアイテムを配列の後ろに追加しています。 　持ち物の数に応じて、黒い背景部分のｙ座標も変化するようにしています。今はまだ参照するだけのページですが、今後使用するかどうかをプレイヤーに問う処理も追加していきたいと考えています。 今後やっていきたいこと ・選択肢の追加 ・サブストーリーの作成 ・ページ切り替え 　メインストーリーの最後の方では、プレイヤーにアイテムの使用の可否を訪ねる場面や、キャラクターの質問にはいかいいえで答えるといったものを入れたいため、選択肢を画面上に表示し、方向キーなどで選択できるようにしたいと考えています。 　メインストーリーにかなり目途がついてきていて、上記の選択肢の設置が出来ないと進まない状態であるため、サブストーリーにも...

　 串です。今週はフラグの設置のみを行いました。 　 　先週に引き続き、メインストーリーに関わるフラグの設置を行いました。現在予定しているフラグ数は21個で、16個目までの設置が終わりました。半分以上は進んだように思いますが、これからが複雑になってくるので、もっとフラグ数は増えていくと思います。 　マップの用意だけ済んでいて、移動することのできなかった場所と繋がってきました。下はメインストーリー後半で行くことになる地下牢です。 　ヒロインも一緒に閉じ込められています。壁際のヒロインと同じ高さの場所にくると、自動的にヒロインと会話できるようにしています。 今後やっていきたいこと ・フラグの設置 ・タイマー処理とマップ切り替え 　フラグの設置は引き続き行っていきます。タイマー処理についてですが、この地下牢に来る前に王様と話すイベントがあり、そこで王様と話してから数秒後に地下牢のあるマップへと移動させようと考えています。setTimeoutを使って処理を実行しようと試しているのですが、現状は上手くいっておらずプレイヤーが自ら地下に飛び込むような形になっています。ステージの切り替えはfieldkeydown関数内で行っており、この中でsetTimeoutを使おうとしているために上手く動かなのではと仮説を立てていますが、解決策が思いついていないので、これも後々改良していきたいと考えています。 　前の更新から二週間後の更新ですが、あまり目立った進展は作れませんでした。来週以降もメインストーリーの制作を主に進めて、他のことにも早く取り掛かれるようにしていきたいと思います。 マップ制作で使用させていただいた素材は、ぴぽや倉庫様からお借りしています。 https://pipoya.net/sozai/ ＜参考文献＞ ・田中賢一郎『ゲームで学ぶJavaScript 入門』インプレス、2015年 ・田中賢一郎『ゲームを作りながら楽しく学べるHTML5+JavaScript 入門』インプレス、2017年 ・田中賢一郎『ゲームで学ぶJavaScript 入門　増補改訂版～ブラウザゲームづくりでHTML＆CSSも身につく！』インプレス、2022年

 串です。今週は、下記を行いました。 ・フラグの設置 ・持ち物ページの作成(仮) 　最初にフラグについてですが、これは先週から行っているものを引き続き作成しています。先週の段階では、今後増える予定で15個のフラグがあると書いていましたが、すでに19個に増えています。今週は12個目までの設置を行いました。ストーリーの進行度としては、三分の一か良くとも半分くらいかと思います。 　特に画面に大きな変化が起きたわけではないので、画像を見せるほどのこともありませんが、今週設置したフラグが分かりやすいと思われる画像を下に貼っておきます。 　上の画像は、flag7の所長室の鍵を入手するシーンです。この時は右側のベッドの周りにはキャラクターはおらず、主人公が自由に移動することができます。 　下の画像は、flag11の家でヒロインと話すシーンです。上の時と違いこの時はベッドの周りにキャラクターがいて、それぞれと主人公の会話イベントが発生します。 　次に持ち物ページの作成ですが、まだ細かい設定は何もしていませんが、とりあえずｗキーを押せば左上にページが開く、というプログラムを追加しました。 　今後目途が立った場合には、こちらに主人公が今持っているものの一覧を表示させることと、持ち物を使用するかどうかをプレイヤーに問うプログラムを作っていきたいと考えています。 今後やっていきたいこととしては ・フラグの設置 ・時間の変更 　先週書いていたサブストーリー作成も行う予定ですが、まずはメインストーリーを作成したいため、ひとまずはメインストーリーのためのフラグの設置を目標にしていきます。 　時間の変更ですが、このゲームではメインストーリーの進行度に応じて昼→夕方→夜→昼と時間を変更していきたいと考えています。現在使用している素材に重ねる形で作れるか、別の新しい素材を用意する必要があるかはまだ分かっていませんが、こちらもできれば進めていきたいと考えています。 マップ制作で使用させていただいた素材は、ぴぽや倉庫様からお借りしています。 https://pipoya.net/sozai/ ＜参考文献＞ ・田中賢一郎『ゲームで学ぶJavaScript 入門』インプレス、2015年 ・田中賢一郎『ゲームを作りながら楽しく学べるHTML5+JavaScript 入門』インプレス、2017年 ・田中賢...