Javascript - Creating multiple objects with the same parameter

Question

I'm trying to create multiple "bullets" in a shooting game.

For some reason I can only create one, I assume its because I am not properly creating more than one bullet object.

Below is my code I've used to produce the shooting feature. Can someone point me in the right direction on how I can recreate multiple bullets onclick?

bullet = {

    x: null,
    y: null,
    width: 10,
    height: 10,
    direction: null,

    update: function(){

        if(this.direction == null){
            if(lastKeyPress == null){
                lastKeyPress = up;
            }
            this.direction = lastKeyPress;
        }
        if(this.direction == up){ this.y -=7; }
        if(this.direction == down){ this.y +=7; }
        if(this.direction == left){ this.x -=7; }
        if(this.direction == right){ this.x +=7; }
    },
    draw: function() {
        if(this.x == null){
            this.x = player.x + (player.width/4);
        }
        if(this.y == null){
            this.y = player.y + (player.height/4);
        }
        cContext.fillRect(this.x, this.y, this.width, this.height);
    }
}

function main(){
    canvas = document.getElementById("mainCanvas");
    cContext = canvas.getContext("2d");

    keystate = {};
    document.addEventListener("keydown", function(evt) {
        keystate[evt.keyCode] = true;
    });
    document.addEventListener("keyup", function(evt) {
        delete keystate[evt.keyCode];
    });
    document.addEventListener("click", function(evt) {
        bullets[bulletNum] = bullet;
        bullets[bulletNum].draw();
        bulletNum++;
    });

    init();

    var loop = function(){
        update();
        draw();

        window.requestAnimationFrame(loop, canvas);
    }
    window.requestAnimationFrame(loop, canvas);
}

function update() {
    for (i = 0; i < bullets.length; i++) { 
        bullets[i].update();
    }
    player.update();
    ai.update();
}

function draw() {
    cContext.clearRect(0, 0, WIDTH, HEIGHT);

    cContext.save();

    for (i = 0; i < bullets.length; i++) { 
        bullets[i].draw();
    }
    player.draw();
    ai.draw();

    cContext.restore();
}

The issue is that once you shoot one bullet you cannot shoot after anymore.

I know there is alot of code here, any help would be fantastic.

Look into the prototype pattern: dofactory.com/javascript/prototype-design-pattern — Shaun Scovil
– Shaun Scovil, Commented Dec 31, 2015 at 13:55
bullets[bulletNum] = bullet; ... always references same object — charlietfl
– charlietfl, Commented Dec 31, 2015 at 13:58
@charlietfl bulletNum is undefined actually. @Jon you are never creating different bullets anywhere. Please don't post questions with undefined variables.ai is also undefined. stackoverflow.com/help/how-to-ask and stackoverflow.com/help/mcve — Ruan Mendes
– Ruan Mendes, Commented Dec 31, 2015 at 14:07
They aren't undefined, I didn't post all of the code, just the parts that are required. — Jon
– Jon, Commented Jan 1, 2016 at 18:09

Shaun Scovil · Accepted Answer · 2015-12-31 14:02:43Z

1

You want to use the Prototype Pattern:

var Bullet = function() {
    this.x = null;
    this.y = null;
    this.width = 10;
    this.height = 10;
    this.direction = null;
};
Bullet.prototype.update = function() {...};
Bullet.prototype.draw = function() {...};

var bullet = new Bullet();

answered Dec 31, 2015 at 14:02

Shaun Scovil

4,0075 gold badges45 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ruan Mendes Over a year ago

Or var newBullet = Object.create(bullet); in the spirit of trying to keep the OP's code the same

Shaun Scovil Over a year ago

Object.create(bullet) is nice, but older browsers (IE<9) don't support it.

Paul S. Over a year ago

@JuanMendes Object.create(bullet) may lead to confusing bugs if a property of the bullet is an Object

Ruan Mendes Over a year ago

@PaulS. In the exact same way as if you did Bullet.prototype.some = {}; var b = new Bullet() The style of prototype doesn't make a difference with regards to sharing objects on the prototype

jim93 · Accepted Answer · 2015-12-31 14:08:11Z

0

Another way to define objects in javascript is using prototype eg:

function Person(name){
   this.name = name; 
}

Person.prototype.sayHello = function(){
   var res = "Hello i am "+ this.name;  
  return res;
}

var jhon = new Person('Jhon');
var rose = new Person('Rose');

document.getElementById('jhon').innerHTML = jhon.sayHello();
document.getElementById('rose').innerHTML = rose.sayHello();

<html>
  <head>
    <title>
      </title>
    </head>
  <body>
    
    <h1 id="jhon"></h1>
    
    <h1 id="rose" ></h1>
    </body>
  
  </html>

answered Dec 31, 2015 at 14:08

jim93

192 bronze badges

Collectives™ on Stack Overflow

Javascript - Creating multiple objects with the same parameter

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related