Javascript 修改函数以传递图像

我正在用一个模板制作一个Javascript html游戏，这个模板是作为作业的一部分提供给我们的。我对Javascript完全陌生，但我已经成功地将我的所有游戏元素（除了我的飞弹）都加入了Javascript。我想更改下面代码中的导弹（因为它使用彩色矩形），而不是实际图像，这样我的播放器就可以从png发射导弹。导弹有一个阵列，但功能本身使用rgb颜色。如何将图像传递给函数

我也有一个外部显示对象附加到游戏文件。任何建议都很好，因为我被卡住了

导弹功能：

function Missile ( x,y, width, height, dx, dy) { //dx and dy is the direction the bullet will fire.

    //no image because we will overright the draw method to use canvas drawing.
    DisplayObject.call(this,'missile', undefined, x,y, width, height);

    //declare private variables

    var alive = true;

    var facingX = dx;
    var facingY = dy;

    var hue = 0;
    var sat = 1.0;
    var lightness = 0.5;

    // public functions

    this.update = function () {
        //move missile
        hue+=0.06;
        if(hue>1) hue=0;
        this.x += facingX*15;
        this.y += facingY*15;
    }

    this.draw = function (context) {

        for(var i = 0; i<4; i++) {

            var h = hue-(i*0.06);
            if(h<0) h+=1.0;
            var rgb = hslToRgb(h,sat,lightness);
            context.fillStyle = "rgb("+Math.round(rgb[0])+","+Math.round(rgb[1])+","+Math.round(rgb[2])+")";
            context.fillRect(this.x-(facingX*i*5),this.y-(facingY*i*5),5,5);
        }
    }

    this.kill = function () {
        alive = false;
    }

    this.isDead = function () {
        return !alive;
    }
}

Missile.prototype = new DisplayObject();

function hslToRgb(h, s, l){
    var r, g, b;

    if(s == 0){
        r = g = b = l; // achromatic
    }else{
        function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }

    return [r * 255, g * 255, b * 255];
}

---

根据DisplayObject的定义方式，可以简单地添加一个参数：

function Missile ( x,y, width, height, dx, dy, image) {     
    DisplayObject.call(this,'missile', image, x,y, width, height);

    ...
}

然后您只需删除覆盖的

draw

方法

---

如果你发布DisplayObject的代码，我可能会给你一个更好的答案。

你能给我们看一下DisplayObject类吗？@AlexMA请注意。谢谢，这真的很有帮助！！我会尝试一下，看看我是如何得到的，我会发布DisplayObject:）这段代码仍然有效，唯一需要注意的是，你会希望传入一个图像对象，而不仅仅是图像的url。我知道我会将图像传递给函数，但我不确定我是如何做到的。每次我摆脱原来的导弹我的游戏停止工作，并冻结时，它开始。非常感谢您的帮助再次！

function Missile ( x,y, width, height, dx, dy, image) {     
    DisplayObject.call(this,'missile', image, x,y, width, height);

    ...
}