Question

我在画布上绘制了一个“船”，我希望能够在单击时在画布底部左右拖动它。我做了一些研究，但我没有运气。

我假设我使用onMouseDown来执行此操作，所以当页面加载时我有这个...

canGame.onMouseDown = canCanvas.onMouseDown(e);

这是创建我的船的代码

gShip = spriteNew("MediumSpringGreen", 230, 950, 150, 20);

从那里我不确定该怎么做。我有一个gameUpdate函数可以将入侵者移到屏幕上。一个gameInit函数，它将绘制入侵者并在屏幕上发布。我还有一个gameDraw功能，可以在屏幕上绘制所有内容。我还有一些对我的问题不重要的其他问题。

这是带有完整源代码的jsfiddle。出于某种原因，虽然它在我运行HTM文件但不在jsfiddle中时会在我的浏览器上运行。

http://jsfiddle.net/f66bk/2/

Answer 1

就像我在评论中所说，做这种行为的最佳方式是使用事件mouseup，mousedown和mousemove。

我定义了一个名为isMouseDown的var来知道拖船，我在mousedown上设置为true而在mouseup上设置为false：

canGame.onMouseDown = function() { isMouseDown = true }
canGame.onMouseUp = function() { isMouseDown = false }

您还需要事件onmousemove来让您的鼠标位置正确地重新绘制您的船：

canGame.onMouseUp = function(event) { moveShip(event, this) }

在功能moveShip中，您可以获得鼠标位置并正确设置船只的位置：

function moveShip(evt, obj) {
    if(!isMouseDown)
        return;

    var target = evt.target || evt.srcElement,
        rect = target.getBoundingClientRect(),
        offsetX = evt.clientX - rect.left;

    gShip.Rect.X = offsetX - gShip.Rect.Width/2;
}

Here是你的jsfiddle：）

尝试在Space Invaders clone中从左到右拖动画布

1 个答案: