Mini shooter game hit function

Question

I'm making a mini shooter game but after I added a nice way to make multiple bullets come out after pressing space it broke a few things. First, my player ( i know why this is ) can run into the enemy and do damage (this is because it is this.x now it previously worked with bullet.x ) And secondly, my bullets aren't doing 1 damage then disappearing( this worked before I added the array stuff).

I want my code to work with multiple bullets

https://jsfiddle.net/tmanrocks999/7mLpo8uj/

My new code: https://jsfiddle.net/tmanrocks999/64thbvm3/190/

I expect after space press for bullets to do 1 damage, bullets to disappear on enemy hit, and for my player not to be able to do damage by hitting the enemy. but at the moment my bullets fly past the enemy and deal 3-4 damage when its supposed to be 1 at base.

 var myGamePiece; var endGoalPiece; var myEnemy1; var bullets = []; var myEnemy1Hp = 10; var myEnemy1Armor = 0; var damage = 1; var playerExp = 0; var playerMaxExp = 10; function startGame() { myGameArea.start(); myGamePiece = new component(30, 30, "red", 0, 240); endGoalPiece = new component(30, 30, "black", 450, 240); myEnemy1 = new component(30, 30, "green", 200, 240); } var myGameArea = { canvas: document.createElement("canvas"), start: function() { this.canvas.width = 480; this.canvas.height = 270; this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.interval = setInterval(updateGameArea, 20); window.addEventListener('keydown', function(e) { myGameArea.key = e.keyCode; }) window.addEventListener('keyup', function(e) { myGameArea.key = false; }) }, clear: function() { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } function component(width, height, color, x, y) { this.gamearea = myGameArea; this.width = width; this.height = height; this.speedX = 0; this.speedY = 0; //this.gravity = 0.05; //this.gravitySpeed = 0; this.x = x; this.y = y; this.color = color; this.update = function() { ctx = myGameArea.context; ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.width, this.height); } this.newPos = function() { this.gravitySpeed += this.gravity; this.x += this.speedX; this.y += this.speedY; //+ this.gravitySpeed; this.hitBottom(); this.hitTop(); this.hitRight(); this.hitLeft(); this.hitObject(); } this.hitBottom = function() { var rockbottom = myGameArea.canvas.height - this.height; if (this.y > rockbottom) { this.y = rockbottom; } } this.hitTop = function() { var rockTop = 0; if (this.y < rockTop) { this.y = rockTop; } } this.hitRight = function() { var rockRight = myGameArea.canvas.width - this.width; if (this.x > rockRight) { this.x = rockRight; } } this.hitLeft = function() { var rockLeft = 0; if (this.x < rockLeft) { this.x = rockLeft; } } function enemyRespawn() { myEnemy1 = new component(30, 30, "green", 200, 240); myEnemy1Hp = 10; document.getElementById('myEnemy1Hp').innerHTML = myEnemy1Hp; } this.hitObject = function() { myGamePiece.update(); var enemy = myEnemy1.x-11; if (this.x == enemy) { myEnemy1Hp = myEnemy1Hp - (damage - myEnemy1Armor); bullet= 0,0; document.getElementById('myEnemy1Hp').innerHTML = myEnemy1Hp; if(myEnemy1Hp <=0){ myEnemy1Hp = 0; document.getElementById('myEnemy1Hp').innerHTML = myEnemy1Hp; playerExp = playerExp+1; document.getElementById('playerExp').innerHTML = playerExp; if (playerExp>=playerMaxExp){ playerExp = 0; playerMaxExp = playerMaxExp*1.5; damage = damage + 1; document.getElementById('playerExp').innerHTML = playerExp; document.getElementById('playerMaxExp').innerHTML = playerMaxExp; } myEnemy1 = new component(0, 0, "green", 0, 0); myEnemy1.update(); setTimeout(enemyRespawn, 5000); } } } } function shootGun() { let bullet = new component(11, 5, "blue", myGamePiece.x + 27, myGamePiece.y + 13); bullet.newPos(); bullet.speedX = 1; bullets.push( bullet ); } function updateGameArea() { myGameArea.clear(); myGamePiece.speedX = 0; myGamePiece.speedY = 0; if (myGameArea.key && myGameArea.key == 37) { myGamePiece.speedX = -1; } //left if (myGameArea.key && myGameArea.key == 39) { myGamePiece.speedX = 1; } //right if (myGameArea.key && myGameArea.key == 38) { myGamePiece.gravitySpeed = -1; } //jump if (myGameArea.key && myGameArea.key == 32) { shootGun() } //shoot gun //if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }// down myEnemy1.update(); endGoalPiece.update(); myGamePiece.newPos(); myGamePiece.update(); bullets.forEach( (bullet)=> { bullet.newPos() bullet.update(); }); // bullet.newPos(); // bullet.update(); }

 canvas { border: 4px solid #d3d3d3; background-color: #f1f1f1; }

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Basic Shooter</title> </head> <body onload="startGame()"> <p>use the arrow keys on you keyboard to move the red square.</p> <span id="myEnemy1Hp">10</span> <br> <span id="playerExp">0</span> / <span id="playerMaxExp">10</span> <script> </script> </body> </html>

Answer 1

Your javascript contains many errors, your bullets aren't stopping because you have a call to a myStopFunction()....but you don't have a myStopFunction function in your code. Check the console in your browser's Dev Tools inspector for other errors that pop up when you run the code.