javascript - 修改一个函数来传递图像

Question

我正在根据我们作为作业的一部分给出的模板制作一个 Javascript html 游戏。我对 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];
}

显示对象:

Image.prototype.draw = function draw (context,x,y, w,h) {
    if(context) context.drawImage(this,x,y,w || this.width, h || this.height);
};

//define rectangle object that DisplayObject will inherit from.
var Rect2d = function (x,y,width,height) {
    this.x = x || 0;
    this.y = y || 0;
    this.width = width || 1;
    this.height = height || 1;
};

var DisplayObject = function (name, image, x,y, width, height) {
    if(image) Rect2d.call(this,x,y,width || image.width, height || image.height);
    else Rect2d.call(this,x,y,width,height);
    this.name = name || '';
    this.img = image;
    this.alpha = 1.0;
};

DisplayObject.prototype = new Rect2d(); 
//if you do not use new here then anything you add to DisplayObject.prototype is added to Rect2d            

//add functions to Display object. Because these are added to the prototype 
//they are not visible if you use the hasOwnProperty method on a DisplayObject.
DisplayObject.prototype.setImage = function (img) {
    this.img = img;
    return this;
};

DisplayObject.prototype.scaleToImage = function () {
    if(this.img) {
        this.width = this.img.width;
        this.height = this.img.height;
    }
    return this;
};

//this function wraps our new Image draw() method
DisplayObject.prototype.draw = function (context) {
    //var tmp_alpha = context.globalAlpha;
    //context.globalAlpha = this.alpha;
    this.img.draw(context, this.x,this.y,this.width,this.height);
    //context.globalAlpha = tmp_alpha;
    return this;
};

Answer 1

根据 DisplayObject 的定义方式，它可能很简单，只需添加一个参数即可:

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

    ...
}

然后您只需删除覆盖的 draw 方法即可。

如果您发布 DisplayObject 的代码，我也许可以给您更好的答案。