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

今回はゲームっぽい要素を入れていきます。

今まで文字を動かしていましたが、扱いやすい四角形を描画して使っていきます。

四角形を描画する #

hokugで用意している描画機能を使います。

hokug.drawRect(x座標, y座標, 幅, 高さ, 色);

で四角を描画できます。
x,y座標は四角形左上の頂点を指定します。

変数追加 #

前回までの文字の描画部分はコメント化して無効にしておきます。

必要な変数を追加していきます。

//x座標
let rectX = 50;
//y座標
let rectY = 50;
//四角形の幅
let rectWidth = 100;
//四角形の高さ
let rectHeight = 100;
//ターゲットのライフ
let life = 3;
//終了処理用カウントダウン
let cntDown = 10;

下2つはゲームで使う変数です。ついでに加えておきます。

更新処理 #

タイマー（更新処理）に四角形の描画を入れます。

//四角形を描画
hokug.drawRect(rectX, rectY, rectWidth, rectHeight, textColor);
rectX += moveX;
rectY += moveY;
//四角の右端座標が画面幅を超えるか、x座標が0未満になったら
if (rectX + rectWidth > hokug.width || rectX < 0) {
	moveX *= -1;
}
//四角のy座標が高さを越えるか、下端の座標が画面高さを超えたら
if (rectY + rectHeight > hokug.height || rectY < 0) {
	moveY *= -1;
}

文字を表示したときとほぼ同じですが原点が左下から左上になっているのでy軸の移動方向反転の部分が変わっています。

タッチ処理 #

hokug.touchMoveとhokug.touchUpは今回使いません。

hokug.touchMove(x,y){}内に書いていきます。
四角形をタップするとだんだん早くなっていくようにしてみます。

x,yの原点以上＆原点に幅や高さを足した数以下、を指定すれば四角形をタップしたことにできます。

if (rectX <= x && x <= rectX + rectWidth) {
	if (rectY <= y && y <= rectY + rectHeight) {
		life--;
		moveX *= rand(2, 4);
		moveY *= rand(2, 4);
	}
}

前回作ったrand()関数を使ってタッチ成功の度に縦横の移動量が2〜4倍になるようにしてみました。
あとlifeも減らしています

XとYの判定を&&でつなげて1つのif文にまとめてもいいですが、見やすいように分けています。

3回タッチしたら四角形を消す #

if文でtimerの描画処理を囲んでlifeが0より大きいときだけ四角を描画します。
lifeの初期設定分タッチ成功すると消えるのでこれでゲームクリアということにします。

if(0 < life){
//	四角形描画の一連の処理
}

残りlifeで色を変える #

描画処理部分に条件分岐を加えてlifeの数値で色を変えてみます。
分岐条件の値が決まっている場合はswitch文が便利です。

switch(条件式){
	case 値1:
		処理
		break;
	case 値2:
		処理
		break;
}

のように書きます、値の後は　:（コロン）で区切ります。

さっきのif文内に追加

if(0 < life){
//lifeの値で色が変化
	switch(life){
		case 3:
			textColor = textColor1;
			break;
		case 2:
			textColor = textColor2;
			break;
		case 1:
			textColor = textColor3;
			break
	}
//	一連の描画処理
}

爆発させる #

クリア時の手応えを加えてみます。点滅とかでもいい気がします。

制御用の変数を追加です。
let cntDown = 3;

lifeが1未満になった場合の条件をelse ifで追加します。

//（life残っているときの処理）
if (life > 0) {
//~
//これ以降を追加
} else if (0 < cntDown) {
//破片の移動距離
	let cd = 20 - cntDown * 5;
//破片の幅
	let w = rectWidth / 2;
//破片の高さ
	let h = rectHeight / 2;
//破片の色
	let c = textColor;
//破片を4つ描画
	hokug.drawRect(rectX - cd, rectY - cd, w, h, c);
	hokug.drawRect(rectX + w + cd, rectY - cd, w, h, c);
	hokug.drawRect(rectX - cd, rectY + h + cd, w, h, c);
	hokug.drawRect(rectX + w + cd, rectY + h + cd, w, h, c);
//制御変数を-1
	cntDown--;
}

4つに割れてそれぞれの方向に移動します。
変数cntDown を使って移動量を調整し最後にタップ成功した位置から徐々に離してます。

破片を増やしたり移動の量を調整すればより爆発っぽくなると思います。

終わり #

一応ゲームっぽくなりました。

次は画像を表示してみたいです