0

我知道这不是关于一般代码问题的问题，但我真的只需要帮助修复我的代码。现在，我正在自己开发我的第一个 HTML5 程序，它是一个非常简单的自上而下的射击游戏。现在，我已经编写了代码，这样一艘船就会出现在屏幕上，您可以左右移动。但是，现在我正在尝试创建一个新的对象来绘制称为子弹。我从船上复制了代码，但我无法让它工作。到目前为止，这里是代码。它相当小，所以你可以理解这艘船。这是船对象：

function ship() {
    this.width = 100;
    this.height = 75;
    this.drawX = gameWidth/2 - this.width/2;
    this.drawY = gameHeight - this.height - 5;
}

画那个，我用这个功能：

ship.prototype.draw = function() {
    clearCtx(ctxPlayer);
    var srcX;
    var srcY;
    if(isRightKey) {
        srcX = 0;
        srcY = 75;
    } else if (isLeftKey) {
        srcX = 0;
        srcY = 153;
    } else {
        srcX= 0;
        srcY = 0;
    }

    ctxPlayer.drawImage(sprites,srcX,srcY,this.width,this.height,this.drawX,this.drawY, this.width, this.height);
}

顶部的那些东西只会改变图像的来源，因为如果图像以一种或另一种方式移动，则图像会有所不同。无论如何，这是子弹对象：

function BulletGreen() {
    var drawX = 0;
    var drawY = 0;
    var height = 33;
    var width = 9;
}

如您所见，它非常相似。现在，这是我用来绘制它的代码：

BulletGreen.prototype.draw = function drawBulletsGreen() {
    ctxPlayer.drawImage(sprites,350,0,this.width,this.height,this.drawX,this.drawY, this.width, this.height);
}

但是，当我在控制台中使用命令时，这似乎不起作用。它没有返回错误，但似乎根本没有改变画布。但是，做类似的事情

ctxBullet.drawImage(sprites,0,0)

将精灵表绘制到画布上。如果在这里不欢迎这种问题，我深表歉意，但我只是没有想法！这真的让我很困惑。

编辑：我在这里上传了所有内容。

4

1 回答 1

0

我想我猜对了：ctxPlayer 是你的画布对象，而 sprites 是新的图像 src（例如 abc.png），那么你可以只使用其中的 5 个而不是使用 8 个参数来绘制图像吗？在你的情况下，我认为那些将是，

ctxPlayer.drawImage(sprites,this.drawX,this.drawY, this.width, this.height);

在哪里，

this.drawX is the x coordinate where to place the image on the canvas
this.drawY is the x coordinate where to place the image on the canvas
this.width is width of the image
this.height is height of the image

类似的参数对我有用..我认为它们也对你有用:)

这是我找到的参考网址：http: //www.w3schools.com/tags/canvas_drawimage.asp

同样在 clearCtx(ctxPlayer); 您是在清除整个画布还是在绘制前一个图像的位置？如果您尝试清除整个画布，则必须完全重新绘制

于 2012-10-26T11:24:04.397 回答