JavaScript clearInterval

引っ張りゲーを実現するには指を放した後に引っ張った逆方向に一定時間画像を移動し続ける必要がある。
タイマーを利用するしかないだろう。

JavaScript では setInterval 関数を使う。
clearInterval していないサンプルコードが多い、動かしっぱなしはヤメようよ。

下記は 20/1000 秒毎に画像を移動、そして 1 秒でタイマーを停止してリセット。
タイマー毎に引っ張った距離の 1/5 ずつ戻す例にしてみた。
大抵のゲームは一定距離だけど、三角関数で計算するしかないだろうな…

それとタイマーを動かしている間は touchmove ハンドラ等を処理しないように。
ついポンポンとタッチすると酷いことになる。

記憶しておくデータが増えてとっ散らかるので構造体っぽくまとめている。
この記述方法は Python をやっている人ならすぐ解ると思う。
一つしか使わないなら static でもいいけど、その場合初期化されないので注意。
つまり下記では ballData.timer_id だと -1 にならないということです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>画像を引っ張って弾く</title>
<!-- for Smart Phone -->
<meta name="viewport" content="
    width=device-width,
    initial-scale=1.0,
    minimum-scale=1.0,
    maximum-scale=1.0,
    user-scalable=no" />
<style>
body {
    margin: 0;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
}
#ID_CANVAS {
    background-color: #FFEE00;
}
</style>
<script type="text/javascript"><!--

    var canvas = null;
    var context = null;
    var ball = null;
    var offset = 24;
    // struct
    var ballData = function() {
        this.timer_id = -1;
        this.timer_count = 0;
        this.x = 0;
        this.y = 0;
        this.move_x = 0;
        this.move_y = 0;
    }
    var BallData = new ballData();

    // Event Handler
    var onBallTouchStart = function(e) {
        e.preventDefault();
    }
    var onBallTouchMove = function(e) {
        if (BallData.timer_id == -1) {
            context.clearRect(0, 0, canvas.width, canvas.height);
            BallData.x = e.touches[0].pageX;
            BallData.y = e.touches[0].pageY;
            context.beginPath();
            context.moveTo(160, 160);
            context.lineTo(BallData.x, BallData.y);
            context.stroke();
            moveBall(BallData.x, BallData.y);
        }
    }
    var onBallTouchEnd = function(e) {
        if (BallData.timer_id == -1) {
            BallData.move_x = (BallData.x - 160) / 5;
            BallData.move_y = (BallData.y - 160) / 5;
            BallData.timer_count = 50;
            BallData.timer_id = setInterval(onTimer, 20);
        }
    }
    // Timer Handler
    var onTimer = function() {
        if (BallData.timer_count > 0) {
            BallData.x -= BallData.move_x;
            BallData.y -= BallData.move_y;
            moveBall(BallData.x, BallData.y);
            BallData.timer_count--;
        } else {
            clearInterval(BallData.timer_id);
            BallData.timer_id = -1;
            context.clearRect(0, 0, canvas.width, canvas.height);
            moveBall(160, 160);
        }
    }
    // Func
    var moveBall = function(x, y) {
        ball.style.left = x - offset + "px";
        ball.style.top  = y - offset + "px";
    }
    // Connect
    var init = function() {
        if (window.TouchEvent) {
            canvas = document.getElementById("ID_CANVAS");
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight - 100;
            context = canvas.getContext("2d");
            ball = document.getElementById("ID_BALL");
            ball.addEventListener("touchstart",onBallTouchStart);
            ball.addEventListener("touchmove",onBallTouchMove);
            ball.addEventListener("touchend",onBallTouchEnd);
            moveBall(160, 160);
        }
    }
    //-->
</script>

</head>
<body onLoad="init()">
<div>
<canvas id="ID_CANVAS"></canvas>
<img id="ID_BALL" src="ball.png" style="position:absolute">
</div>
<br />
<p><a href=".">Back</a></p>
</body>
</html>

画像を引っ張って弾く

jsconsole

JavaScript コンソールって便利だよね。
もちろん本物の iPhone でも動いたよ。

次は画面隅で跳ね返る手段の実装か、面倒くさそうだ。
しかしずっとウチ姫型で作っているけどモンスト型のほうが需要あるんだろうな。