Javascript 在《太空入侵者克隆》中，试图在画布上从左向右拖动飞船

我有一个“船”，我已经在我的画布上画，我想能够拖动它左右的画布底部时，点击它。我做了一些研究，但运气不好

我假设我使用onMouseDown来做这件事，所以当页面加载时我有这个

canGame.onMouseDown = canCanvas.onMouseDown(e);

这是创建我的飞船的代码

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

从那以后，我真的不知道该怎么办。我有一个游戏更新功能，可以将入侵者移到屏幕下方。gameInit函数，可在屏幕上绘制入侵者并发送。我还有一个游戏绘制功能，它可以绘制屏幕上的所有内容。我还有一些对我的问题并不重要的问题

下面是JSFIDLE及其完整的源代码。但出于某种原因，当我运行HTM文件时，它将在我的浏览器上运行，而不是在JSFIDLE中运行

---

正如我在评论中所说，执行此类行为的最佳方法是使用事件

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) }

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;
}

在功能

moveShip

中，您可以获取鼠标位置并正确设置船舶位置：

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

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;
}

---

是您的JSFIDLE:）

您的代码在JSFIDLE中不起作用，这仅仅是因为在“框架和扩展”部分，您应该选择“无包装”，您迄今为止尝试了什么？您可能需要3个事件：鼠标向下以知道鼠标向下拖动您的船；mousemove，如果鼠标按下，它会给你鼠标的位置（x，y），这样你就可以重新绘制你的飞船；我想知道你不再拖你的船了，我没有试过。我会调查这些事件，看看我能帮你解决什么问题？你看到我的答案了吗？