Learn programming.

物語に含みを持たせたかったので、タイトル画面から進むと名前の分からない人物からの意味深な言葉を足しておきました。 最後のマップで光の方に進むと、Map0の初期位置にワープし、主人公であるトーマが「え？？？」と発言し、一歩も動けなくなります。 設定するの忘れてその仕様になったのですが、不気味でそれらしい終わり方だなと感じてしまったのでこれを正規のエンディングとしました。 プログラム自体は今までに使っていたものの応用なので特に紹介はしません。 ということでストーリーについては以上です。 次回はやっとこさの最終回です。 それでは。 参考文献 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

ストーリーの掴みに必要な主人公たちの会話を追加し、そのために会話のプログラムに改良を加えました。 こんな感じです。イベントが起こるタイルに進んだ状態でスペースを押すことで会話が始まり、同じくスペースで会話を進めることができます。会話の途中でプレイヤーが動いて会話が途絶えてしまう可能性があったので、それも予防しています。 以下は該当プログラムです。 今回のコードもchatgptを利用しましたが、望む形にするのに大変苦労しました...。さらに今回扱う会話イベントの数も中々あるので、これを他にも適用させるために理解する必要もあり、Aiに助けられ、Aiに苦しめられる体験を味わいました。今回のコードは私も理解しきれてない部分があるので、解説はできません。ご了承ください。m(_ _)m というわけで、今回はこんな感じで終わります。お疲れ様です。 参考文献 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

二つ目のメインイベントである謎の部屋への入り口を開けるプログラムを作成しました。 タンスの方に進むと「奥の壁なんか違和感あるな、このタンス動かしてみるか。」というテキストが表示され、タンスを動かすことができます。 その状態で壁の方に進むと新たなテキストが表示されます。 この処理は前回の斧と同様に、持っていない場合のセリフです。 ここにあるツルハシを拾い、先程の岩壁に進むと宝石の間に続く穴を空けることが できます。 プログラムに関しては前回の柵を斧で壊すイベントと大きな違いは無いです。 ただ、壁を壊すためにタンスを動かした後の地面に進む必要があったので、歩行可能タイルにフラグを入れてタンスを動かした後、壁が開いた後にその地面を歩けるようにしています。 今回はこんな感じで終わります。 おそらくこのブログの投稿は次回かその次で終わるかと思います。ですが、未だにこのゲームの帰着をどうしようか迷っています。やりたい演出などはあるのですが、やりたいことができるとは限らないのでどこで割り切るかを模索中です。とはいえ、本ゲーム内でやってみたかったメインイベントの動作は今回で終わったので、あとは自分の納得のできる形で終われればといった感じです。 少々長くなりましたが、お疲れさまでした。次回もよろしくお願いします。 参考文献 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

1つ目のイベントを作成しました。 斧を持っていない状態でこのフェンスに進むとこのイベントが発生するようになっています。 その斧は家の近くの切り株に立てかけられており、斧の方に進むと「この斧を持っていこう。」と表示され、取ることができます。 拾うとマップ上から消え、その状態でもう一度拾おうとすると「斧はもう持っている。」と表示されるようになっています。 斧を拾った後先程のフェンスに進むと「斧が壊れないでくれよ。」というセリフに変わり、フェンスを壊して廃坑の中に入れるようになります。 以下は該当プログラムです。 ここには載せてないですが、プログラムの上の方に"fgHaveAxe"などのフラグを列挙してまとめてあります。初期状態で"false"として、その状態では斧が置いてあるマップが描画され、これが"true"になると斧を手に入れたマップが描画されるようになっています。フェンスの方もマップの描画に関しては同じ感じです。 下のプログラムはeventpaint関数の中身で、斧を持っているかフェンスが壊れているかなどを判定し、表示させるセリフを変えています。例えば、"fgHaveAxe == true && fgBreakFence == false"は、斧は持っていてフェンスは壊れていない状態でフェンスの方に進んだ場合に表示されるテキストです。その後"fgBreakFence"を"true"にして終了です。他も矛盾が生まれないように条件分岐がされているはずです。 余談ですが、元々のイベント処理だとマップを更新した後にセリフの無いテキストボックスが表示されるという問題が発生していたので、別に"setContext"関数を用意してセリフの前に毎回呼び出しています。 今回は以上です。次回は2つ目のメインイベントについてです。 お疲れさまでしたー。 参考文献 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

相当今更ですが、やはり正面向いたままマップを移動する様子はあまりに変なので、歩く方向で主人公の見た目が変わるようにしました。 プログラムの説明をしていきます。 方法はとてもシンプルで変数"boyImage"を用意し、fieldkeydownの上下左右それぞれに別々の歩行グラフィック画像を対応させているだけです。初期状態では"boy_down"にしています。今の所問題は出てないのでこのまま行こうと思ってます。 短いですが、今回は細かい改良なのでこんなところで。 お疲れさまでしたー。 参考文献 素材： ぴぽや倉庫  https://pipoya.net/sozai/ ドット絵世界  https://yms.main.jp/

やはりゲーム画面から急に始まるゲームは変だということで、タイトル画面を作りました。 本ゲームを作り始める前から、タイトルは長い言葉の方がそれっぽくなって何となくカッコいいのでは？？！ という極めて浅ましい考えが浮かんでしまい、その欲求に抗えませんでした。 以下は該当するコードです。 まず、100行目で変数"titlescreen"を呼び出し、ゲーム開始時に表示するために初期状態でtrueとしています。そして新たに"TitleKeydown"関数を用意し、いずれかのキー入力で"TitleScreen"を無効にし、通常のゲーム画面、キー入力処理を有効にしています。 118行目から"showtitlescreen"関数の中身を作っています。 ざっくりとした説明にはなりますが、119, 120行目でタイトル画面、背景を用意し、121行目から125行目で文字の設定を行っています。このようにして用意したものを106行目で動かしています。 分かる人は分かると思いますが、今回chatgptを利用してプログラムを組みました。しかし、タイトル画面から動かなくなったり、ゲームが始まったとしてもプレイヤーが動けなくなってしまったりと、色々な不都合が起きました。結果として、ほぼ丸々コードの中身を修正する羽目になるという、便利ではあるものの上手く扱うには、その能力を予め持ち合わせていることが必要なんだと感じる一日でした。 タイトル名に関しては、今のところ特に深い意味が無く、デザインとしても素朴な感じになってしまっているのですが、この雰囲気も気に入っているので、ある程度の改変を加えつつ、これからの展開で意味を持たせて、 何らかの形でタイトル回収ができたらなと考えています。 とりあえず今回はここまでとします。お疲れさまでした。 参考文献 田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス, 2015年 田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス, 2017年 田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版〜ブラウザゲームづくりでHTML&CSSも身につく！』インプレス, 2022 年