Skip to content

Instantly share code, notes, and snippets.

@RAGDOLL-JPN
Last active June 11, 2016 15:28
Show Gist options
  • Save RAGDOLL-JPN/5434706 to your computer and use it in GitHub Desktop.
Save RAGDOLL-JPN/5434706 to your computer and use it in GitHub Desktop.
シューティング
シューティング
①自機(プレイヤー)の弾の発射処理は自動的に行い、敵を破壊すると得点を加算する。
②自機は、敵の弾に1発でも当たると破壊され、3回破壊されるとゲームオーバーになる。
③自機をアナログパッドで操作できるようにする。
④移動パターンの異なる敵を3種類で、ランダムに出現させる。
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #dff;
font: 30px sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, user-scalable=no">
<meta name = "apple-mobile-web-app-copable" content = "yes">
<meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent">
<title>シューティングゲーム</title>
<script type = "text/javascript" src = "enchant.js"></script>
<script type = "text/javascript" src = "ui.enchant.js"></script>
<script type = "text/javascript" src = "nineleap.enchant.js"></script>
<script type = "text/javascript" src = "game.js"></script>
<style type = "text/css">
body {margin : 0;}
</style>
</head>
<body>
</body>
</html>
enchant();
// ゲームで使用する画像ファイルを定数で定義する
var BG_IMAGE = "http://jsrun.it/assets/l/x/k/O/lxkOg.png"; // 背景画像
var EXP_IMAGE = "http://jsrun.it/assets/k/2/B/Y/k2BYL.png"; // 爆発画像
var SHIP_IMAGE = "http://jsrun.it/assets/7/S/b/R/7SbRb.png"; // 自機・敵機画像
// 画像ファイルを一括で指定するために定数で定義する
var ASSETS = [BG_IMAGE, EXP_IMAGE, SHIP_IMAGE];
// ゲームメイン
window.onload = function() {
core = new Core(320, 320);
core.fps = 24;
// スコアを保持するプロパティ
core.score = 0;
// ライフを保持するプロパティ
core.life = 3;
// ウェイトのカウンタ
core.wait = 0;
// 自機の死亡フラグ(被弾したときに「true」)
core.death = false;
// ゲームオーバーフラグ(ゲームオーバー時に「true」)
core.over = false;
// ゲームで使用する画像ファイルを読み込む
core.preload(ASSETS);
core.onload = function() {
// 背景を作成する
background = new Background();
// 自機を作成する
player = new Player(144, 138);
// スコアラベルを作成する
var scoreLabel = new ScoreLabel(5, 0);
scoreLabel.score = 0;
scoreLabel.easing = 0;
core.rootScene.addChild(scoreLabel);
// ライフラベルを作成する
var lifeLabel = new LifeLabel(180, 0, 3);
core.rootScene.addChild(lifeLabel);
// アナログバーチャルパッドを作成する
apad = new APad();
apad.x = 220;
apad.y = 220;
core.rootScene.addChild(apad);
// 敵を格納する配列
enemies = [];
// rootSceneの「enterframe」イベントリスナ
core.rootScene.addEventListener('enterframe', function() {
// スコアを更新する
scoreLabel.score = core.score;
// ライフを更新する
lifeLabel.life = core.life;
// ゲームオーバーなら終了
if(core.over)
{
core.end();
}
// 被弾したら、一定の間、自機を点滅表示する
if(core.death == true)
{
core.wait ++;
player.visible = player.visible ? false:true;
if(core.wait == core.fps * 5)
{
core.death = false;
player.visible = true;
core.wait = 0;
}
}
// 敵の生成処理
if(rand(100) < 5 && core.death == false)
{
var enemy = new Enemy(rand(320), 0, rand(3));
enemy.id = core.frame;
enemies[enemy.id] = enemy;
}
});
}
// ゲームスタート
core.start();
}
// 背景のスプライトを作成するクラス
var Background = enchant.Class.create(enchant.Sprite, {
// 「initialize」メソッド(コンストラクタ)
initialize: function() {
// 継承元をコール
enchant.Sprite.call(this, 320, 640);
this.x = 0; // x座標
this.y = -320; // y座標
this.frame = 0; // フレーム番号
this.image = core.assets[BG_IMAGE]; // 背景画像を設定する
// 「enterframe」イベントリスナ
this.addEventListener('enterframe', function() {
// 背景をy方向にスクロール
this.y ++;
// y座標が「0」以上になったら、y座標を最初の位置「-320」に戻す
if(this.y >= 0)
{
this.y = -320;
}
});
// 「rootScene」にこのスプライトクラスを追加する
core.rootScene.addChild(this);
}
});
// 弾のスプライトを作成するクラス
var Bullet = enchant.Class.create(enchant.Sprite, {
// 「initialize」メソッド(コンストラクタ)
initialize: function(x, y, angle) {
// 継承元をコール
enchant.Sprite.call(this, 8, 8);
// サーフィスを作成する
var image = new Surface(32, 32);
// 「spritesheet.png」から弾に使用する画像を切り出す
image.draw(core.assets[SHIP_IMAGE], 32, 64, 32, 32, 0, 0, 32, 32);
this.image = image; // 弾の画像
this.x = x; // x座標
this.y = y; // y座標
this.angle = angle; // 角度
this.speed = 10; // スピード
// 「enterframe」イベントリスナ
this.addEventListener('enterframe', function() {
// 弾の移動処理
this.x += this.speed * Math.sin(this.angle);
this.y += this.speed * Math.cos(this.angle);
// 画面の外に出たら消去する
if(this.y > 320 || this.x > 320 || this.x < -this.width || this.y < -this.height)
{
this.remove();
}
});
// rootSceneにこのスプライトクラスを追加する
core.rootScene.addChild(this);
},
// 弾を削除するメソッド
remove: function() {
core.rootScene.removeChild(this);
delete this;
}
});
// 爆発エフェクトのスプライトを作成するクラス
var Explosion = enchant.Class.create(enchant.Sprite, {
// 「initialize」メソッド(コンストラクタ)
initialize: function(x, y) {
// 継承元をコール
enchant.Sprite.call(this, 64, 64);
this.x = x; // x座標
this.y = y; // y座標
this.frame = 0; // フレーム番号
this.image = core.assets[EXP_IMAGE]; // 爆発エフェクトの画像を設定
this.tick = 0; // フレーム数のカウント
// 「enterframe」イベントリスナ
this.addEventListener('enterframe', function() {
// 爆発エフェクトをアニメーション表示する
this.frame = this.tick ++;
if(this.frame == 16)
{
this.remove();
}
});
// rootSceneにこのスプライトを追加する
core.rootScene.addChild(this);
},
// 爆発エフェクトを削除するメソッド
remove: function() {
core.rootScene.removeChild(this);
delete this;
}
});
// 自弾のスプライトを作成するクラス
var PlayerBullet = enchant.Class.create(Bullet, {
// 「initialize」メソッド(コンストラクタ)
initialize: function(x, y) {
// 継承元をコール
Bullet.call(this, x, y, Math.PI);
this.frame = 10;
// 「enterframe」イベントリスナ
this.addEventListener('enterframe', function() {
// 敵との当たり判定
for(var i in enemies)
{
// 敵に当たったら
if(enemies[i].intersect(this))
{
// 爆発エフェクトを表示する
var effect =
new Explosion(enemies[i].x - enemies[i].width / 2, enemies[i].y - enemies[i].height / 2);
// 当たった敵を消去する
enemies[i].remove();
// スコアを加算する
core.score += 100;
}
}
});
}
});
// 敵弾のスプライトを作成するクラス
var EnemyBullet = enchant.Class.create(Bullet, {
// 「initialize」メソッド(コンストラクタ)
initialize: function(x, y, angle) {
// 継承元をコール
Bullet.call(this, x, y, angle);
this.speed = 4; // スピード
this.frame = 7; // フレーム番号
// 「enterframe」イベントリスナ
this.addEventListener('enterframe', function() {
// 自機との当たり判定
// 自機に当たったら
if(player.within(this, 8) && core.death == false)
{
// 爆発エフェクトを表示する
var effect = new Explosion(player.x - player.width / 2, player.y - player.height / 2);
core.death = true;
player.visible = false;
// ライフを1つ減らす
core.life--;
// ライフが「0」ならゲームオーバーフラグを「true」にする
if(core.life == 0)
{
core.over = true;
}
}
});
}
});
// 自機のスプライトを作成するクラス
var Player = enchant.Class.create(enchant.Sprite, {
// 「initialize」メソッド(コンストラクタ)
initialize: function(x, y) {
// 継承元をコール
enchant.Sprite.call(this, 32, 32);
// サーフィスを作成する
var image = new Surface(128, 32);
// 「spritesheet.png」の(0, 0)から128?32の領域の画像をサーフィスに描画する
image.draw(core.assets[SHIP_IMAGE], 0, 0, 128, 32, 0, 0, 128, 32);
this.image = image; // プレイヤー画像に「spritesheet.png」を設定する
this.frame = 0; // フレーム番号
this.x = x; // x座標
this.y = y; // y座標
// 「enterframe」イベントリスナ
this.addEventListener('enterframe', function() {
// 自機の移動処理
// スプライトのフレーム切り替え
if(apad.vy < 0)
{
this.frame = 1;
}
if(apad.vy > 0)
{
this.frame = 2;
}
if(apad.vy == 0)
{
this.frame = 0;
}
// アナログパッドの傾きをゲーム画面の座標系に変換する
this.x = apad.vx * 160 + x;
this.y = apad.vy * 160 + y;
// 8フレームごとに弾を発射する
if(core.frame % 8 == 0)
{
// 自弾を生成する
var s = new PlayerBullet(this.x + 12, this.y - 8);
}
});
// 「rootScene」にこのスプライトクラスを追加する
core.rootScene.addChild(this);
}
});
// 敵のスプライトを作成するクラス
var Enemy = enchant.Class.create(enchant.Sprite, {
// 「initialize」メソッド(コンストラクタ)
initialize: function(x, y, type) {
// 継承元をコール
enchant.Sprite.call(this, 32, 32);
// 敵の画像に「spritesheet.png」を指定する
this.image = core.assets[SHIP_IMAGE];
this.x = x; // x座標
this.y = y; // y座標
this.vx = 4; // x方向の移動量
this.type = type; // 敵の種類を設定するプロパティ
this.tick = 0; // フレーム数のカウンタ
this.angle = 0; // 弾の発射角度を設定するプロパティ
// 「enterframe」イベントリスナ
this.addEventListener('enterframe', function() {
// 敵のタイプに応じて、表示するフレームと移動パターンを設定する
// タイプ「0」
if(this.type == 0)
{
this.frame = 15 + core.frame % 3;
this.y += 3;
}
// タイプ「1」
if(this.type == 1)
{
this.frame = 22 + core.frame % 3;
this.y += 6;
}
// タイプ「2」
if(this.type == 2)
{
this.frame = 25 + core.frame % 4;
if(this.x < player.x - 64)
{
this.x += this.vx;
}
else if(this.x > player.x + 64)
{
this.x -= this.vx;
}
else
{
this.vx = 0;
this.y += 8;
}
}
// 画面外に出たら、
if(this.y > 280 || this.x > 320 || this.x < -this.width || this.y < -this.height)
{
// 消す
this.remove();
}
else if(this.tick++ % 32 == 0)
{
// 画面内にいるなら、「32」フレーム毎に、次の弾を発射する処理を実行する
if(rand(100) < 50)
{
// 自機と敵の位置から弾の発射角度を求める
var sx = player.x + player.width / 2 - this.x;
var sy = player.y + player.height / 2 - this.y;
var angle = Math.atan(sx / sy);
// 弾を発射する
var s = new EnemyBullet(this.x + this.width / 2, this.y + this.height / 2, angle);
}
}
});
// rootSceneにこのスプライトを追加する
core.rootScene.addChild(this);
},
// 敵を削除するメソッド
remove: function() {
core.rootScene.removeChild(this);
delete enemies[this.id];
delete this;
}
});
@RAGDOLL-JPN
Copy link
Author

自機の表示と移動する機能を実装

@RAGDOLL-JPN
Copy link
Author

自機と画面の判定を修正

@RAGDOLL-JPN
Copy link
Author

敵を実装

@RAGDOLL-JPN
Copy link
Author

自機の自弾発射とスコアを実装

①敵弾は、自機のいる場所に向かって発射する。
②自機が被弾したらライフを1つ減らし、ライフ「0」でゲームオーバー画面を表示する。
③自機が被弾したら一定時間、点滅表示し、その間は敵を出現させない。

@RAGDOLL-JPN
Copy link
Author

自機が点滅表示中でも、敵が出現していたのを修正。

@RAGDOLL-JPN
Copy link
Author

爆発エフェクトを実装

@RAGDOLL-JPN
Copy link
Author

バーチャルパッドを実装

@RAGDOLL-JPN
Copy link
Author

自機の操作をバーチャルパッドのみに変更

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment