Question

我正在尝试创建一个名为Sprite的基类，然后创建任何子类，在本例中为“Dog”。

我希望对象拥有所有相同的属性，如x，y，width，height，但是对于方法有不同的行为，比如这个名为mouseEventListener的行为。

我似乎无法使代码正常工作。

function Sprite(imgg,w,h)
{
    this.img = imgg;
    this.x = 350;//Math.random()*700;
    this.y = 350;//Math.random()*700;
    this.vx = 0;//Math.random()*8-4;
    this.vy = 0;//Math.random()*8-4;
    this.width = w;
    this.height = h;
    this.rotatespeed = 0.00;
    this.rotate = 40;

}

Sprite.prototype.drawSprite = function(ctx)
{
    ctx.save();

    ctx.translate(this.x,this.y);
    ctx.rotate(this.rotate);

    ctx.drawImage(this.img,0,0,this.img.width,this.img.height,-this.width/2,-this.height/2,this.width,this.height);

    ctx.restore();
}

Sprite.prototype.mouseEventListener = function(evt, type)
{
    console.log("In Sprite");
}


Dog.prototype.mouseEventListener = function(evt,type)
{
    console.log("In Dog");
}

以下是完整代码：

/**
How to use this library

1. 

*/

function Sprite(imgg,w,h)
{
    this.img = imgg;
    this.x = 350;//Math.random()*700;
    this.y = 350;//Math.random()*700;
    this.vx = 0;//Math.random()*8-4;
    this.vy = 0;//Math.random()*8-4;
    this.width = w;
    this.height = h;
    this.rotatespeed = 0.00;
    this.rotate = 40;

}
Sprite.prototype.drawSprite = function(ctx)
{
    ctx.save();

    ctx.translate(this.x,this.y);
    ctx.rotate(this.rotate);

    ctx.drawImage(this.img,0,0,this.img.width,this.img.height,-this.width/2,-this.height/2,this.width,this.height);

    ctx.restore();
}
Sprite.prototype.updateSprite = function()
{
    this.x += this.vx;
    this.y += this.vy;

    this.rotate += this.rotatespeed;


    if(this.x > 700)
        this.vx = -this.vx;
    if(this.x < 0)
        this.vx = -this.vy;

    if(this.y > 700)
        this.vy = -this.vy;
    if(this.y < 0)
        this.vy = -this.vy;
}
Sprite.prototype.mouseEventListener = function(evt, type)
{
    console.log("In Sprite");
}

Dog.prototype = new Sprite();
Dog.prototype.mouseEventListener = function(evt,type)
{
    console.log("In Dog");
}

//------------------------------------------
//GLOBAL VARIALBES

var setIntervalAmount = 30;
var scrollAmount = 0.5;
var game;

function Camera()
{
    this.x = -350;
    this.y = -350;
    this.rotate = 0;
    this.scale = 0;   
    this.scale = 1;
    this.previousX = 0;
    this.previousY = 0;
    this.drag = false;
}

function Game()
{
    this.camera = new Camera();

    this.canvas = document.createElement("canvas");
    document.body.appendChild(this.canvas);
    this.canvas.id="mycanvas";
    this.canvas.width = 700;
    this.canvas.height = 700;
    this.context = this.canvas.getContext("2d");         
    this.objects = new Array();  

}

Game.prototype.gameLoop = function()
{
    this.context.clearRect(0,0,this.canvas.width, this.canvas.height);
    this.context.save();


    this.context.translate(this.canvas.width/2, this.canvas.height/2);
    this.context.scale(this.camera.scale,this.camera.scale);
    this.context.rotate(this.camera.rotate);
    this.context.translate(this.camera.x,this.camera.y);


    for(var i=0;i<this.objects.length;i++)
    {
        this.objects[i].updateSprite();
        this.objects[i].drawSprite(this.context);         
    }
    this.context.restore();
}

Game.prototype.handleMouse = function(evt,type)
{
    var mouseX = event.clientX - this.context.canvas.offsetLeft;
    var mouseY = event.clientY - this.context.canvas.offsetTop;
    var canvasX = mouseX * this.context.canvas.width / this.context.canvas.clientWidth;
    var canvasY = mouseY * this.context.canvas.height / this.context.canvas.clientHeight;

   // canvasX = this.camera.scale / canvasX;
   // canvasY = this.camera.scale / canvasY;

    canvasX /= this.camera.scale;
    canvasY /= this.camera.scale;

    if(type == "move")
    { 
        if(this.camera.drag == true)
        {
            this.camera.x -= this.camera.previousX-canvasX;
            this.camera.y -= this.camera.previousY-canvasY;
        }

        this.camera.previousX = canvasX;
        this.camera.previousY = canvasY;
    }
    if(type =="down")
    {
        this.camera.drag = true;
    }
    if(type == "up")
    {
        this.camera.drag = false;
    }

    for(var i=0;i<this.objects.length;i++)
    {
        this.objects[i].mouseEventListener(evt,type);
    }
};

Game.prototype.mouseWheelListener = function(evt)
{ 
    if(evt.wheelDelta < 0)
        game.camera.scale /= (1+scrollAmount);
    else 
        game.camera.scale *= (1+scrollAmount);
}

function mouseWheelListener() 
{
    var evt = window.event;
    game.mouseWheelListener(evt);
}
function mouseDownListener()
{
    var evt = window.event;
    var type = "down"
    game.handleMouse(evt,type);
}
function mouseUpListener()
{
    var evt = window.event;
    var type = "up"
    game.handleMouse(evt,type);
}
function mouseMoveListener()
{
    var evt = window.event;
    var type = "move"
    game.handleMouse(evt,type);
}

//------------------

window.addEventListener('load',function(event){startgame();});

var dog = new Image();
dog.src = "dog.png";

function startgame()
{
    game = new Game();

    for(var i=0;i<1;i++)
        game.objects.push(new Dog(dog,250,250));


    setInterval(function(){game.gameLoop()},setIntervalAmount);

    document.getElementById("mycanvas").addEventListener("wheel", mouseWheelListener);
    document.getElementById("mycanvas").addEventListener("mousedown", mouseDownListener);
    document.getElementById("mycanvas").addEventListener("mouseup", mouseUpListener);
    document.getElementById("mycanvas").addEventListener("mousemove", mouseMoveListener);
}

Answer 1

我在Youtube视频中找到答案......

Dog.prototype = Object.create(Sprite.prototype);

这是我需要的代码行。

Javascript中的多态行为

1 个答案: