I'm building a small JavaScript game, but after looking at tutorials and whatnot online, it's just not working for me. To save you some trouble, here's the parts where I think stuff might've gone wrong (actual problem explained a bit more below).
It runs on a very basic loop for now and I have an array to hold the player's bolts as he shoots them:
var playerBolts=new Array(); //Holds all the bolt objects that the player shoots
setInterval(function(){
updateGame();
drawGame();
},25);
This is the bolt object that is created when the player shoots.
function bolt(facing,playerX,playerY){ //The bolt object is shot from the player's current position
this.facingLeft=facing; //The direction at which the bolt moves, if left, true
this.x=playerX; //The x position of the bolt
this.y=playerY; //The y position of the bolt
if(facingLeft==true){
this.xSpeed=-3; //The horizontal speed at which the bolt is moving
}
else if (facingLeft==false){
this.xSpeed=3;
}
this.ySpeed=0; //The vertical speed at which the bolt is moving
this.W=3; //The width of the bolt's model
this.H=3; //The height of the bolt's model
this.color="red"; //The color of the bolt's model
this.update=update;
function update(){ //Updates the bolt's properties
this.x=this.x+this.xSpeed;
this.y=this.y+this.ySpeed;
}
this.draw=draw;
function draw(){ //Draws the bolt's model to the canvas
context.fillStyle=this.color;
context.fillRect(this.x, this.y, this.W, this.H);
}
}
When the "player" shoots, the shootBolt method from the player object is called:
function player(){ //The player object
this.facingLeft=true; //If the player's character is facing left, true
this.x=100; //The x position of the player
this.y=100; //The y position of the player
this.shootBolt=shootBolt;
function shootBolt(){ //Shoots a bolt, creating a new bolt object and adding it to the playerBolts array
playerBolts.push(bolt(this.facingLeft,this.x,this.y));
}
}
The problem is that the next bolt gets faster every following shot. The more you fire, the faster they get. Also, there are supposed to be multiple bolts visible if fired rapidly, but every time you shoot, the previous one vanishes.
Now the game loops through the update and draw functions. I've used a for
function updateGame(){ //The main update phase
player1.update(); //Updates the player's properties
playerBolts.forEach(function(bolt){ //Updates all active bolts's properties
this.update();
});
}
function drawGame(){ //The main drawing phase
context.fillStyle="white";
context.fillRect(0,0,canvasW,canvasH); //Clears the canvas for the next frame
player1.draw(); //Draws the player
playerBolts.forEach(function(bolt){ //Draws all bolt's model to the canvas
this.draw();
});
}
So yea...I think it might have to do with the way I add objects with "push" to the array, the "forEach" method (although I've tried a for loop too). I don't know what I'm doing wrong and I've looked up sources and this should be working no? If there isn't enough information, I could always post the whole thing (only 119 well documented lines).
Thank you.
