javascript - 在“太空侵略者”克隆中尝试从左到右拖动 Canvas 上的飞船

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

我假设我使用onMouseDown来做到这一点，所以在页面加载时就拥有了这个...

canGame.onMouseDown = canCanvas.onMouseDown(e);

这是创建我的飞船的代码

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

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

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

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

最佳答案

就像我在评论中所说的那样，执行这种行为的最佳方法是使用事件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 :)

关于javascript - 在“太空侵略者”克隆中尝试从左到右拖动 Canvas 上的飞船，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21650941/