enchant.jsのSpriteを動かしてみましょう。
enchant.jsのSprite
ドロイド君が画面を斜めに移動し続けます。
まずは表示用のHTML。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<style>
body { margin: 0; }
</style>
<script src="../js/enchant.min.js"></script>
<script src="main.js"></script>
</head>
<body>
</body>
</html>
enchant.jsの読み込みはそれぞれのフォルダー形式に合わせてください。
実際の処理部分。
enchant() ; // ライブラリの初期化
window.onload = function()
{
var x = 1 ;
var y = -1 ;
//使用する画像のファイル名
var pic_name = "../img/droid.png" ;
//320×240ピクセルサイズの画面(Canvas)を作成する
var game = new Game( 320, 240 ) ;
//フレームレートの設定する
game.fps = 70 ;
//画像データをあらかじめ読み込ませる
game.preload( pic_name ) ;
//データの読み込みが完了したら処理
game.onload = function(){
//Spriteを作成する
var droid = new Sprite( 32, 32 ) ;
droid.image = game.assets[ pic_name ] ;
droid.x = 20 ;
droid.y = game.height - droid.height ;
droid.scale( 0.5, 0.5 ) ; //画像ちょっと縮小
game.rootScene.addChild( droid ) ;
// フレームイベントが発生したら処理
droid.addEventListener( Event.ENTER_FRAME, function(){
// ドロイド君斜めに移動してみる
if( droid.y == 0 || droid.y > game.height - droid.height ){
y *= -1 ;
}
if( droid.x == 0 || droid.x > game.width - droid.width ){
x *= -1 ;
}
droid.y = droid.y + y ;
droid.x = droid.x + x ;
});
}
game.start() ; // ゲーム処理開始
}
Spriteを生成して、少しつづ斜めにドロイド君を移動。
端まできたら反転。
これを繰り返し。
