昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。
さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしまいます。
ならば、enchant.jsを使えば100行未満のシューティングゲームの開発が可能なのでしょうか？
今回はenchant.jsでのたった100行未満の、本格シューティングゲーム開発に挑戦してみました。
では、今回の目標を発表します。
- プログラムは100行以内。
- 行数を縮めるために、無理やり1行にしたりはなるべくしない。
- 背景は表示する。スクロールもさせる。
- 敵はまっすぐ下に弾を撃つ。自機ももちろん弾を撃てる
- スコアも表示させる。
ソースはこちらです。
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クラスに弾を出す機体を判別する為の引数を加えました。
