ここでは私が即興で作ったヘビゲームの作り方を掲載します。ゲーム作ったこと無くても作れるようなるべく詳しく解説します。なお操作はキーボードのみでタップはないのでそこらへんは各々実装してほしいと思います。(一応最後に作り方だけ載せます。)
追記:やっぱ実装しました。モバイル対応の方は下にダウンロードリンクを貼り付けてます。
ちなみにこれは私が作ったやつをわかりやすくもう一度組み直しながら書いています。だいぶ繊細なプロジェクトでタイミングが少しでもずれるとバラバラにバグってしまうので、組み直して上手く動かない可能性があります(笑)
そのときは最後にしっかり動作する版をあげるので、自力で読み取ってほしいです。そちらは説明用に作ってないので、要らないブロックや名前がしっかりしてない変数が多く、読みづらいと思います。上手くできるよう頑張ります。
そのときは最後にしっかり動作する版をあげるので、自力で読み取ってほしいです。そちらは説明用に作ってないので、要らないブロックや名前がしっかりしてない変数が多く、読みづらいと思います。上手くできるよう頑張ります。
ここで使う用語集
この用語は説明無しで書かれる可能性があるので知らない人は先にこれを読んで覚えてください
- X Xまたはx、これはプロゼミでいう「よこのいち」を表している。
- Y Yまたはy、これはプロゼミでいう「たてのいち」を表している。
- UI User Interfaceの略(?)。要するに、見た目
- フラグ変数 0か1を値として持ち、条件を分岐するのに使われる変数
- フラグを立てる フラグ変数の値を1(真またはTrue)にする
- フラグを折る フラグ変数の値を0(偽またはFalse)にする
別に覚えなくていいけど出てくる用語集
この用語は頻度が少ないし重要ではないのですが一応説明するつもりはないのでここに書きます。
- FIFO First-in, First-outの略。最初に入ってきたものが最初に出ていくよということ。対義語にLIFO(Last-in, First-out)がある。
使う素材
素材は基本的に64×64ピクセルの正方形内に描かれており、余白などの影響でプロゼミにアップロードした時、若干中心位置がずれるのでそこは手動調整をするか、あらかじめ64×64の正方形をすごく薄い色で塗りつぶしておくことで中心位置をあわせましょう。
滑らかな動作を実現するために考えた実装方針
キーとなるパーツは頭、首、尾、そしてその他の胴体です。基本的に頭、首、尾を同期して動かし、胴体はその場固定することで、メモリの使用量を減らします。更に、首と尾を再利用することで、キャラを呼び出す回数が最小限になり、安定した動作につながります。
基本の動き(直進)
曲がるときの動き
アイテムをとってヘビの長さをのばすとき
これらの3つを実装することでヘビの滑らかな動きを軽量に再現することができると考えました。
実装
まず重要事項として今回の1マスの大きさは32×32ピクセルとします。よってキャラは全員おおきさを1/2にします。
キャラなどを構築する
使用するキャラ：はいけい、地面、ヘビ、アイテム
まずはこれらのキャラを作ってくださいそれぞれのキャラのコスチュームはこちらです。
まずは地面のキャラ、地面のキャラは二種類の地面コスチュームを置きます。
まずは地面のキャラ、地面のキャラは二種類の地面コスチュームを置きます。
次にヘビです。ヘビでは最初に頭、次に直進する胴体、最後に曲がる胴体を置きます。
ここで注意してほしいのは、頭と曲がるコスチュームでは、中心位置がずれるので僅かに調整を行っています。
自作キャラを作るときも64×64の正方形の中心がコスチュームの中心に来るように調整を行ってください。
そうしないと、あとでヘビのからだが微妙にずれることになります。
ここで注意してほしいのは、頭と曲がるコスチュームでは、中心位置がずれるので僅かに調整を行っています。
自作キャラを作るときも64×64の正方形の中心がコスチュームの中心に来るように調整を行ってください。
そうしないと、あとでヘビのからだが微妙にずれることになります。
最後にアイテム(りんご)です。これはコスチュームが一つだけなので特に言うことはないです。
盤面を作るなどの初期化処理
今回は盤面を11×11マスとします。地面の色を交互に変える処理に少し工夫がなされているので、よかったらじっくり考えてみてください。
まず、スタートしたを使ってスタートしたときの処理を書き込む場所を作ります。次に、へんすう「初期化X」と「初期化Y」を作ります。そしてこれらをそれぞれ240、55で初期化します。これを行った後の図が下のです。
更に、地面の色を変えるためのフラグ(0と1でYES、NOを表す変数)を作ります。フラグの名前は「地面の色」とします。これらの変更を加えたのが下図です。
次に実際に地面を画面の中央に11×11で呼び出す処理を書きます。こうした後のが下図です。
ここで注目してほしいのが「地面の色」を「地面の色」が0にする、という部分です。実はこのコードは
「地面の色」が0のとき「地面の色」を1にし、「地面の色」が1のとき「地面の色」を0にする
という処理をしています。ここを変にいじるとうまく動かない可能性大なので、しっかり写しましょう。
「地面の色」が0のとき「地面の色」を1にし、「地面の色」が1のとき「地面の色」を0にする
という処理をしています。ここを変にいじるとうまく動かない可能性大なので、しっかり写しましょう。
今書いてて気づきましたがflag ^ 1(^はxor演算子)は not flag というコードで実装できましたね。プロゼミでいうと、
「地面の色」ではない というブロックでこの処理を代替できるということです。動かしてることの本質は同じですね。
「地面の色」ではない というブロックでこの処理を代替できるということです。動かしてることの本質は同じですね。
さて、これで背景の処理は一旦終わりにして、地面のキャラのプログラムを書きましょう。今のままだと実行してもでかい緑の四角がたくさん呼び出されるだけなので、これをチェック柄の盤面に変えていきます。
まず、地面のキャラのプログラム欄に移動して、「よびだされた」ブロックを置きましょう。そこで「おおきさ」を0.5、あらかじめ「よびだされた」ブロックの横のプラスをタップして出した「ひきすう１」を使って、
「ひきすう１」+ 1番目のポーズにするを追加してください。更に、これは装飾なので、「ステルス」を1にするも入れてください。これらを実装したのが下図です。
まず、地面のキャラのプログラム欄に移動して、「よびだされた」ブロックを置きましょう。そこで「おおきさ」を0.5、あらかじめ「よびだされた」ブロックの横のプラスをタップして出した「ひきすう１」を使って、
「ひきすう１」+ 1番目のポーズにするを追加してください。更に、これは装飾なので、「ステルス」を1にするも入れてください。これらを実装したのが下図です。
更に、かさなりのじゅんばんも調整します
ここまできたら、チェック柄の盤面ができてるはず!実行してみてみましょう!
おっと...設定を変えるのを忘れていました。今回ではそんなにキャラも使わないので下のように設定をいじればOKです。
これで実行すればしっかりチェック柄の盤面ができるはずです!今、実行してみて以下のような形になっていればここまでの段階はOKです!
よく使うツールを定義する
背景でよく使うツールを定義します。これらは「あたいブロック」であるということに注意してください。気をつけてください。これらは背景に作ってください。間違えた場所に作ると作り直しになります。
まず、盤面をそれぞれ0~10の数値を２つ使って表すこととします(以後、情報座標と呼ぶ)。次の図のように(なお、座標はX,Yの形式で書いています)
途中で1,2 1,3 1,4...となっていますが正確には1,2 2,2 3,2 4,2...でした。混乱させてしまい、すみません
途中で1,2 1,3 1,4...となっていますが正確には1,2 2,2 3,2 4,2...でした。混乱させてしまい、すみません
情報座標を実際の座標に変換するツール
- ざひょうX
このツールは情報座標のXを実際の座標のXに変換するツールです。以下のように実装してください。
- ざひょうY
このツールは情報座標のYを実際の座標のYに変換するツールです。以下のように実装してください。
情報座標からステージの配列の添字(インデックス)を作るツール
そえじ
このツールは情報座標X,Yから配列の添字を計算します。今回はただの1次元配列なので、あらかじめ二次元の座標を1次元にする必要があります。この話が難しい人にとってはとりあえず「ステージ」という配列にアクセスする時はこのツールを絶対に通してくださいということです。←これに関わることの詳細は後で話します。今は以下のように実装してください。
実際の座標を情報座標に変換するツール
一番最初にあげたものの逆バージョンです。名前も最初に逆だけつけています。
- 逆ざひょうX
実際の座標のXから情報座標のXを計算します。以下のように組んでください。
- 逆ざひょうY
実際の座標のYから情報座標のYを計算します。以下のように組んでください。
ツール実装おわり
うまくできましたか?これらが全て「あたいブロック」(角が丸いやつ)で背景に作っているかを今一度確認してください。これらは後々役に立ちます。
ステージを初期化(データの面で)
さっきはUIの面で盤面を初期化しましたが、今回はデータや実際にゲーム内で扱うステージの情報を初期化します。
まず、当たり判定用のステージ盤面を用意します。変数名は「ステージ」です。これは配列で、中には0か1を格納し、1のときにそこにヘビがいることを示します。
ステージを空っぽの配列にして、中に121コの0を詰め込みます。なぜ121コかというと盤面にある地面の数、すなわちマス目の数が11×11で121コあるからです。
ステージを空っぽの配列にして、中に121コの0を詰め込みます。なぜ121コかというと盤面にある地面の数、すなわちマス目の数が11×11で121コあるからです。
以下のように地面をチェック柄に呼び出した部分の下に「ステージをからっぽのはいれつにする」の部分から下のコードを付け足してください。
次にヘビを初期位置に配置します。ここではとあるヘビゲームと同じように左中央から右向きにヘビを配置します。初期の長さは頭も含めて3です。以下のコードを先程のステージ配列の初期化の下に付け足してください。
実はヘビには引数5と6が存在するのですが、初期状態ではこれらを省略しても構わないので省略します。ちなみに引数を省略するとよくわからない偽と評価される値が受け取る側の変数に格納されます。
引数の説明は画像内に書いてあるので割愛しますが、ここでは「ざひょうX」と「ざひょうY」を間違えないようにしてほしいです。
引数の説明は画像内に書いてあるので割愛しますが、ここでは「ざひょうX」と「ざひょうY」を間違えないようにしてほしいです。
いよいよヘビが出てきましたね!次はヘビの初期設定を行います。まずは「向き」という変数を作ります。これは名前の通り、キャラの向きを格納する変数ですね。そして以下のように組んでください。
今度はヘビが自分がどのパーツであるかを認識できるようにそれぞれのフラグを作ります。「mode」などの変数に文字列"頭"、などを入れて区別するのもいいですが、今回は「頭」、「首」、「尾」の3つフラグを作ることにします。
作成する変数
- 頭
- 首
- 尾
それらの初期化も行ったコードが下図です。
頭だけ引数の意味が逆なので注意が必要です。なお頭だけ手前に来るように調整もしています。
頭だけ引数の意味が逆なので注意が必要です。なお頭だけ手前に来るように調整もしています。
ここまでしっかりできていれば実行してみたとき、次のようになるはずです。
しっかりヘビが初期位置に表示されていたら次はヘビを動かします。まずは直進する部分のみやっていきましょう。
メインの移動処理(直進のみ)
ここでは上のフローチャートに示されるメインの動き処理について実装していきます。
ヘビは毎回1つの動きを「動く」というメッセージに詰め込んで組みます。(「動く」というのはメッセージの名前で後で作成します。)はいけいがヘビが1マス進んだあとすぐさま「動く」を送って次のマスへ動かすことでヘビの直進を作ります。「動く」メッセージの中の処理としては冒頭の方針の基本の動きの図を実装していく形となります。
ヘビは毎回1つの動きを「動く」というメッセージに詰め込んで組みます。(「動く」というのはメッセージの名前で後で作成します。)はいけいがヘビが1マス進んだあとすぐさま「動く」を送って次のマスへ動かすことでヘビの直進を作ります。「動く」メッセージの中の処理としては冒頭の方針の基本の動きの図を実装していく形となります。
では「動く」メッセージを作成して、ヘビのキャラ内に受け取るブロックを置きます。そして役割ごとに条件分岐させたのが次の図です。
次に頭の部分の処理を作りましょう。
まず、全員に自分が今いる位置(これが次の首の場所となる)を告知するようにします。これを「元いた位置」メッセージを使って作ることとします。今は一旦受け取る側の処理を書かずに送る側の実装だけしましょう。自分が今いる位置を送るわけですから２つの引数に自分の座標を入れます。
次に1マス分動く処理を作ります。今回はヘビの動く速度を4とします。ここの速度は好きに変えてもらってよいですが、必ず32を速度で割ったあまりが整数になるようにしてください。そうでないと、座標のミリ単位でのズレが生じ、うまく次の処理を引き継げないことがあります。
その次に元いた位置を更新する処理が挟まっていますが、正直頭は元いた位置を使うことはなく要らないので実装しません。
最後にゲームオーバー判定ですがこれは背景にゲームオーバーかメッセージを送るだけにしましょう。今頭がいる位置を送る必要があるので、こちらも2つの引数今の自分の座標を入れます。
まず、全員に自分が今いる位置(これが次の首の場所となる)を告知するようにします。これを「元いた位置」メッセージを使って作ることとします。今は一旦受け取る側の処理を書かずに送る側の実装だけしましょう。自分が今いる位置を送るわけですから２つの引数に自分の座標を入れます。
次に1マス分動く処理を作ります。今回はヘビの動く速度を4とします。ここの速度は好きに変えてもらってよいですが、必ず32を速度で割ったあまりが整数になるようにしてください。そうでないと、座標のミリ単位でのズレが生じ、うまく次の処理を引き継げないことがあります。
その次に元いた位置を更新する処理が挟まっていますが、正直頭は元いた位置を使うことはなく要らないので実装しません。
最後にゲームオーバー判定ですがこれは背景にゲームオーバーかメッセージを送るだけにしましょう。今頭がいる位置を送る必要があるので、こちらも2つの引数今の自分の座標を入れます。
これらを実装したのが次図です。
今度は首の部分の処理です。こちらもそんなに書く量が多いわけではないので大変ではないです。まず1マス分動きます。ここでの速度は頭の速度と絶対におなじになるようにしてください。動き終わったら首としての役目は終わりなので「首」フラグを折ります。最後に背景に自分の今いる位置を新しく当たり判定に追加するようにメッセージを送ります。
これらを実装したのが次の図です。
最後に尾の処理ですが、ここはちょっと複雑なので一旦食べる時の処理は置いといて通常の処理だけ書きます。
まず尻尾をのばすフラグ「食べた」を作ります。
次に、背景に当たり判定を消すようにメッセージを送り、1マス分動きます。
動いたら、今いる位置のパーツに次の尻尾になるようメッセージを送って、自分の尾のフラグを折り、首になります。
まず尻尾をのばすフラグ「食べた」を作ります。
次に、背景に当たり判定を消すようにメッセージを送り、1マス分動きます。
動いたら、今いる位置のパーツに次の尻尾になるようメッセージを送って、自分の尾のフラグを折り、首になります。
ここで首に移動するとき、あらかじめ頭から通知された座標を使うので、これらを格納する変数「首の位置X」「首の位置Y」を作ります。
これらを実装したのが次図です。
新しく「食べた」という変数を作ったので初期化しましょう。それ以外は初期化する必要がない(使用する直前に必ず値が書き込まれる)のでOKです。次のようにヘビの呼び出されたコードに付け足してください。
次はさっき送る側を実装したメッセージたちの受け取る側のコードも書いていきましょう。これらは全部ヘビのキャラの中に書いてください。
- 元いた位置
頭が元いた位置(次の首の位置)を告知しているので「首の位置X」「首の位置Y」を更新しましょう。
- 次の尾を教える
移動後の尾と位置が一緒のものが次の尾なので、X,Yが全て一致しているか判定し、一致しているなら尾のフラグを立てましょう。
これを実装したのが次の図です。
ここまできたら背景に動かすためのコードを追加してヘビの動きを見てみましょう。とりあえず次のコードを「スタートした」
のコードの一番下に付け足してください。
のコードの一番下に付け足してください。
こうして次の動画のようにヘビがちぎれずに画面の外まで動けばここまでの処理はOKです。
ヘビが動いてるプレビュー動画
ヘビが動いてるプレビュー動画
入力を受け取る
曲がる処理を作る前に先に入力を受け取る処理を作りましょう。ここにまずキーボード版のコードを載せます。
新しく「入力」という変数を作ってください。これは配列にする予定なので、呼び出されたとき空の配列に初期化してください。
次のように指定されたキーが押される事に進みたい方向の角度を「入力」の中に入れます。
次のように呼び出されたところの一番下の部分に入力を配列に初期化するコードを足しましょう。
入力では配列にキーボード入力を入れてマス移動をするごとに左端から入れていた入力を取り出して向きを変えます。これはFIFOなのでキューと同じですが、プロゼミ内でキューを実装するのはむずかしいので今回はポインタを動かす方式で組もうと思います。
完成作品
何を使うのが正解かわからないので色々なサイトで共有したリンクをあげます。
バグがあったので更新しました。(2026/3/28)
バグがあったので更新しました。(2026/3/28)
モバイルの方はこちら
コメント
- 明日からいなくなるので、このページの更新が1週間ほど止まります。 -- eclipse (2026-03-20 18:11:24)
- このページになにか不備や不明な点があったら、コメントで教えてください -- eclipse (2026-03-20 18:12:44)
- すみません。編集過程でみなさんのコメントが消えてしまっているようです -- eclipse (2026-03-20 18:29:33)
- 名無しさんが参考に滑らかな動きの作り方をあげていたように見えました -- eclipse (2026-03-20 18:30:08)
- 定義の引数は_Xのようにアンダーバー(_)をつけた方がいいよ(公式がオセロのやつで勧めてる) -- 名無しさん (2026-03-20 18:30:34)
- この未完成のプロジェクトを見てくださってありがとうございます!この企画では自前で滑らかな動きを実装しているので参考を有効活用できず申し訳ないです... -- eclipse (2026-03-20 18:31:32)
- 定義の引数の記述の推奨方法は知りませんでした!今度から実装してみようと思います。ですがこの作品ではもう既に記述してあるものが全てなので次回から使わせてもらおうと思います! -- eclipse (2026-03-20 18:32:38)
- 先に完成作品を上げようかな... -- eclipse (2026-03-20 18:33:22)
- 完成作品を上げたので、これを参考にしてもらっても構いません -- eclipse (2026-03-20 18:41:26)
- 多分滑らかに動くはず... -- eclipse (2026-03-20 18:41:44)
- マスごとに少しカクつくのはご容赦ください -- eclipse (2026-03-20 18:42:07)
- あ、完成作品は手抜きなので、キーボードでしかプレイできません。申し訳ないです -- eclipse (2026-03-20 18:42:38)
- ギガファイルとDrop box両方対応していない人向けにファイルなう版用意したhttps://d.kuku.lu/ucym2wvjp -- 名無しさん (2026-03-20 21:04:54)
- ありがとうございます! -- eclipse (2026-03-20 21:22:10)
- これを記事自体に埋め込んでもよろしいでしょうか? -- eclipse (2026-03-20 21:22:30)
- あと完成版は手抜きなのでアイテムがめり込んだりします。あくまでこの記事はヘビの動きをメインにしたものなので -- eclipse (2026-03-20 21:40:27)
- ヘビがちぎれたwhttps://d.kuku.lu/gzyg428mz -- 名無しさん (2026-03-21 14:24:10)
- 古いファイルのほうを出してしまったかもしれません -- eclipse (2026-03-22 07:57:15)
- 後でもう一度やってみます -- eclipse (2026-03-22 07:57:42)
- それでもだめなら環境の差による動作不良が考えられるので再度調整します -- eclipse (2026-03-22 07:59:11)
- もう一度ギガファイルからDLして読み込んでみたけどちぎれる -- 名無しさん (2026-03-24 21:29:02)
- 多分タイミングのズレです。僕の環境があまりにもひどすぎるのでタイミングが変になってるかもしれません(笑) -- eclipse (2026-03-26 09:25:47)
- 今修正したので上げ直します -- eclipse (2026-03-27 23:59:11)
- これで試してみてもらえませんか -- eclipse (2026-03-28 00:04:12)
- ちぎれなくなった(現状だとprozemiprojが prozemip.zipになるので圧縮してから送ることを推奨します) -- 名無しさん (2026-03-30 09:00:44)
- ありがとうございます!ちなみに圧縮する意図はサイズを小さくするということでOKでしょうか? -- eclipse (2026-03-30 13:40:19)
- ↑それに加えて、バグ防止のためという意図な気がする -- iPadのプログラミング (2026-06-25 19:29:22)
