1

それで、私は 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);
}
4

1 に答える 1

1

スプライトが 15x15 の場合、 1 ではなく 0 にする必要がsrcXありsrcYます。また、コードはマウス ポイントでスプライトの左上隅を描画することに注意してください。中央に配置したい場合は、次のことを行う必要があります。

drawX = mouseX - width / 2;
drawY = mouseY - height / 2;
于 2013-11-11T21:35:07.813 に答える