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を生成して、少しつづ斜めにドロイド君を移動。
端まできたら反転。
これを繰り返し。