前回記事
https://simblo.net/u/Nz7RmE/post/453297

前回の終わりで「次は条件分岐やループだ」と言ったがあれは嘘だ。

hokug使ってみるというよりJavaScript使ってみるみたいな内容になってしまうのでヤメました。

分岐やループを使う時にちょっとだけ書くけど、詳しくはちゃんとした人の記事を検索した方がいいです。そうに違いない。

文字をアニメーションさせてみる #

ということで表示した文字を動かしてみます。

前回コードを書いていたinit(){}の部分は、ゲームの初期設定をしたりタイトルを表示するために1度だけ呼び出されるところです。

アニメーションさせるには処理を繰り返して位置情報や表示内容を更新していく必要があります。
この更新処理がhokugではtimerと言う名前で用意されています。

前回いじっていた初期化処理のすぐ上にhokug.timer = function(){}があります。この{}の中に処理を書いて行きます

表示位置用の変数を用意する #

更新処理の度に表示位置を加算（減算）して動きを表現するので、その値を入れる変数を用意します。
（画面の大きさが600:400になってるので初期位置はそれ以下で、ここでは50,50にしておきます）

この変数はファイルの先頭に書きます。
変数宣言を更新処理の中に書くと処理の度に初期位置になってしまい動かなくなります。

1番上までスクロールして

//横位置用の変数
let textX = 50;
//縦位置用の変数
let textY = 50;
//文字色
let textColor = new hokug.Class.Color(200,200,200,1);
//表示用文字列
let moji = "動く文字列";

こんな感じで追加してください。
ついでに文字色と表示する文字列も設定しておきます。
（変数名や表示内容は適当に決めてみてください）;

timerのところまで戻って文字を表示する処理を入れましょう。

hokug.drawText(textX, textY, moji, textColor, 50);

その下に位置を更新する処理を；
textX = textX + 3;
textY = textY + 3;
これで右下に移動して行きます。
（x,y座標は左上が0,0でxは右、yは下にいくほど数字が大きくなります）

変数の元の数に四則演算した結果を上書きするときは
textX += 3;
とも書けます。

1だけ足す（引く）ときは
textX ++;
textY --;
という書き方もできます。（こちらは乗算や除算は無いです。そりゃそうだ）

詳しくは　javascript 演算子　で🔍

timer部分全体では

hokug.timer = function () {
	hokug.drawText(textX, textY, moji, textColor, 50);
	textX +=3;
	textY +=3;
};

になります。打ち込むかコピーしたら実行してみましょう。
index.htmlをブラウザで開きます。

…「わあああー」ってなりましたか？僕はなりました😂

1度描画した部分はそのまま残ってしまうので、更新ごとに背景色で塗りつぶす必要があります。

init()部分の最初にあった
hokug.drawFillRGBA(0,0,0,1);
が指定した色で塗りつぶすやーつです。
hokug〜で始まる命令文はほくさんが用意した機能なので有り難がって使いましょう。

コピーしてtimer処理の先頭にも貼り付けます。

()内の数字は前回記事で色の情報を設定したときの書き方と同じです。
今はRGBが全部0なので黒になります。

変数を入れて色を徐々に変化させるようなこともできます。

画面端で折り返してみる #

ほっとくと文字が画面の外に出ていってしまうので、端に着いたら反転させてみましょう。

移動量を扱いやすいように変数にしておきます。
変数宣言の部分に追加です。

//横移動量
let moveX = 6;
//縦移動量
let moveY = 6;

ちゃんと折り返すか早く知りたいのでさりげなく移動量を増やします。

timerに戻って移動量を変数に置き換えます。

textX += moveX;
textY += moveY;

画面端で折り返したいのでtextX(textY)が画面左右端（上下端）を超えたらmoveX(moveY)に-1を掛けます。

条件分岐 #

条件分岐を使います。
モニスクでもお馴染みのif文です。

if(条件式1){
	//条件1の場合の処理
} else if(条件式2){
	//条件2の場合の処理
} else {
	//それ以外の処理
}

基本的な書き方はモニスクとほとんど同じです。[endif]が無いかわりに{} でくくります。
elseとifの間はスペースを入れます。

今回はelseは使いません、シンプルです。

//textXが画面幅を超える、または0未満
if(textX > hokug.width || textX < 0){
	moveX *= -1;
}
//textXが画面高さを超える、または0未満
if(textY > hokug.height || textY < 0){
	moveY *= -1;
}

画面の幅（高さ）の情報はhokug.width(hokug.height)という変数（プロパティ）に入っています。
システムで設定されている感じです。

基本は同じと言いつついきなりモニスクと違う部分が出ました。

モニスクでは1つの[if]に対して1つの条件式しか設定できませんでしたがjavascriptでは複数設定できます。

条件式を || で繋げると「または」、&& で繋げると「かつ」になります。
|はキーボードの右上の方にあると思います。shiftを押しながら入力です。

分かりにくければモニスク式にif文を並べて書いても大丈夫です。

できたら実行してみましょ
うまく動いたでしょうか

うまくいったら今回の目標は達成ですが、右端と上端で跳ね返るときに文字がはみ出しちゃうのが気になります。
余力があれば続きもためしてみてください。

おまけ #

文字列の原点座標が文字列全体の左下あたりっぽいので、右端上端の反転条件を

X座標と文字列の幅を足した数値が右端を超えたら
y座標から文字列の高さを引いた数値が上端を超えたら

に変えます。

幅＝（フォントサイズ*文字数）
高さ＝（フォントサイズ）

で計算します。
とりあえずフォントサイズを格納する変数を用意。

表示するコマンドのフォントサイズもこの変数に変えておきます。

文字数はlengthで取得できます。
文字列に続けてmoji.lengthのように書きます。
fontSize * moji.lengthでざっくりと文字列幅とします。
（半角だったり絵文字だったりするともう少し複雑になりますがとりあえずこれで）

if(textX + moji.length * fontSize > hokug.width || textX < 0){
	moveX *= -1;
}
if(textY > hokug.height || textY - fontSize < 0){
	moveY *= -1;
}

最終的に変数部分は

//横位置用の変数
let textX = 50;
//縦位置用の変数
let textY = 50;
//文字色
let textColor = new hokug.Class.Color(200,200,200,1);
//文字列
let moji = "動く文字列";
//フォントサイズ
let fontSize = 50;
//横移動量
let moveX = 40;
//縦移動量
let moveY = 33;

更新処理は

hokug.timer = function () {
	//背景色設定
	hokug.drawFillRGBA(0,0,0,1);
	//文字列の表示
	hokug.drawText(textX, textY, moji, textColor, fontSize);
	//文字列の位置を更新
	textX += moveX;
	textY += moveY;
	//文字列の右端座標が画面幅を超えるか、x座標が0未満になったら
	if(textX + moji.length * fontSize > hokug.width || textX < 0){
		moveX *= -1;
	}
	//文字列のy座標が高さを越えるか、上端の座標が0未満になったら
	if(textY > hokug.height || textY - fontSize < 0){
		moveY *= -1;
	}
};

こんな感じです。

うまくいったらこういった動きをするんじゃないかと思います。
https://sdkaeru.com/hokug/

終わり #

次回はタップやクリックしたときの処理をやります。