试图在 Space Invaders 克隆中从左到右拖动画布上的船答案

【问题标题】：Trying to drag ship on canvas from left to right in Space Invaders clone试图在 Space Invaders 克隆中从左到右拖动画布上的船
【发布时间】：2016-05-28 07:49:11
【问题描述】：

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

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

canGame.onMouseDown = canCanvas.onMouseDown(e);

这是创建我的船的代码

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

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

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

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

【问题讨论】：

您的代码不能在 jsfiddle 中运行，只是因为在“框架和扩展”部分中，您应该选择“No wrap - in ”
到目前为止你尝试过什么？您可能需要 3 个事件： mousedown 以知道鼠标已按下以拖动您的船； mousemove 如果您的鼠标按下，它将为您提供鼠标的位置（x，y），以便您可以重新绘制您的船； mouseup 就知道你不再拖船了。
我还没有尝试过。我会研究这些事件，看看我能做些什么
您的问题解决了吗？你看到我的回答了吗？

标签： javascript jquery html canvas

【解决方案1】：

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

我定义了一个名为 isMouseDown 的变量来知道船被拖了，我在 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 :)

【讨论】：