初心者向け！3時間でミニゲームを作ろう(3)

石に乗って帰ろう

これまでの内容を振り返ってみると、ブロックの作成方法、ループを使ったブロックの効率化、関数についての知識、条件文を使って特定のブロックにトリガーされるものの定義、そして関連するプログラミングの考え方を少し学ぶことができました。
この部分では、新しいことを学ぶのではなく、問題の分析に注目します。
さて、いよいよ人を乗せる飛ぶ石が登場します。 この飛ぶ石の作り方はもうわかったと思います。

let stone = mygame.create.wall(9, 13)
stone.automove.right(16, 1, true)

しかし、コードを保存してページを更新して乗ってみると、すでに岩に飛び乗っていても、岩が動くと人形が落ちてしまうという、なんだか予想と違う展開に？人形が石の上に飛び乗ったら、石と一緒に終点まで運ぶはずです。
現実には確かにそうです。現実の人間が動いている物体の上に立つと、摩擦の存在により、物体の速度と一致するまで加速されるからです。
しかし、このゲームでは、コンピュータがこの物理学的な現象を意識していないため、ブロックとブロックの間に自然に摩擦が発生することはないのです。
他のゲームをしてキャラクターを操作するときに感じる摩擦は、ゲーム開発者が現実の物理法則に基づいてコードを書いてシミュレートしてきたことです。
このゲームでは、摩擦の模擬はしていませんので、石の上に立つと、人形が自動的に期待通りに動いてはくれません。
つまり、人形が動いているブロックの上に立って、ブロックと一緒に動くというのは、当たり前のことではなく、プログラマーが自ら作らなければならないことです。
次は、この「機能」を設計し実現することです。
前述のように、このような現象は摩擦を模擬することでコンピュータに実現する必要があるが、実際に摩擦を模擬してその問題を解くには複雑すぎるでしょう。
人が石の上に立ったときに、その石と一緒に動けばいいのですから、 他の石の上に立ったときに同じ効果が得られるかどうかを考えることなく、この一つの必要性に集中します。
この需要に基づいて、プレイヤーが人形を操作して石に飛び乗り、石から降りてくるまでの全体の流れを整理すると、次のようになります。

上の図を参照し、この部分で小人が移動する流れを感じてみてください。また、ゲーム例を体験してもいいです。
次に、小人がジャンプから石で移動するまでの具体的な筋道を詳細に分析しよう。
まず、私たちの需要をおさらいします。人が石の上に立ったときに、その石と一緒に動けます。
つまり、人が石の上に立つ（触れた）と、石が動いたら小人がすくその後に追いかけます。また小人はいつも石の1マス上にいます。 小人自身が石との接触を絶つと、石と一緒に動かなくなります。
文字通り、先ほど学んだ move.after と istouched アクションを使ってそれを実現するとすぐに思い浮かべるかもしれません。

stone.move.after = function() {
    if (human.istouched(stone)) {
        human.x = stone.x
        human.y = stone.y + 1
    }
}

簡単にできそうな気がするか？ このコードを保存してページを更新すると、実行結果を確認しましょう。 小人が石に飛び乗ったとき、小人は石を追わず、石が動いた後に落ちていることになります。
なぜ、このようになったのでしょうか？ コードの実行理路は問題ないそうですが……
構いませんよ。コードを書いていると、見た目は正しいのに実行して間違ったということがよくあります。
では、石が数回動いて、小人が石に触れるとどうなるか。ちょっと考えてみよう。
上記によって、stone.move.after関数はまず小人が石に接触したかどうかを検出します。現在の場合は接触しました。そのため、小人の位置は更新され、石に接触したまま真上に移動することになります。
ここまで問題がないですが、時間が経って、石は次の移動をします。この時、小人と石が接触しなくなるという出来事が起こります。
そのため、石が次の動きをしたときに、stone.move.after関数内の検出コードhuman.istouched(stone) が false を返し、小人の位置を変更する条件文内のコードが実行されなくなる、つまり小人が石と接触しなくなり、小人が石から落ちることになります。
このとき、石と人が接触しているかどうかを、石が動いた後のこの瞬間に実際に接触しているかどうかで判断してしまうという。
そして、先ほどの考え方の盲点が発覚します。
先ほどの分析によって、石が次の動きをしたとき小人と石はもう接触していない。しかし、論理的には、この場合小人と石が接触しているとプログラムに思わせることで、この理路をもとに「石が少し動くと小人がついてくる」ようにしたいのです。
実況と予想は違うので、「論理的な状態」を作り、論理の流れを修正・確認することで、「石が少し動くと小人がついてくる」という理想的な状態にする必要があります。
上記の分析をより分かりやすいフローチャートにまとめました（図中の「状態」はすべて「論理状態」を意味します）。

