I tried to follow some guides but couldn't get their functions to work in my program. What i tried is commented out in my code(the for loop). I want a working function on space press create a bullet that goes right.

here is a fiddle: https://jsfiddle.net/tmanrocks999/7mLpo8uj/


<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
canvas {
    border:4px solid #d3d3d3;
    background-color: #f1f1f1;
<body onload="startGame()">

var myGamePiece;
var endGoalPiece;
var Enemy1;
var bullet;

function startGame() {
    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 = 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 jump() {

 function shootGun(){

//var b = new bullet();
//var bullets = []

//for (var i = 0; i < bullets.length; i++) {
 bullet = new component(11, 5, "blue", myGamePiece.x+27 , myGamePiece.y+13 );

function updateGameArea() {
    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
<p>use the arrow keys on you keyboard to move the red square.</p>

I expect on space press for a bullet to keep being created like shooting a gun. but at the moment only 2 bullet is made then if you press space again it resets the bullet. I get why this is happening but cant get my for loop to work. I will add something to happen if it hits a enemy later.

  • \$\begingroup\$ This is unrelated to your issue, but you are using strange terminology in your code. A function called update is usually expected to update the state of an entity, while a function which draws an entity would be called something like draw or render. And a component is usually just one functionality of an entity and not the whole entity. The term is common in the Entity - Component - System pattern, but you don't seem to follow that pattern (which is OK, but using the term component outside of that pattern feels weird). \$\endgroup\$ – Philipp Oct 21 '19 at 15:54

The array which contains your bullet (var bullets) is declared as a local variable within the shootGun() function. This already can't work on the conceptual level, because it means that the list of bullets which are currently active in your game area only lives during the execution of the shootGun function and is discarded afterwards.

It needs to be a variable with global scope, just like the variables var myGamePiece; or var Enemy1.

Then it makes no sense for a loop for (var i = 0; i < bullets.length; i++) { to exist in the shootGun function. Yes, you need to do a loop over all bullets each frame in order to update their positions. But that loop belongs into your updateGameArea function, not the function which is supposed to create the bullets.

Also, new bullet(); won't work because you didn't write the function bullet() yet. But the concept to use a constuctor-function to initialize the bullets seems sound. If you want bullet to have all the features of component and then some, then you might want to check out prototype inheritance in JavaScript.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.