それで、私は JavaScript でいくつかのゲーム (または私がゲームと呼ぶもの) をコーディングしていました。基本的に、キャンバス上の場所をクリックすると、そこにプレーヤーが描画されます。しかし、クリックすると、スプライトがマウスのポイントにいくらかオフセットされました (正確にはわかりません)。スプライトがマウスのポイントに正確に描画されるようにするにはどうすればよいですか?
画像へのリンク: http://i.imgur.com/Wnqb3L6.jpg?1
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.addEventListener('mousemove', mouseMoved, false);
canvas.addEventListener('click', drawPlayerPos, false);
var spriteSheet = new Image();
spriteSheet.src = 'spritesheet.png';
spriteSheet.addEventListener('load', init, false);
var gameWidth = canvas.width;
var gameHeight = canvas.height;
function init()
{
drawPlayerPos();
}
var mouseX;
var mouseY;
function mouseMoved(e)
{
mouseX = e.pageX - canvas.offsetLeft;
mouseY = e.pageY - canvas.offsetTop;
document.getElementById('mouseCoors').innerHTML = 'X: ' + mouseX + ' Y: ' + mouseY;
}
function drawPlayerPos()
{
var srcX = 1;
var srcY = 1;
var drawX = mouseX;
var drawY = mouseY;
var width = 15;
var height = 15;
ctx.drawImage(spriteSheet,srcX,srcY,width,height,drawX,drawY,width,height);
}