enchant.jsのサンプル

カラフルな四角い物体が落下していくアニメーションを試しに作ってみました。
画面をタップ(クリック)すると停止・再開します。
enchant_sample.png

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
   <script src="enchant.min.js"></script>
   <script src="main.js"></script>
   <title>サンプル</title>
</head>
<body style="margin:0;">
</body>
</html>


main.js

enchant();

window.onload = function(){
  pause = false;
   var scale = window.innerHeight / 480 * 1.5;

  // 画面サイズ
   winX = Math.round(window.innerWidth / scale);
   winY = Math.round(window.innerHeight / scale);

  // ボックス
   boxNum = 200;
   box = new Array();

  // 初期化
   game = new Game(winX, winY);
   game.fps = 60;
   game.scale = scale;

  // Scene作成
   scene = new Scene();
   scene.backgroundColor = '#000000';
   game.pushScene(scene);

  game.onload = function() {
       game.addEventListener(Event.ENTER_FRAME, onEnterFrame);
       scene.addEventListener(Event.TOUCH_START, onTouch);
   }
   game.start();

  function onEnterFrame() {
       // ボックスの落下
       for (var i = boxNum - 1; i >= 0; i--) {
           // 未作成のボックス
           if (typeof box[i] == 'undefined') {
               box[i] = new Sprite();
               initBox(i);
               scene.addChild(box[i]);
           }
           // 既存のボックス
           else {
               box[i].y += box[i].motion;

              // 画面下部に消えたらボックスを初期化
               if (box[i].y > winY) {
                   initBox(i);
               }
           }
       }
   }
}

// タッチ時の処理
function onTouch(e) {
  if (pause) game.start(); else game.pause();
   pause = !pause;
}

// ボックス設定
function initBox(key) {
  var size = Math.random() * 10;
   box[key].width = size;
   box[key].height = size;
   box[key].x = Math.random() * (winX - size);
   box[key].y = 0 - size;
   box[key].motion = Math.random() * 20;

  var color = (Math.round(Math.random() * 256 * 256 * 256) - 1).toString(16);
   box[key].backgroundColor = '#' + ('00000' + color).slice(-6);
}



コメントを投稿するには画像の文字を半角数字で入力してください。


画像認証

  • 最終更新:2012-12-05 10:28:46

このWIKIを編集するにはパスワード入力が必要です

認証パスワード