javascript(ct.js)で初心者でもできる!簡単ゲーム開発#1ー2tutorial:spaceshooter

前回の続きです。ここからコーディングが増えてきます。

各オブジェクトの動きをコーディングする。

まずは自機の移動をコーディングします。
TypesタグからPlayerShipをクリックし、その中のOnStepタブに下のコードを記述します。

このコードはPlayerShip座標をキー入力に応じて動かします。また、下のほうのif分岐は画面端からはみ出さないようにするためのものです

/**
 * Move the ship
 * See Project > Actions and input methods panel
 * and "Actions" in the docs.
 */

this.x += 8 * ct.delta * ct.actions.MoveX.value; // Move by X axis
this.y += 8*ct.delta*ct.actions.MoveY.value;// Move by Y axis

/**
 * Check whether the ship fell off the viewport
 */
if (this.x < 0) { // Have the ship crossed the left border?
    this.x = 0; // Go back to the left border
}
if (this.x > ct.camera.width) { // Have the ship crossed the right border?
    this.x = ct.camera.width; // Go back to the right border
}
if (this.y < 0) { // Have the ship crossed the left border?
    this.y = 0; // Go back to the top border
}
if (this.y > ct.camera.height) { // Have the ship crossed the right border?
    this.y = ct.camera.height; // Go back to the bottom border
}
this.move();

次に敵機についてコーディングしていきます。
EnemyShipのOnCreateタブに下のコードを記述します。それぞれ動くスピードと動く方向を指定しています。

this.speed = 3;
this.direction = 270;

また、画面外へ移動したときにオブジェクトを消滅させたいのでOnStepタブを下のように記述します。

this.move();

if (this.y > ct.viewHeight + 80) {
    this.kill = true;
}

最後に隕石についてコーディングします。
二つの隕石について同様にコーディングします。
randomとしているのは動くスピード、方向をばらけさせるためです。下のif分岐は画面外へ移動したらオブジェクトを消滅させる処理です。

this.speed = ct.random.range(1, 3);
this.direction = ct.random.range(270 - 30, 270 + 30);
this.move();

if (this.y > ct.viewHeight + 80) {
    this.kill = true;
}

ここまでで一旦「Launch」で動かしてみましょう。自機を動かしたり、敵や隕石が動きます。

次にお待ちかねのレーザーを発射させる処理を書いていきます。
下のコードをPlayerShipのOnStepタブに追記します。ここでは発射ボタン(Spaceキー)が押されたらレーザーのオブジェクトが生成されるようにしています。

if (ct.actions.Shoot.pressed) {
    ct.types.copy('PlayerLaser', this.x, this.y);
}

このままだとレーザーは動きませんので、PlayerLaserのOnCreateタブにスピードと方向を設定します。

this.speed = 18;
this.direction = 90;

画面外へ移動したらオブジェクトを消滅させるので、OnStepタブへ次のように記述します。

if (this.y < -40) {
    this.kill = true;
}

this.move();

次にレーザーで敵機、隕石を破壊したいので、それぞれ衝突判定を設定します。

Types内EnemyShipのOnStepタブへ次のコードを追記します。

var collided = ct.place.meet(this, this.x, this.y, 'PlayerLaser');
if (collided) {
    collided.kill = true;
    this.kill = true;
}

MeteorBigのOnStepタブへ

var collided = ct.place.meet(this, this.x, this.y, 'PlayerLaser');
if (collided) {
    collided.kill = true;
    this.kill = true;
    ct.types.copy('MeteorMed', this.x, this.y);
    ct.types.copy('MeteorMed', this.x, this.y);
}

MeteorMedのOnStepタブへ

var collided = ct.place.meet(this, this.x, this.y, 'PlayerLaser');
if (collided) {
    collided.kill = true;
    this.kill = true;
}

これでプレイヤーが撃った弾が敵機や隕石に当たると互いに消滅するようになりました。

次にEnemyShipのOnCreateタブへ次のコードを追記します。ここでは敵機が弾を打つ間隔を定義します。(デフォルトでは60fpsとなるためこの設定では1秒毎に弾を発射します。)

this.bulletTimer = 60;

EnemyShipのOnStepタブで次のコードを追記します。
ここでは先に定義したタイマーから毎フレーム1を減算し、0になったらレーザーを射出するという処理です。この分岐後はタイマーは180に設定されます。

this.bulletTimer -= ct.delta;
if (this.bulletTimer <= 0) {
    this.bulletTimer = 180;
    ct.types.copy('EnemyLaser', this.x, this.y + 32);
}

では発射されるレーザーについて設定します。
まず、OnCreateには下のコードを記述し、

this.speed = 8;
this.direction = 270;

this.rotation = ct.random.deg();

OnStepには次のコードを記述します。

if (this.y > ct.viewHeight + 40) {
    this.kill = true;
}

this.move();

this.rotation += 4 * ct.delta;

ここからは敵機のレーザーと自機のあたり判定や敵や隕石を生成し続けるようにするなど、よりゲームらしく設定をしていきます。

記事が長くなりすぎてしまったため、一旦ここで終了とさせていただきます。
質問などありましたらお気軽にどうぞ!

コメントを残す

メールアドレスが公開されることはありません。

RSS
Follow by Email