Last active
June 11, 2016 15:28
-
-
Save RAGDOLL-JPN/5434706 to your computer and use it in GitHub Desktop.
シューティング
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
シューティング | |
①自機(プレイヤー)の弾の発射処理は自動的に行い、敵を破壊すると得点を加算する。 | |
②自機は、敵の弾に1発でも当たると破壊され、3回破壊されるとゲームオーバーになる。 | |
③自機をアナログパッドで操作できるようにする。 | |
④移動パターンの異なる敵を3種類で、ランダムに出現させる。 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
} | |
body { | |
background: #dff; | |
font: 30px sans-serif; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
}); |
自機と画面の判定を修正
敵を実装
自機の自弾発射とスコアを実装
①敵弾は、自機のいる場所に向かって発射する。
②自機が被弾したらライフを1つ減らし、ライフ「0」でゲームオーバー画面を表示する。
③自機が被弾したら一定時間、点滅表示し、その間は敵を出現させない。
自機が点滅表示中でも、敵が出現していたのを修正。
爆発エフェクトを実装
バーチャルパッドを実装
自機の操作をバーチャルパッドのみに変更
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
自機の表示と移動する機能を実装