何事にもメゲない、弓削田です。
前回構築した、スマートフォンにおけるキャラクターの移動操作で、
移動先（方向）の地面マスを選択する方式が、思いの外、使いづらかったので、
今回は、画面のどこでも、画面タッチでスワイプして、方向を決める方式を構築してみたいと思います。
仕様検討
とりあえず、仕様を決めますが、基本的には、前回のものよりも、実はものすごく簡単で、
画面をタップして、指を動かしてスワイプして、指を離したら決定という、タッチイベントをそのまま使って、
タッチ開始点と、タッチ終了点の２点間の角度を求めて、その角度に近い方向にキャラクターを移動させればいいだけなんですね。
ついで機能として、ほんのちょこっと触っただけで、移動してしまうのを防ぐために、一定以下の移動距離は、
処理をスキップするという機能も付けておこうと思います。
２点を結ぶ直線の角度の求め方
ということで、スマホイベントのtouchstart , touchendの処理で、
touchstartで、開始点をキャッシュしておき、touchendで、終了点を取得して、開始点との間に惹かれた疑似直線の角度を計算します。
プログラミングをやっていても、あまり算術を使わない人も多いと思いますが、
javascriptで、この処理を書くのは、次のようにすればいいのですね。
var data = {};
window.addEventListener("touchstart" , function(e){
data.start = {
x : e.touches[0].pageX
y : e.touches[0].pageY
}
});
window.addEventListener("touchend" , function(e){
data.end = {
x : e.changedTouches[0].pageX
y : e.changedTouches[0].pageY
}
// 角度取得
let deg = Math.atan2(data.end.y - data.start.y, data.end.x - data.start.x) / (Math.PI / 180);
deg = deg < 0 ? 360 + deg : deg;
let direction = null;
// 右方向
if(deg < 90){
direction = "right";
}
// 下方向
else if(90 <= deg && deg < 180){
direction = "bottom";
}
// 左方向
else if(180 <= deg && deg < 270){
direction = "left";
}
// 上方向
else{
direction = "top";
}
// キャラクター移動処理
...
});
一気にコードのみ書きましたが、少し解説すると、角度を求めるには、次の構文になります。
let deg = Math.atan2(終了Y - 開始Y, 終了X - 開始X) / (Math.PI / 180);
時計で言うところの３時が0°になって、javascriptでこの計算をすると、-180 ~ 0 ~ +180という角度が取得できます。
そしてこれを、
deg = deg < 0 ? 360 + deg : deg;
こうすることで、整数の 0 ~ 360°の角度が求められます。
さらにその角度から、どの方向に向けばいいかを決めて、キャラ移動につなげてあげればいいのですね。
２点間の距離の求め方
次に、せっかく取得した２点のデータを使って、その距離を求めてみましょう。
function get_distance(pos1 , pos2){
let x = Math.pow(pos2.x - pos1.x, 2);
let y = Math.pow(pos2.y - pos1.y, 2);
return Math.sqrt(x + y);
}
こんな関数を作ってみました。
開始、終了をそれぞれ、{x,y}というオブジェクトデータにして、この関数に投げると、
そのポイント感の距離が返ってきます。
この際の距離の単位は、表示されているポイント数です。
これを、１マスのサイズよりも小さい場合は、処理をキャンセルしてあげればいいのですね。
ふ〜〜〜！
触った感じ、この処理がとてもいい感じです。
前回の方式も残しておいて、何かの際に使うとしましょう。
とりあえず、タッチ処理のキャラ移動は、これにて完了です！
