🐱

FileMakerで2次元配列ゲームの作り方(中編)

2021/12/10に公開約3,900字

今回は中編(実践編)です。

※スクリプトを一部修正しました。

かなり長くなりそうでしたので大人の事情でさらに分けました、お許し下さい(
前編はコチラです。
https://zenn.dev/ontherocks_plz/articles/c4e1fbd70e263c
今回の中編では核となる処理、つまり

  1. エサの配置
  2. スネークの動き

この2点について解説していきたいと思います。
とは言え、前編でも述べましたがjsでガリガリしたりせず、あくまでもネイティブのスクリプトステップのみで済ませる方向ですので、どなたでも簡単に再現して頂けます。


エサのランダム配置

エサはランダムに配置されますが、ランダム...と言うくらいですから、Random関数を使います。Random関数は、0以上1未満をランダムに返却する関数です。
0.0392...とか
0.1096...とか
0.9644...とか
とにかく、0以上1未満です。

もう一度、ポータル盤面を見てみましょう。

このようにポータル盤面は1~10行 1~10列ですので、座標は行列共にそれぞれ1~10の整数値に収める必要があります。ということで、Random関数で返却される値を10倍して、その整数部分に1を加算すれば良い感じになります。

計算式
Int( Random * 10 ) + 1

Int関数は整数値部分のみを返却してくれますので、上記例の「0.0392...、0.1096...、0.9644...」で言えば10倍して整数値部分に+1すれば、それぞれ「1、2、10」という値が得られ、1~10の範囲に数値が収まります。

余談ですが、Random関数を使う機会は普通あまりないので、慣れていないと取り回しに意外と悩みますよね。指定範囲に収めるには...と。大丈夫です私も毎回悩みます。

では実際に、ランダム配置の動きを見てみます。スクリプトdraw.apple

$$appleLocateの設定とポータルの更新

$$appleLocate
Let ( 

[
	~row = Int ( Random * 10 ) + 1 ;
	~col = Int ( Random * 10 ) + 1
];

JSONSetElement ( "" ;
	[ "[" & ~row & "][" & ~col & "]" ; 1 ; 2 ]
 )

 )

行番号、列番号、共に1~10の値をランダムに生成しますから、このスクリプトを実行する度にエサがランダムに配置されるハズです。

スネークがエサを食べる度に、新たなエサはこのようなスクリプトで呼び出せば良いことになります。しかし実際には、スネークはエサを食べると伸びる為、どこにエサが配置されたかという情報は保持しておく必要があります。ただ、その辺りは追々。


スネークの基本の動き

次にスネークの動きですが、スネークは止まれません。プレイヤーが出来ることは方向転換だけです。ですのでエサと違ってスネークは、行または列の値を加(減)算し続ける必要があります。

とすれば、動作し続けるOnTimerステップの出番です。

まず、スネーク処理の基本の流れは、

  1. 初期スネークを配置・描画
  2. OnTimerステップでスネーク動作・描画スクリプトをキック

そしてスネークは動き続けますので、その後プレイヤーが好きに方向転換操作...

ですので、2.でOnTimerがキックするスネーク動作スクリプトは、行/列の加(減)算値を取得し、その方向に加算し続けるものになります。そのスクリプト____move

  • 1,2行目:行/列の加(減)算値$$addValues(後述)から、行加算値$UDvalue(いわゆる上下) 列加算値$LRvalue(いわゆる左右)へ分解
  • 4,5行目:それらを元に、スネークの現在の行座標$$snakeRow、列座標$$snakeColへ加算
  • 7行目:その座標で[][]のカタチの配列座標$snakeCIEを作成
  • 9,10行目:そして最後にその配列座標を元にスネークを描画

問題の$$addValuesの値は、方向ボタンを押した時に設定されるようにします。それをGetValue関数を使用して分解していることから分かるように、改行区切りで値を持たせます。

ではその辺りも含め、スネークの基本の動きを一旦整理し、実際にやってみます。


スネークを実際に動かしてみる

このような感じでボタンを配置します。

まず、4つの方向ボタンですが、それぞれ単一ステップで変数$$addValuesの設定をします。

それぞれ設定する値は、

  • 上矢印:-1 & ¶ & 0
  • 右矢印:0 & ¶ & 1
  • 下矢印:1 & ¶ & 0
  • 左矢印:0 & ¶ & -1

このように改行区切りで2行の内、1行目:行方向の加算値、2行目:列方向の加算値という意味合いの設定をします。

押すとこのような値が$$addValuesに設定されるようになります。

ボタンが押された時に設定される値の例、右矢印を押した時
こうすることで、上を押すと行座標に-1 列座標に0を加算する値を、右を押すと行座標に0 列座標に1を加算する値を得られる...ということになります。

続いて、startボタンに設定するスクリプトstart

  • 1,2行目:スネークの初期座標
  • 4行目:[][]のカタチの初期配列座標$snakeCIEを作成
  • 6,7行目:それを元に初期描画
  • 9行目:初期進行方向$$addValuesを列増加(つまり右増加)方向0 & ¶ & 1で設定
  • 11行目:スネーク動作スクリプト____moveをキック

endボタンには忘れずに、引数が空のOnTimerを単一ステップで設定して下さい。

これを押さないと、startスクリプトで実行したOnTimerが止まりません。

ちなみにOnTimerを詳しく知りたい方は、こちらもご参考下さい。
https://qiita.com/tyuma/items/ef806df5e112ea3d801a

さて、startボタンを押すと、このように操作できると思います。

どうでしょうか、上手く動かすことが出来ましたかね?それっぽくなってきましたよね。gifアニメなんで色々アレですが...。また、盤面外の判定を盛り込んでいませんので、スネークが動き続けて盤面から消えても慌てず、endボタンでストップして下さい。

さて、ロジックの山場はここからです...


一先ずのまとめ

これで、エサやスネークの基本となる動きの仕組みは解明したかと思います。一見ややこしそうに見えますが、一つ一つはカスタム関数などを使わず、基本ステップのみですので再現はし易いと思います。

むしろ変数の設定しかほぼほぼ使っていませんしね。


以上、中編(実践編)でした

次回、後編(怒涛の完結編!)へ続く...
https://zenn.dev/ontherocks_plz/articles/8a7a5fe306611b

Discussion

ログインするとコメントできます