持ち物の削除と時間変化

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

・サブストーリーの持ち物の管理

・ストーリー進行に伴う時間の変化


　まず、サブストーリーでの持ち物の管理についてですが、以前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/blog/22295　閲覧日：2025年12月13日)

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

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

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



このブログの人気の投稿

はじめていきます

 　本日からゼミの課題で制作しているゲームの開発日誌を更新していきます。 　東京経済大学３年の串です。今回は最初の投稿なので、自己紹介などを書いていきます。 　プログラミング歴は１年半の初心者です。プログラミングに興味を持ったきっかけとしては、もともと創作が好きなこともあり、自分で考えた物語を表現する手段の一つとしてゲームという選択肢があると思ったことです。高校生の頃は演劇の脚本を書いていましたが、自分がいざゲームを作るとなって改めて考えた時に、表現媒体が変われば表現方法も変わるため、物語の伝わり方が変わってくると思いました。自分の作るゲームでは、今までやったことのないようなゲームならではの描き方をしていきたいと考えています。 　ブログのタイトルの通り、ゲームタイトルは「Third」です。Thirdという組織に所属している主人公が、与えられた任務を遂行していくゲームです。主人公がマップを移動し、キャラクターと会話をしながら物語を進めていく流れです。 　分からないことだらけで試行錯誤を繰り返していくと思いますが、出来る限り理想のゲームを作れるようにしていきたいと思います。これからよろしくお願いします。 ＜参考文献＞ ・田中賢一郎『ゲームで学ぶJavaScript 入門』インプレス、2015年 ・田中賢一郎『ゲームを作りながら楽しく学べるHTML5+JavaScript 入門』インプレス、2017年 ・田中賢一郎『ゲームで学ぶJavaScript 入門　増補改訂版～ブラウザゲームづくりでHTML＆CSSも身につく！』インプレス、2022年
続きを読む

会話画面変更とマップ修正

イメージ
 　串です。今週は会話画面の変更とマップの細かな修正を行いました。 　まず会話画面の変更ですが、下の左から右へ変更しました。 　　　　　　　 　画面中央に黒背景で表示していたものを、画面下に透過した背景とともに表示しています。キャラクターの画像も左下に移動させ、透過素材に変更しました。 左の画像ではわかりませんが、主人公とキャラクターがマップ上で重なるようになっていたため、重ならないよう変更しました。 　マップは、分かりづらいですが、繋がっていなかった壁を繋げるなどの修正を行いました。 今後やりたいこと ・フラグの設置 ・サブストーリーの作成 ・持ち物の管理 　前回やろうと思っていたメインストーリーの練り直しがかなり進んだので、実際にストーリーを入れたフラグなどの設置を行っていきたいと思います。サブストーリーは簡単な謎解きを行って、アイテムをもらうという流れで作っていきたいと思います。また、主人公の持ち物が増えていった時に、持ち物一覧などで参照できるページも、作れたら作っていきたいと考えています。 マップ制作で使用させていただいた素材は、ぴぽや倉庫様からお借りしています。 https://pipoya.net/sozai/ ＜参考文献＞ 　・田中賢一郎『ゲームで学ぶJavaScript 入門』インプレス、2015年 ・田中賢一郎『ゲームを作りながら楽しく学べるHTML5+JavaScript 入門』インプレス、2017年 ・田中賢一郎『ゲームで学ぶJavaScript 入門　増補改訂版～ブラウザゲームづくりでHTML＆CSSも身につく！』インプレス、2022年
続きを読む

マップ(仮)作成と今後の予定

イメージ
 　ブログを始めるにあたって、ゲームで必要になるマップの大まかな枠組みは作成しておこうと考えていました。今のところ作成済みのマップは15ステージです。以下は初期画面になります。 　ここは大きな変更を加える予定はないので、完成時に近いマップだと思います。中央付近の黒髪の青年が主人公で、上にいる女の子がヒロインです。 　マップは、フラグの設置やイベントに関わるものの他、主人公が通れる道などしか配置していないため、装飾類は今後増やしていこうと思っています。 今後やっていきたいこと ・会話画面にページを作る ・主人公と建物との重なりを自然にする ・ストーリーの練り直し 　キャラクターとの会話画面ですが、現在は一画面のみでの表示となっているため、エンターキーやクリックなどで次ページに移動させ、もっとキャラクターと会話している感じを出したいと考えています。 　 　現在主人公をマップの上に重ねているだけなので、ここに奥行きを出すため手前の壁は主人公の上に表示されるようにしたいと考えています。 　また、全体のストーリーや実際に操作しながらかかる時間などを考えていたところ、物語終盤でのヒロインとの親密度が低いままになってしまいそうだと感じたため、もっとヒロインとのイベントを増やしていこうと思っています。 　他にも、ゲームはプレイヤーに選択肢があるところが面白いと感じたため、フラグなどで強制することもできますが、あえて強制のない本筋とは関係ない小話も用意したいなと考えています。 　 マップ制作で使用させていただいた素材は、ぴぽや倉庫様からお借りしています。 https://pipoya.net/sozai/ ＜参考文献＞ 　・田中賢一郎『ゲームで学ぶJavaScript 入門』インプレス、2015年 ・田中賢一郎『ゲームを作りながら楽しく学べるHTML5+JavaScript 入門』インプレス、2017年 ・田中賢一郎『ゲームで学ぶJavaScript 入門　増補改訂版～ブラウザゲームづくりでHTML＆CSSも身につく！』インプレス、2022年
続きを読む