CoroCoro : Step0 – enchant.js やプラグインを使う準備しよう!
ここでは, 開発の準備からプレイヤークラスの定義, 生成まで一気にやってしまいます. この Step が一番難しいのでここさえ乗り切ればあとは楽です.
SAMPLE
サンプルはこちらで見ることができます.
CODE
index.html
HTMLの基本となる雛形です. enchant.js を読み込んでいます. また, プレイヤークラスは私が以前作った ArcSprite クラスというプラグインを継承して作るのでここで読み込んでいます. TweetLabel プラグインは最後の方で活躍します.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>CoroCoro</title>
<!-- enchant.js を読み込む -->
<script type="text/javascript" src="../script/enchant.js"></script>
<!-- ここでプラグイン読み込み -->
<script type="text/javascript" src="../script/arcsprite.tm.enchant.js"></script>
<script type="text/javascript" src="../script/tweetlabel.tm.enchant.js"></script>
<!-- 実装スクリプト -->
<script type="text/javascript" src="game.js"></script>
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
</body>
</html>
game.js
プレイヤークラスを定義している部分です. ArcSprite という円弧を描画するクラスを継承しています. appear 関数で一定時間点滅させて, その後update関数に入れ替えています. これは後々でる敵といきなり衝突してしまわないよう無敵時間を作るための準備です.
/**
* @scope Player.prototype
*/
var Player = Class.create(ArcSprite, {
/**
* 円弧スプライトクラス
* @param {Number} radius 半径
* @param {Object} color 色オブジェクト {r:255, g:0, b:0}
*/
initialize: function(radius, color) {
// 親のコンストラクタを呼び出す
ArcSprite.call(this, radius, color);
},
appear: function()
{
// ゲームインスタンスを取得
var game = Game.instance;
// 点滅
this.opacity = (game.frame%8 == 0) ? 0.0 : 1.0;
// 移動
this.moveBy(this.dx, this.dy);
this.adjustPosition(0, 0, game.width, game.height);
// ４秒後にゲームに移行する(4秒間は無敵時間)
if (game.frame/game.fps > 2) {
// 現在のフレーム関数を解除
this.removeEventListener(Event.ENTER_FRAME, arguments.callee);
// 新たなフレーム関数を登録
this.addEventListener(Event.ENTER_FRAME, this.update);
}
},
update: function()
{
// ゲームインスタンスを取得
var game = Game.instance;
// 移動
this.moveBy(this.dx, this.dy);
this.adjustPosition(0, 0, game.width, game.height);
}
});
[…] Step0 – enchant.js やプラグインを使う準備しよう! […]
TM Life http://t.co/e3TZezf