このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2013.02.28

enchant.js HTML5+JavaScript 重力のあるボール挙動

いやー。楽しいですね。enchant.jsは。

重力のあるボール挙動のscriptを書いてみました。ボールをドラッグ出来て、放り投げることも可能です。

何より便利だなと感じたのは、「touchstartでクリックスタート」「touchendでクリックエンド」などもカバーしてくれているところです。

デモページ

http://webcyou.com/demo/js/enchant/ball/

こちらのscriptの詳細に関しては以前の記事、

ActiinScript2.0 ボールアクション 重力、摩擦、跳ね返り係数

を参照して頂ければと思います。

順番を追って制作されたい方は以下の順を参照してください。

ActionScript 簡単なイージング

http://www.webcyou.com/?p=637

ActionScript2.0 ボール反転

http://www.webcyou.com/?p=1636

ActiinScript2.0 縦横移動ボールアクション

http://www.webcyou.com/?p=1645

ActiinScript2.0 縦横移動 ボールを掴む

http://www.webcyou.com/?p=1655

ActiinScript2.0 縦横移動 ボールを掴んで投げる

http://www.webcyou.com/?p=1668

ActiinScript2.0 ボールアクション 重力、摩擦、跳ね返り係数

http://www.webcyou.com/?p=1676

そう、ActionScriptで記述していたのを持って来る感じで流用できるところがenchant.jsの素晴らしいところだったりしますね。

要点のみ挙げていきたいと思います。

enchant();

おまじない。全ての始まりはここから。

var game = new Game(320, 320);

ゲームのステージの幅を決めます。

enchant.Class.create()

容易にクラス(という考え)を生成することが出来ます。

initializeのメンバーが最初に実行されるようになっております。

this.addEventListener("touchstart",this.onTouch);
this.addEventListener("touchmove",this.onTouchMove);
this.addEventListener("touchend",this.onTouchEnd);

本来なら、スマートフォンでのタッチのイベントのみを取得するのですが、enchant.jsではクリックにも対応している。

this.addEventListener('enterframe', this.onEnterFrame);

enterframeのイベントを取得。Flash同様の要領でscriptを記述していける。

game.onload = function() { var ball000 = new ball(100, 100); };

new演算子でコンストラクタの生成。x座標100px 、y座標100pxに配置。

game.start();

いけ。

最後の全部のスクリプトを

HTML & CSS

<!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">
<script type="text/javascript" src="enchant.js"></script>
<script type="text/javascript" src="main.js"></script>
<style type="text/css">
body {
  margin: 0;
  padding: 0;
  background: #eee;
}
canvas { background: #fff; }
</style>
</head>
<body>
</body>
</html>

JavaScript (main.js)

enchant();
window.onload = function() {
  var game = new Game(320, 320);
  game.preload('ball.png');
  game.speedX = 5;
  game.speedY = 5;
  game.ballHold = 0;
  game.x1 = 0;
  game.x2 = 0;
  game.y1 = 0;
  game.y2 = 0;

  var ball = enchant.Class.create(enchant.Sprite, {
    initialize: function(x, y) {
      enchant.Sprite.call(this, 50, 50);
      this.x = x;
      this.y = y;
      this.image = game.assets['ball.png'];

      this.addEventListener("touchstart",this.onTouch);
      this.addEventListener("touchmove",this.onTouchMove);
      this.addEventListener("touchend",this.onTouchEnd);
      this.addEventListener('enterframe', this.onEnterFrame);      
      game.rootScene.addChild(this);
    },
    onTouch : function(e) {
      game.ballHold = 1;
    },
    onTouchMove : function(e) {
      this.x = e.x -25;
      this.y = e.y -25;
    },
    onTouchEnd : function(e) {
      game.ballHold = 0;
    },  
    onEnterFrame : function(){
      if(game.ballHold == 1) {
        game.x1 = game.x2;
        game.y1 = game.y2;
        game.x2 = this.x;
        game.y2 = this.y;
        game.speedX = (game.x2 - game.x1);
        game.speedY = (game.y2 - game.y1);
      } else {
        if (this.x > 320 - this.width) {
          this.x = 320 - this.width;
          game.speedX = game.speedX*-1*0.8;
        }
        if (this.x < 0){
          this.x = 0;
          game.speedX = game.speedX*-1*0.8;
        }
        if (this.y < 0) {
          this.y = 0;
          game.speedY = game.speedY*-1*0.8;
        }
        if (this.y > 320 - this.height) {
          this.y = 320 - this.height;
          game.speedY = game.speedY*-1*0.8;
        }
        game.speedX = game.speedX*0.99;
        game.speedY = game.speedY*0.99+0.98;
        this.x += game.speedX;
        this.y += game.speedY;
      }
    }
  });
  game.onload = function() { var ball000 = new ball(100, 100); };
  game.start();
};

ではでは。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。