上記のフローチャートを擬似コードで表現してみましょう。

// stone.move.after 関数は上の図の
// 石が移動する -> 論理的な状態が【触れている】であれば，小人が石を追いかけて移動す
//ることを実現
stone.move.after = function() {
    if (小人が石に触れている) {
        human.x = stone.x
        human.y = stone.y + 1
    }
}
// human.move.after 関数は上の図の「小人が石に触れているかどうか」と問うことで、「小人
//が石と接触しているか」という論理状態を変更
human.move.after = function() {
    if (human.istouched(stone)) {
        「石に触れている」と小人の論理状態をマーク
    } else {
        「石に触れていない」と小人の論理状態をマーク
    }
}

この論理状態をhuman.move.after関数で修正（定義）して、stone.move.afterで使用することがわかります。
では、この論理状態をどのように表現すればいいのでしょうか。実は、本文の冒頭で学んだように。

let state = false

小人の論理状態が石に触れているとき、 stateをtrueとし、その逆に、 stateをfalseとします。小人の論理状態を知る必要がある場合、 stateにアクセスし、それがtrueであれば、小人の位置を同期して変更します。

let state = false
stone.move.after = function() {
    if (state) {
        human.x = stone.x
        human.y = stone.y + 1
    }
}
human.move.after = function() {
    // 前の部分で書かれた他のコードも忘れないで
    if (human.istouched(stone)) {
        state = true
    } else {
        state = false
    }
}

これでゲーム全体が完成しました! あなたの成果をお楽しみください　：D

それだけ？

このミニゲームを一緒に書い上げたてどんな感じですか？
「なんだこれ！簡単すぎる!」、あるいは、「なるほど、これは面白い 」と思う？
とにかく、あなたはとても素晴らしい！！！
上記のコースで、あなたは常にmygameとそれが提供するさまざまなブロックを中心にプログラミングしています。
● mygameが提供するアクションをもとに、ブロックを作成する
● ブロックが提供するアクションで、ブロックたちが接触しているか、重なり合っているかを判断する
● ブロックのプロパティを変更することで、ブロックの外観や状態を変える
● プログラミング言語が提供する論理構造でロジックを表現する
これで、ゲーム全体のコーディングが完了しました。
もし興味があれば、説明書を参考にしながら、自分の創造力を発揮してもっと多いのミニゲームを設計・開発することもできます。

おめでとう！

あなたはこのコースをすべて修了しました! プログラミングそのものを体験するだけでなく、実際に、問題を分析し、解決策を設計し、問題を解決し、またマニュアルを参照しチームで決めた文書や仕様に沿ってコーディングするなど、プロのプログラマーの仕事を一通り体験しました。
このコースを通して、プログラミングの楽しさを少しは味わっていただけたのではないかと思います。プログラミングは積み木のようなもので、決して神秘的なものではありません。
しかし、それはまだ始まりに過ぎません。
実際の現場では、プロのプログラマーは、より複雑な環境、より複雑な要件、コード品質への高い要求に対処しなければならないことが多く、彼らが考えている以上に複雑な問題を解決しなければならないのです。
ここから少しずつコンピュータについて学んでいくと、それは思ったより難しくなく、怖くもないことがわかると思います。
がんばれー ！

添付のファイル

1.パターンイラスト
2.独自のパターンを作る：your-first-experience-of-programming-mainファイルで
3.説明書:your-first-experience-of-programming-mainファイルで
4.単語リスト:your-first-experience-of-programming-mainファイルで
6.ミニゲームの例