1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. enchant.js100行未満!!本格シューティングゲーム作り方

enchant.js100行未満!!本格シューティングゲーム作り方

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。

さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしまいます。
ならば、enchant.jsを使えば100行未満のシューティングゲームの開発が可能なのでしょうか?

今回はenchant.jsでのたった100行未満の、本格シューティングゲーム開発に挑戦してみました。

では、今回の目標を発表します。

  • プログラムは100行以内。
  • 行数を縮めるために、無理やり1行にしたりはなるべくしない。
  • 背景は表示する。スクロールもさせる。
  • 敵はまっすぐ下に弾を撃つ。自機ももちろん弾を撃てる
  • スコアも表示させる。

こんな感じで作ってみようと思います。
では、まずは実際に作ってみたゲームをごらんください。
9leapにアップロードしてみました。
こちらでプレイできます。

ソースはこちらです。

enchant();
window.onload = function() {
  game = new Core(320,320);
  game.preload('img/FC-1.png','img/F-1.png','img/shot.png','img/sky.png');
  game.onload = function() {
    gameScene = game.rootScene;
    enemies = [];
    score = 0;
    var sky = [];
    for (var i=0; i<2; i++) {
      sky[i] = new Sprite(320,320);
      sky[i].image = game.assets['img/sky.png'];
      sky[i].moveTo(0,-320*i);
      gameScene.addChild(sky[i]);
    }
    player = new Player(135,200);
    gameScene.addChild(player);
    var scoreTxst = new Label();
    gameScene.addChild(scoreTxst);
    gameScene.onenterframe = function() {
      scoreTxst.text = "Score:" + score;
      for (var i=0; i<2; i++) {
        sky[i].y += 5;
        if (sky[i].y === 320) sky[i].y = -320;
      }
      if (game.frame % 40 === 0) {
        enemies[game.frame] = new Enemy(50,50);
        gameScene.addChild(enemies[game.frame]);
        enemies[game.frame].extence = true;
      }
    };
    game.gameoverScene = function() {
      var scene = new Scene();
      var label = new Label("GAME OVER");
      label.moveTo(120,160);
      scene.addChild(label);
      return scene;
    };
  };
  game.start();
};
var Player = Class.create(Sprite, {
  initialize: function() {
    Sprite.call(this,50,50);
    this.moveTo(135,200);
    this.image = game.assets['img/FC-1.png'];
  }, ontouchstart: function(e){
    px = e.x - this.x; py = e.y - this.y;
    var shot = new Shot(this.x+24,this.y,0);
    gameScene.addChild(shot);
  }, ontouchmove: function(e) {
    this.x = e.x - px; this.y = e.y - py;
    if (this.x > 270) this.x = 270;
    else if (this.x < 0) this.x = 0;
    else if (this.y > 270) this.y = 270;
    else if (this.y < 0) this.y = 0;
  }
});
var Enemy = Class.create(Sprite, {
  initialize: function() {
    var rnd = Math.floor(Math.random() * 270);
    Sprite.call(this,50,50);
    this.moveTo(rnd,-50);
    this.image = game.assets['img/F-1.png'];
  }, onenterframe: function() {
    this.y += 3;
    if (this.y > 330) gameScene.removeChild(this);
    if (this.within(player, 15)) game.pushScene(game.gameoverScene());
    if (this.age % 25 === 0) {
      var shot = new Shot(this.x+24,this.y+50,1);
      gameScene.addChild(shot);
    }
  }
});
var Shot = Class.create(Sprite, {
  initialize: function(x,y,type) {
    Sprite.call(this,2,5);
    this.moveTo(x,y);
    this.image = game.assets['img/shot.png'];
    this.type = type;
  }, onenterframe: function() {
    if (this.type === 0) {
      this.y -= 5;
      for(var i in enemies){
        if (!enemies[i].extence) continue;
        if (enemies[i].within(this,20)) {
          gameScene.removeChild(this);
          gameScene.removeChild(enemies[i]);
          enemies[i].extence = false;
          score+=100;
        }
      }
    } else if (this.type === 1) {
      this.y += 5;
      if (this.within(player, 15)) game.pushScene(game.gameoverScene());
    }
    if (this.y < -10 || this.y > 330) gameScene.removeChild(this);
  }
});

大まかに見ていきましょう。

9〜15行目で、背景(空)の画像を2枚表示しています。2枚表示するのは、背景をスクロールさせるためです。
行数を省略するため、for文を使いました。
22〜25行目で、背景(空)の画像をスクロールさせています。
26〜30行目で、敵を40フレームごとに出現させています。
32〜38行目は、ゲームオーバーシーンを作っています。このシーンを読み込むことで、ゲームオーバー画面を作ることができます。

クラスとして、Player、Enemy、Shotのクラスを作成しています。
今回は行数を減らすため、Shotクラスを、自機、敵機の2つから同じものを利用しています。

その為に、Shotクラスに弾を出す機体を判別する為の引数を加えました。

スポンサードリンク

関連コンテンツ

オススメ記事

HTML CSS

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。 円はCSSで簡単に作ることができます。 さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。 CSSでの

キャラを決まった間隔ずつ動かすよ!

【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門

小学生からのプログラミング入門講座《にゅうもんこうざ》、第8弾です。 前回は、キャラクターの画像《がぞう》をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔《いどうかんかく

Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です