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 x1 = 1 ;
var y1 = -1 ;
var x2 = 1 ;
var y2 = -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(){
//１つ目の集団を作る
var droid = new Array() ;
var i ;
for( i = 0 ; i < 20 ; i++ ){
//Spriteを作成する
droid[ i ] = new Sprite( 32, 32 ) ;
droid[ i ].image = game.assets[ pic_name ] ;
if( i < 10 ){ //最初の集団
droid[ i ].x = 20 + ( i * 10 ) ;
droid[ i ].y = game.height - droid[ i ].height - ( i * 2 );
}
else{ //次のの集団
droid[ i ].x = 20 + ( i * 10 ) ;
droid[ i ].y = droid[ i ].height + ( i * 2 ) ;
}
droid[ i ].scale( 0.5, 0.5 ) ; //画像ちょっと縮小
droid[ i ].x1 = 1 ;
droid[ i ].y1 = -1 ;
droid[ i ].counter = 0 ;
game.rootScene.addChild( droid[ i ] ) ;
// フレームイベントが発生したら処理
droid[ i ].addEventListener( Event.ENTER_FRAME, function(){
if( this.counter % 2 === 0) {
// ドロイド君斜めに移動してみる
if( this.y <= 0 || this.y > game.height - this.height ){
this.y1 *= -1 ;
}
if( this.x <= 0 || this.x > game.width - this.width ){
this.x1 *= -1 ;
}
this.y = this.y + this.y1 ;
this.x = this.x + this.x1 ;
}
else{
// ドロイド君回転
this.rotate( 8 ) ;
}
this.counter++ ;
});
}
}
game.start() ; // ゲーム処理開始
}
なぜかわかりませんが「移動して回転」と同時にできなかったので、
「移動」と「回転」を１フレームごとに繰り返します。
ドロイド君が軍団で回転しながら移動します。
実際の動作はここをクリック。
