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

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();
};

ではでは。

Three.js – ShaderMaterialで、ブレンドシェイプ（MorphTarget）アニメーション対応

2025.10.15

JavaScriptで、DOMを放り投げる処理

2024.07.27

2022 VIVA JS World Cup 開幕!! 〜 Vue3で作るサッカーゲーム〜

2022.12.24

OAuthのフローを可視化できるツールを作ってみました。

2020.05.17

令和の時代に、JavaScriptで Shift-JISファイル作成全銀データフォーマットに対応する。

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

2020.01.31

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

2020.01.24

あと10日で「jsdo.it」のサービスが終わってしまう！！ソースダウンロードまだの方は急げぇ〜！

2019.10.21

正規表現先読み後読み論理積

2019.07.28

「二段階認証？」という方も 5分で覚えるパスワードレス WebAuthnのまとめ

2019.07.07

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

web帳

Archives Details