enchant.js HTML5+JavaScript 重力のあるボール挙動
2013.02.28
この記事は最終更新日から1年以上が経過しています。
いやー。楽しいですね。enchant.jsは。
重力のあるボール挙動のscriptを書いてみました。ボールをドラッグ出来て、放り投げることも可能です。
何より便利だなと感じたのは、「touchstartでクリックスタート」「touchendでクリックエンド」などもカバーしてくれているところです。
デモページ
http://webcyou.com/demo/js/enchant/ball/
こちらのscriptの詳細に関しては以前の記事、
ActiinScript2.0 ボールアクション 重力、摩擦、跳ね返り係数
を参照して頂ければと思います。
順番を追って制作されたい方は以下の順を参照してください。
ActionScript 簡単なイージング
https://www.webcyou.com/?p=637
ActionScript2.0 ボール反転
https://www.webcyou.com/?p=1636
ActiinScript2.0 縦横移動ボールアクション
https://www.webcyou.com/?p=1645
ActiinScript2.0 縦横移動 ボールを掴む
https://www.webcyou.com/?p=1655
ActiinScript2.0 縦横移動 ボールを掴んで投げる
https://www.webcyou.com/?p=1668
ActiinScript2.0 ボールアクション 重力、摩擦、跳ね返り係数
https://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();
};
ではでは。
