体験授業

講師:大森田不可止

シューティングゲーム

ウェブの仕組み

Webサーバ

ブラウザ

IE, Edge, FireFox, Chrome, Safari, ...

JavaScript

enchant.js

今回はJavaScript のゲーム向けライブラリ enchant.js を使って作成する。

準備

グラフィック素材

フリーの素材から構成

index.html

main.js を書いていきます

enchant();

window.onload = function() {
    var core = new Core( 480, 640 );
    core.fps = 30;
    core.preload( 'ship.png' );
    core.keybind(0x20, 'a');  // space
    core.rootScene.backgroundColor = "black";

    // メイン処理.
    core.onload = function() {
        // ここに初期化処理を書いていく.
        core.addEventListener('enterframe', function() {
            // ループ処理
        });
    };

    // ゲームをスタート.
    core.start();
}

動作サンプル
main.js

MyShipの表示

core.onload = function() { の行の直後に以下を追加。

    // MyShip
    var myship = new Sprite(60, 60);
    myship.y = 580;
    myship.x = 210;
    myship.image = core.assets['ship.png'];
    myship.frame = [6,7];
    core.rootScene.addChild( myship );

動作サンプル
main.js

MyShipを矢印キーで左右に動かす

core.addEventListener('enterframe', function() { の行の直後に以下を追加。ここに書いたプログラムは毎秒30回呼び出される。

          if (core.input.right) {
            myship.x += 6;
            if( myship.x > 420 ) myship.x = 420;
          }
          if (core.input.left) {
            myship.x -= 6;
            if(myship.x < 0) myship.x = 0;
          }

動作サンプル
main.js

敵の表示

myship表示プログラムの直後に以下を追加。

    // Enemy
    var enemy = new Sprite(60, 60);
    enemy.y = 0;
    enemy.x = 210;
    enemy.image = core.assets['ship.png'];
    enemy.frame = [0,1];
    enemy.rotation = 180;
    core.rootScene.addChild( enemy );
    enemy.count = 0;

動作サンプル
main.js

敵を動かす

myshipを動かすプログラムの直後に以下を追加。

    // move Enemy
    enemy.y += 8;
    if( enemy.y >= 640 ){
      enemy.y = -60;
      enemy.x = Math.floor(Math.random() * 420);
    }

動作サンプル
main.js

Bulletの表示

enemy表示プログラムの直後に以下を追加。

    // bullet
    var bullet = new Sprite(15, 15);
    bullet.y = -15;
    bullet.x = 0;
    bullet.image = core.assets['ship.png'];
    bullet.frame = 16*12;
    core.rootScene.addChild( bullet );

動作サンプル
main.js

Bulletの発射

enemyの動きプログラムの直後に以下を追加。

      // move bullet & fire
      if( bullet.y <= -15 ){
        if (core.input.a) {  // Fire
          bullet.y = myship.y;
          bullet.x = myship.x+22;
        }
      } else {
        bullet.y -= 12;
      }

動作サンプル
main.js

衝突判定

bulletの動きプログラムの直後に以下を追加。

      // 衝突判定 enemy & bullet
      if( bullet.y > -15 && enemy.count == 0 ){
        if( bullet.within( enemy, 37 )){
          enemy.frame = [8,9,10,11,13,null];
          enemy.count = 6;
          bullet.y = -15;
        }
      }

動作サンプル
main.js

Enemy の動きプログラムの修正

enemy のカウンターを見て動作を変える。

      // move Enemy
      if(enemy.count > 0){
        if(--enemy.count == 0){
          enemy.frame = [0,1];
          enemy.y = 640;
        }
      } else {
        enemy.y += 8;
        if( enemy.y >= 640 ){
          enemy.y = -60;
          enemy.x = Math.floor(Math.random() * 420);
        }
      }

動作サンプル
main.js

少し手を加えたサンプル

シューティングゲームの骨組みだけ

参考リンク

/