全てのブロックを壊したらゲームクリアとなるようにします。
前回

Cocos Creator で 3Dゲームを作る その4
Cocos Creator で 3Dブロック崩しゲームを作る続きです。今回の目標ボールが当たったら消えるブロックを作ります。ブロック追加消えるブロック の元となる 箱 を追加します。消え...
今回の目標
ゲーム画面をクリックしたらボールが動き出すようにする。
全てのブロックを壊したらゲームクリアとする。
ブラウザーで遊べるようにしました。
Cocos Creator | hello_world
ラベル追加
ゲーム状態を表示するラベルを追加します。

経過時間を表示するラベルを追加します。

処理修正
「Helloworld.ts」の処理を修正します。
変数追加
@property(cc.Label)
Message: cc.Label = null;
@property(cc.Label)
Time: cc.Label = null;
@property(cc.Node)
Blocks: cc.Node = null;
IsStarted: Boolean = false;
StartTime: number;
上3つの変数が、処理で使うコンポーネントを保持するための変数です。
下2つの変数が、処理中に状態を保持するための変数です。
コンポーネントを登録
先程追加した変数に、コンポーネントを登録します。

それぞれ、同じ箇所にマウスドラッグで移動させます。

開始時の処理を追加
start関数に下記処理を追加
this.node.on(cc.Node.EventType.MOUSE_DOWN, this.onMouseDown, this);
この処理は、マウスクリックをした時に動く処理となります。
onMouseDown(event: cc.Event.EventMouse) {
switch (event.type) {
case "mousedown":
// イベント削除.
this.node.off(cc.Node.EventType.MOUSE_DOWN, this.onMouseDown, this);
// メッセージ非表示.
this.Message.string = "";
// ボールを動かす
let rigidBody = this.Ball.getComponent(cc.RigidBody3D);
// -3000 〜 3000 のランダム値.
let rnd1 = (Math.random() * 3 * 2 - 3) * 1000;
let rnd2 = (Math.random() * 3 * 2 - 3) * 1000;
rigidBody.applyImpulse(cc.v3(rnd1, 0, rnd2), cc.v3(0,0,0));
this.StartTime = Date.now();
this.IsStarted = true;
break;
default:
break;
}
}
終了時の処理を追加
update関数に下記処理を追加
// 終了判定.
if (this.Blocks.childrenCount == 0) {
// ボール停止
let rigidBody = this.Ball.getComponent(cc.RigidBody3D);
rigidBody.sleep();
// メッセージ表示.
this.Message.string = "ゲームクリア!";
this.IsStarted = false;
}
全部のブロックが消えたら、ボールを停止させて「ゲームクリア!」が表示されます。
経過時間を表示する処理を追加
update関数に下記処理を追加
if (this.IsStarted)
{
// 経過時間更新.
const diff = Date.now() - this.StartTime;
const minute = Math.floor(diff / 60000);
const second = Math.floor(diff / 1000) % 60;
this.Time.string = `${( minute < 10 ) ? '0' + minute : minute}:${( second < 10 ) ? '0' + second : second}`;
}
ゲームプレイ中は 経過時間 を更新するように処理します。
動作確認
これで完成です。
動作確認をしましょう。
ゲーム開始時

ゲームクリア時
