画布不从spritesheet绘制图像

时间:2013-06-03 19:51:25

标签: javascript jquery canvas

好吧所以我设法绘制了一个玩家的图像,但是现在我想要画一个敌人,它就不会工作了。我已经添加了警报,它显示该程序正在执行绘制敌人功能,但它仍然不会绘制?

以下是运行的内容:http://www.taffatech.com/DarkOrbit.html 整个代码:http://www.taffatech.com/Source.js

如果有人能帮助我,我将非常感激!

以下是我的数据功能:

function Player()  //Object
{

//////Your ships values
this.PlayerHullMax = 1000;
this.PlayerHull = 1000;
this.PlayerShieldMax = 1000;
this.PlayerShield = 347;
this.SpaceCrystal = 2684;
this.Speed = 10; //should be around 2 pixels every-time draw is called by interval, directly linked to the fps global variable
////////////

///////////flags
this.isUpKey = false; 
this.isDownKey = false;
this.isLeftKey = false;
this.isRightKey = false;
/////////////

//////////extra


/////////////

////Pick Ship
this.type = "Cruiser";
this.srcX = PlayerSrcXPicker(this.type);
this.srcY = PlayerSrcYPicker(this.type);
this.drawX = PlayerdrawXPicker(this.type);
this.drawY = PlayerdrawYPicker(this.type);
this.playerWidth = PlayerWidthPicker(this.type);
this.playerHeight = PlayerHeightPicker(this.type);
////


}

Player.prototype.draw = function()
{
ClearPlayerCanvas();
ctxPlayer.globalAlpha=1;
this.checkDirection(); //must before draw pic to canvas because you have new coords now     from the click
ctxPlayer.drawImage(spriteImage,this.srcX,this.srcY,this.playerWidth,this.playerHeight,this.drawX,this.drawY,this.playerWidth,this.playerHeight);

};

Player.prototype.checkDirection = function() //these functions are in the PLayer class
{





if(this.isUpKey == true)//if true 
{
    if(Player1.drawY >= (0 + this.Speed))
  {
 this.drawY -= this.Speed; 

  }
}

if(this.isRightKey == true)
{

 if(Player1.drawX <= (canvasWidthPlayer - this.playerWidth))
  {
  this.drawX += this.Speed;
  }
}

if(this.isDownKey == true)
{
  if(Player1.drawY <= (canvasHeightPlayer - this.playerHeight))
  {
  this.drawY += this.Speed;
  }
}

if(this.isLeftKey == true)
{
if(Player1.drawX >=  (0 + this.Speed))
 {
  this.drawX -= this.Speed;
  }
}
};


///////////////////END   PLAYER DATA////////////////////////////////////////////////
function Enemy()  //Object
{

//////Your ships values
this.EnemyHullMax = 1000;
this.EnemyHull = 1000;
this.EnemyShieldMax = 1000;
this.EnemyShield = 347;
this.SpaceCrystalReward = 2684;
this.EnemySpeed = 10; //should be around 2 pixels every-time draw is called by      interval, directly linked to the fps global variable
////////////



////Pick Ship
this.type = "Hover";
this.srcX = EnemySrcXPicker(this.type);
 this.srcY = EnemySrcYPicker(this.type);
 this.drawX = EnemydrawXPicker(this.type);
this.drawY = EnemydrawYPicker(this.type);
this.enemyWidth = EnemyWidthPicker(this.type);
this.enemyHeight = EnemyHeightPicker(this.type);
////


 }

Enemy.prototype.draw = function()
{
ClearEnemyCanvas();
ctxEnemy.globalAlpha=1;
  ctxEnemy.drawImage(spriteImage,this.srcX,this.srcY,this.playerWidth,this.playerHeight,this.    drawX,this.drawY,this.playerWidth,this.playerHeight);

}
//////////START ENEMY DATA//////////////////

function PlayerSrcXPicker(type) //these functions can be used by player and enemy
{
if (type == "Cruiser")

 {
    return 0;
 }


 }

 function PlayerSrcYPicker(type)
 {
 if (type == "Cruiser")

 {
    return 1385;
 }
 }

 function PlayerdrawXPicker(type)
 {
 if (type == "Cruiser")

 {
    return 100;
 }
 }

function PlayerdrawYPicker(type)
{
 if (type== "Cruiser")

 {
    return 400;
 }
 }


 function PlayerWidthPicker(type)
  {
  if (type == "Cruiser")

  {
    return 148;
 }
  }

  function PlayerHeightPicker(type)
  {
  if (type == "Cruiser")

  {
    return 85;
 }
  }

 function EnemySrcXPicker(type)
  {
 if (type == "Hover")

 {

    return 906;
  }
 }

 function EnemySrcYPicker(type)
 {
 if (type == "Hover")

  {
    return 601;
 }
}

function EnemydrawXPicker(type)
{
if (type == "Hover")

 {
    return 800;
 }
}

function EnemydrawYPicker(type)
 {
if (type== "Hover")

 {
    return 300;
 }
 }


function EnemyWidthPicker(type)
{
if (type == "Hover")

 {
    return 90;
 }
}

function EnemyHeightPicker(type)
{
if (type == "Hover")

 {

    return 75;
 }
}

我的init()是:

function init()
{


drawBackground();

Player1 = new Player();
Enemy1 = new Enemy();

drawBars();
setUpListeners();
StartDrawingShips();


}

我的间隔时间:

function UpdateShips()
{

Player1.draw();
Enemy1.draw();

}

function StartDrawingShips()
{


  StopDrawing();

  drawInterval = setInterval(UpdateShips,fps); // redraw player every fps



}




function StopDrawing()
{

  clearInterval(drawInterval);
}

如果您需要任何其他信息,请随便询问!

1 个答案:

答案 0 :(得分:0)

ctxEnemy.drawImage(spriteImage,this.srcX,this.srcY,this.playerWidth,this.playerHeight,this.    drawX,this.drawY,this.playerWidth,this.playerHeight);

您的Enemy对象没有playerWidthplayerHeight属性。你真的可能想用相同的构造函数对它们进行建模,以避免这种混淆。