StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCanvas not drawing image from spritesheet
text
Body
copied!<p>Ok So I have managed to draw one image that is the player, but Now I am trying to draw an enemy and it just wont work. I have added alerts and it shows that the program is doing the draw enemy function but it still wont draw? </p> <p>Here is the thing running: <a href="http://www.taffatech.com/DarkOrbit.html" rel="nofollow">http://www.taffatech.com/DarkOrbit.html</a> Entire code: <a href="http://www.taffatech.com/Source.js" rel="nofollow">http://www.taffatech.com/Source.js</a></p> <p>If anyone can help me with this I would be very grateful!</p> <p>Here are my data functions:</p> <pre><code>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; } } </code></pre> <p>My init() is:</p> <pre><code>function init() { drawBackground(); Player1 = new Player(); Enemy1 = new Enemy(); drawBars(); setUpListeners(); StartDrawingShips(); } </code></pre> <p>My interval:</p> <pre><code>function UpdateShips() { Player1.draw(); Enemy1.draw(); } function StartDrawingShips() { StopDrawing(); drawInterval = setInterval(UpdateShips,fps); // redraw player every fps } function StopDrawing() { clearInterval(drawInterval); } </code></pre> <p>If you need any other information then just ask!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload