3年次研究ノート　プログラミングの改造: 10月 2025

2025年10月27日月曜日

2.ブログの補足とマップ番号の変更

10/20の最初の投稿で足りなかった説明をしようと思ったので投稿します。

今後の方針

　週一回のペースを目標に更新をしたいと考えています。タイトルに番号をつけることで最初の投稿から何週間経ってるか分かりやすくなります。また、自分のモチベーションアップにも繋がると考えました。今回は第2週という意味です。

進捗紹介

・前回の課題

　前回、教材のプログラムの木がキャンバスの緑に書いてあるという点について分からなかったが、今回判明しました。fieldpaint()関数でフィールドを描画していたが、そこにある配列の値によって使う画像を変えています。そしてこれらにはif文で条件分岐がされていおり、草原は09、木は08の値として設定しているため両者は共存ができません。それに対して、黒いプレイアブルキャラクターの描画するコードはif文の外に記述していました。そのため草原が書かれた上から描画されているという関係になっていました。そのため、木の描画するコードの前に草原のコードを置いたことで草原の上に木が上書きしてある状況を作り出すことに成功しました。

・フィールドの値の役割変更

　このフィールドは縦に11、横に20の配列で構成されています。キャラクターが移動不可能な障害物が00~08、キャラクターが通行可能な草原が09、マップ遷移が10番台としています。しかし、これでは開発においてわかりにくいと感じたので変更しました。通行可能なマスを0～19、障害物を20～39、マップ遷移を40番台としました。その時、草原や木は現在600マス近くあり、とてもマスが多いため「09を01に、08を21に変更しろ」とChatGPTに指示しました。

メモ　
01　草
21　木
22　崖
23　水
40,41,42,43,44　画面遷移
画面遷移は1の位をmap番号とすることを忘れずに

改良予定

・キャラクターの移動の挙動について

・イベントの追加

参考文献

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

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

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

2025年10月20日月曜日

1.最初の投稿

はじめまして！東京経済大学経済学部のTaira.Iです。

　このブログでは、私が研究ノートで取り組んでいるプログラム開発の記録を日誌形式で公開していきます。

自己紹介

東京経済大学3年（10/20時点）、2年次から阿部弘樹准教授ゼミに所属

プログラミングに興味を持ったきっかけは、コンピューターに指示を出して動かすということをしてみたいと思ったからです。普段何気なく使っているアプリやゲームなど分かりやすいものから、意識しないとわからないシステムまで現代の社会においてこれらを動かすのにプログラミングは不可欠です。しかし、日常生活で当たり前になり、これらは誰かが作っているものであるということを忘れそうになるほど溶け込こんでいます。学習を通して日常の生活で普及しているプログラミングについて考えてみたいと思いました。

進捗紹介

研究ノートでは配布された教材を改造して、オリジナルのプログラムを作成しています。

以下が配布されたプログラムの画面です。

　　　　　　　　　　　　　　　　　　　ゲーム画面

このプログラムではキーボードの操作に従いキャラクターがフィールドを移動するプログラムです。10月20時点でのプログラムの画面は以下の通りです。

ゲーム画面

　はじめは主に見た目を変更しました。フィールドの部分を草原に変更し、さらにキャラクターを変えました。フリー画像を使い「ぴぽや倉庫」、「ドット絵世界」のコンテンツを使用しました。

黒い目が二つ付いたキャラクターはキーボードの矢印ボタンで動きます。

マップは現在、このほかに上下左右に一ずつあります。最終的にどのようなレイアウトにするかは現時点では構想中です。

現在の課題

・上記の画面ではキャラクターの背景が草背景の上に書いてあるが、教材のプログラムの木がキャンバスの緑に書いてあるという違いについてわからなかった。なるべく早く原因を解明したい。