背景
HTML5のCanvasとJavascriptを使って、スパイダーソリティア（ゲーム）を開発をしています。
問題点
掴んだカードを他のカードの上に移動させる場合、移動先のカードを判定する必要があります。
マウスポインタの座標を基準に判定すると、マウスポインタが移動先のカードの上にのっている必要がある為、カードの画像は重なっていても、移動先として判定されないケースがあります。
解決策
カードを掴んでいる状態では、ユーザーはマウスポインタではなく、表示されているカードの位置を基準にしていると考えられます。
そこで、判定基準をマウスポインタ座標からカードの重心（中心）に変更することで、ユーザーの認知に近い自然な判定条件を目指します。
カードの重心を計算する
カードの重心を計算する実装はシンプルです。
マウスポインタ座標(x, y)からカードを掴んだときの左上からのズレ量(offset_x, offset_y)を引くことで、今表示しているカードの左上座標が求まります。
この左上座標にカード幅の半分、カード高さの半分を足すと、カードの重心になります。
center.js
const center_x = (x - offset_x + card_width / 2); // X方向の重心
const center_y = (y - offset_y + card_height / 2); // Y方向の重心
まとめ
マウスポインタ座標からカードの重心基準に変更することで、自然な操作感にすることができました。
サンプルコード
最後に、今回説明した内容のサンプルコードを掲載しておきます。
center.js
const card_width = 50; // カードの幅
const card_height = 80; // カードの高さ
const src_rect = new DOMRect(10, 100, card_width, card_height); // 移動元カードがある位置
const dest_rect = new DOMRect(120, 100, card_width, card_height); // 移動先カードがある位置
const canvas = document.getElementById("canvas");
canvas.addEventListener('mousedown', onMouseDown, false);
canvas.addEventListener('mouseup', onMouseUp, false);
canvas.addEventListener('mousemove', onMouseMove, false);
var ctx = canvas.getContext("2d");
ctx.fillStyle = "darkgreen";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "red";
ctx.fillRect(src_rect.left, src_rect.top, src_rect.width, src_rect.height);
ctx.fillStyle = "yellow";
ctx.fillRect(dest_rect.left, dest_rect.top, dest_rect.width, dest_rect.height);
var holding = false; // カードをつかんでいる状態ならtrue
var offset_x = 0; // マウスポインタ座標とカード左端座標のズレ幅
var offset_y = 0; // マウスポインタ座標とカード上端座標のズレ幅
function onMouseDown(event){
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
if(x >= src_rect.left && x <= src_rect.right){
if(y >= src_rect.top && y <= src_rect.bottom){
offset_x = x - src_rect.left;
offset_y = y - src_rect.top;
holding = true;
}
}
event.preventDefault();
}
function onMouseUp(event){
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const center_x = (x - offset_x + card_width / 2); // X方向の重心
const center_y = (y - offset_y + card_height / 2); // Y方向の重心
if(center_x >= dest_rect.left && center_x <= dest_rect.right){
if(center_y >= dest_rect.top && center_y <= dest_rect.bottom){
window.alert("重心基準で重なった!");
}
}
holding = false;
event.preventDefault();
}
function onMouseMove(event){
if(holding){
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "darkgreen";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "yellow";
ctx.fillRect(dest_rect.left, dest_rect.top, dest_rect.width, dest_rect.height);
ctx.fillStyle = "red";
ctx.fillRect(x - offset_x, y - offset_y, src_rect.width, src_rect.height);
event.preventDefault();
}
}
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script src="./center.js"></script>
</body>
</html>