0
我想創建一個名爲Sprite的基類，然後創建任何類的子類，在本例中爲「狗」。Javascript中的多態行爲
我想要的對象具有所有相同的屬性，如x，y，寬度，高度，但有不同的方法行爲，如這個名爲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);
}