Make a bullet object in p5.js javascript

Question

i was making a javascript game in p5.js. I made a lot of the game, then wanted to add some combat. I made a weapon that shoots bullets. But now the bullet is hard to make. So here is how my weapon works:

it starts from the player location
it founds the y rotation of the mouse click (looks from the center of the screen and looks what degree rotation it is (360 degrees))
looks to the y rotation of the mouse click
goes off in the distance

So how do I make the bullet? I have the base script, but the bullet only gets deleted when it hits a enemy, only goes to the mosue, has a dumb algorthm for path finding to the mouse, you can have only one bullet at once , and if it does not hit any enemies, it just sits on the ground like a mine.

Here is the psuedo code(no programming rules at all lol):

Make bullet(playerPositionX,playerPositionY,mouseX,mousey) as a object:
 starter x and y = playerPostionX and playerPositionY
 lookTowards a point(mouseX,mouseY)
 goto the point(mouseX and mouseY) from the starter X and Y
 movespeed is 20pixel per frame

So here is what i got in my game right now is: The sketch script:

var player;
var enemy;
var bullet;
var score = 0;
function setup(){
  createCanvas(600,600);
  player = new Player();
  enemy = new Enemy();
  textSize(20);
}
function draw(){
  clear();
  background(51);
  enemy.show();
  enemy.moveToPlayer(player.x, player.y);
  player.show();
  player.MovePlayer();
  if (bullet != undefined){
    bullet.show();
    bullet.toMouse();
    if (dist(bullet.x,bullet.y,enemy.x,enemy.y) <= enemy.r){
      enemy = new Enemy();
      score += 100;
      bullet = undefined;
    }
  }
  fill(255);
  text(score,500,500,100,100)
}
function mousePressed(){
  //if (enemy.clicked(mouseX,mouseY)){
  bullet = new Bullet(mouseX,mouseY,player.x,player.y);
  //enemy = new Enemy();
  //}
}

The bullet script:

function Bullet(X,Y,PX,PY){
  this.speed = 20;
  this.x = PX;
  this.y = PY;
  this.r = 5;
  this.show = function(){
    fill(255,255,0);
    stroke(128,128,0);
    circle(this.x,this.y,this.r);
  }
  this.toMouse = function(){
    if (Y < this.y){
      this.y += -1*this.speed;
    } else if (Y > this.y) {
      this.y += 1*this.speed;
    }
    if (X < this.x){
      this.x += -1*this.speed;
    } else if (X > this.x){
      this.x += 1*this.speed;
    }
  }

}

The enemy script:

function Enemy(){
  this.r = 25;
  this.x = 0+this.r;
  this.y = 0+this.r;
  this.chance = random(0,1);
  console.log(this.chance);
  if (this.chance <= 0.10){
    this.speed = 3;
    this.r = 15;
    this.red = 0;
    this.green = 0;
    this.blue = 255;
  } else {
    this.speed = 2;
    this.red = 255;
    this.green = 0;
    this.blue = 0;
  }
  this.show = function(){
    fill(this.red,this.green,this.blue);
    stroke(128,0,0);
    circle(this.x,this.y,this.r);
  }
  this.moveToPlayer = function(playerX,playerY){
    if (playerY < this.y){
      this.y += -1*this.speed;
    } else if (playerY > this.y) {
      this.y += 1*this.speed;
    }
    if (playerX < this.x){
      this.x += -1*this.speed;
    } else if (playerX > this.x){
      this.x += 1*this.speed;
    }
  }
  /*
  this.clicked = function(mX,mY){
    if (dist(mX,mY,this.x,this.y) <= this.r){
      return true;
    }
    return false;
  }
  */
}

The player script:

function Player(){
  this.x = width/2;
  this.y = height/2;
  this.r = 20;
  this.speed = 4;
  this.show = function(){
    fill(0,255,0);
    stroke(0,128,0);
    circle(this.x,this.y,this.r);
  }
  this.moveY = function(number){
    this.y += (number*this.speed);
  }
  this.moveX = function(number){
    this.x += (number*this.speed);
  }
  this.MovePlayer = function(){
    if (keyIsDown(UP_ARROW)){
      if (this.y + (-1*20) > 0)
        this.moveY(-1);
    }
    if (keyIsDown(DOWN_ARROW)){
      if (this.y + (1*20) < height)
        this.moveY(1);
    }
    if (keyIsDown(LEFT_ARROW)){
      if (this.x + (-1*20) > 0)
        this.moveX(-1);
    }
    if (keyIsDown(RIGHT_ARROW)){
      if (this.x + (1*20) < width)
        this.moveX(1);
    }
  }
}

The html file has everything it needs Thanks for advance!

var player;
var enemy;
var bullet;
var score = 0;
function setup(){
  createCanvas(600,600);
  player = new Player();
  enemy = new Enemy();
  textSize(20);
}
function draw(){
  clear();
  background(51);
  enemy.show();
  enemy.moveToPlayer(player.x, player.y);
  player.show();
  player.MovePlayer();
  if (bullet != undefined){
    bullet.show();
    bullet.toMouse();
    if (dist(bullet.x,bullet.y,enemy.x,enemy.y) <= enemy.r){
      enemy = new Enemy();
      score += 100;
      bullet = undefined;
    }
  }
  fill(255);
  text(score,500,500,100,100)
}
function mousePressed(){
  //if (enemy.clicked(mouseX,mouseY)){
  bullet = new Bullet(mouseX,mouseY,player.x,player.y);
  //enemy = new Enemy();
  //}
}

function Bullet(X,Y,PX,PY){
  this.speed = 20;
  this.x = PX;
  this.y = PY;
  this.r = 5;
  this.show = function(){
    fill(255,255,0);
    stroke(128,128,0);
    circle(this.x,this.y,this.r);
  }
  this.toMouse = function(){
    if (Y < this.y){
      this.y += -1*this.speed;
    } else if (Y > this.y) {
      this.y += 1*this.speed;
    }
    if (X < this.x){
      this.x += -1*this.speed;
    } else if (X > this.x){
      this.x += 1*this.speed;
    }
  }

}

function Enemy(){
  this.r = 25;
  this.x = 0+this.r;
  this.y = 0+this.r;
  this.chance = random(0,1);
  console.log(this.chance);
  if (this.chance <= 0.10){
    this.speed = 3;
    this.r = 15;
    this.red = 0;
    this.green = 0;
    this.blue = 255;
  } else {
    this.speed = 2;
    this.red = 255;
    this.green = 0;
    this.blue = 0;
  }
  this.show = function(){
    fill(this.red,this.green,this.blue);
    stroke(128,0,0);
    circle(this.x,this.y,this.r);
  }
  this.moveToPlayer = function(playerX,playerY){
    if (playerY < this.y){
      this.y += -1*this.speed;
    } else if (playerY > this.y) {
      this.y += 1*this.speed;
    }
    if (playerX < this.x){
      this.x += -1*this.speed;
    } else if (playerX > this.x){
      this.x += 1*this.speed;
    }
  }
  /*
  this.clicked = function(mX,mY){
    if (dist(mX,mY,this.x,this.y) <= this.r){
      return true;
    }
    return false;
  }
  */
}

function Player(){
  this.x = width/2;
  this.y = height/2;
  this.r = 20;
  this.speed = 4;
  this.show = function(){
    fill(0,255,0);
    stroke(0,128,0);
    circle(this.x,this.y,this.r);
  }
  this.moveY = function(number){
    this.y += (number*this.speed);
  }
  this.moveX = function(number){
    this.x += (number*this.speed);
  }
  this.MovePlayer = function(){
    if (keyIsDown(UP_ARROW)){
      if (this.y + (-1*20) > 0)
        this.moveY(-1);
    }
    if (keyIsDown(DOWN_ARROW)){
      if (this.y + (1*20) < height)
        this.moveY(1);
    }
    if (keyIsDown(LEFT_ARROW)){
      if (this.x + (-1*20) > 0)
        this.moveX(-1);
    }
    if (keyIsDown(RIGHT_ARROW)){
      if (this.x + (1*20) < width)
        this.moveX(1);
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

Rabbid76 · Accepted Answer · 2019-04-22T17:22:00.963

Create an array of bullets rather than a single bullet and append a new bullet to the array, if the mouse button is pressed:

var bullets = [];

function mousePressed(){
    if (mouseX != player.x || mouseY != player.y ) {
        bullets.push( new Bullet(mouseX,mouseY,player.x,player.y) )
    }
}

Use p5.Vector to calculate the normalized direction from the player position to the mouse position in thee class [Bullet]. This is defines the moving direction of the Bullet, which can be used in toMouse, to update the position of the Bullet object.
Further add method onScreen, which verifies if the Bullet is still in bounds of the screen:

function Bullet(X,Y,PX,PY){
    this.speed = 2;
    this.x = PX;
    this.y = PY;
    this.dir = createVector(X-PX, Y-PY).normalize()
    this.r = 5;

    this.show = function(){
      fill(255,255,0);
      stroke(128,128,0);
      circle(this.x,this.y,this.r);
    }
    this.toMouse = function() {
        this.x += this.dir.x * this.speed;
        this.y += this.dir.y * this.speed;
    }
    this.onScreen = function() {
      return this.x > -this.r && this.x < width+this.r &&
              this.y > -this.r && this.y < height+this.r;
    }
}

Traverse the bullets in draw. Check if a bullet has hit the enemy or has left the screen. Keep the remaining bullets for the next run of draw:

let keepbullets = []
let anyhit = false;
for (let i=0; i < bullets.length; ++ i) {
    bullets[i].toMouse();
    let hit = dist(bullets[i].x, bullets[i].y, enemy.x, enemy.y) <= enemy.r;
    anyhit = anyhit || hit
    if (!hit && bullets[i].onScreen()) {
        keepbullets.push(bullets[i]);
        bullets[i].show();
    }
}
bullets = keepbullets;
if (anyhit) {
    enemy = new Enemy();
    score += 100;
}

See the example, where I applied the suggestions to the original code from the question. Note, I've slowed down the speed of the bullets extremely, to make the effect of multiple bullets visible:

var player;
var enemy;
var bullets = [];
var score = 0;
function setup(){
  createCanvas(600,600);
  player = new Player();
  enemy = new Enemy();
  textSize(20);
}
function draw(){
  clear();
  background(51);
  enemy.show();
  enemy.moveToPlayer(player.x, player.y);
  player.show();
  player.MovePlayer();

  let keepbullets = []
  let anyhit = false;
  for (let i=0; i < bullets.length; ++ i) {
      bullets[i].toMouse();
      let hit = dist(bullets[i].x, bullets[i].y, enemy.x, enemy.y) <= enemy.r;
      anyhit = anyhit || hit
      if (!hit && bullets[i].onScreen()) {
          keepbullets.push(bullets[i]);
          bullets[i].show();
      }
  }
  bullets = keepbullets;
  if (anyhit) {
      enemy = new Enemy();
      score += 100;
  }
  
  fill(255);
  text(score,500,500,100,100)
}

function mousePressed(){
    if (mouseX != player.x || mouseY != player.y ) {
        bullets.push( new Bullet(mouseX,mouseY,player.x,player.y) )
    }
}

function Bullet(X,Y,PX,PY){
    this.speed = 2;
    this.x = PX;
    this.y = PY;
    this.dir = createVector(X-PX, Y-PY).normalize()
    this.r = 5;
    
    this.show = function(){
      fill(255,255,0);
      stroke(128,128,0);
      circle(this.x,this.y,this.r);
    }
    this.toMouse = function() {
        this.x += this.dir.x * this.speed;
        this.y += this.dir.y * this.speed;
    }
    this.onScreen = function() {
      return this.x > -this.r && this.x < width+this.r &&
              this.y > -this.r && this.y < height+this.r;
    }
}

function Enemy(){
  this.r = 25;
  this.x = 0+this.r;
  this.y = 0+this.r;
  this.chance = random(0,1);
  console.log(this.chance);
  if (this.chance <= 0.10){
    this.speed = 3;
    this.r = 15;
    this.red = 0;
    this.green = 0;
    this.blue = 255;
  } else {
    this.speed = 2;
    this.red = 255;
    this.green = 0;
    this.blue = 0;
  }
  this.show = function(){
    fill(this.red,this.green,this.blue);
    stroke(128,0,0);
    circle(this.x,this.y,this.r);
  }
  this.moveToPlayer = function(playerX,playerY){
    if (playerY < this.y){
      this.y += -1*this.speed;
    } else if (playerY > this.y) {
      this.y += 1*this.speed;
    }
    if (playerX < this.x){
      this.x += -1*this.speed;
    } else if (playerX > this.x){
      this.x += 1*this.speed;
    }
  }
  /*
  this.clicked = function(mX,mY){
    if (dist(mX,mY,this.x,this.y) <= this.r){
      return true;
    }
    return false;
  }
  */
}

function Player(){
  this.x = width/2;
  this.y = height/2;
  this.r = 20;
  this.speed = 4;
  this.show = function(){
    fill(0,255,0);
    stroke(0,128,0);
    circle(this.x,this.y,this.r);
  }
  this.moveY = function(number){
    this.y += (number*this.speed);
  }
  this.moveX = function(number){
    this.x += (number*this.speed);
  }
  this.MovePlayer = function(){
    if (keyIsDown(UP_ARROW)){
      if (this.y + (-1*20) > 0)
        this.moveY(-1);
    }
    if (keyIsDown(DOWN_ARROW)){
      if (this.y + (1*20) < height)
        this.moveY(1);
    }
    if (keyIsDown(LEFT_ARROW)){
      if (this.x + (-1*20) > 0)
        this.moveX(-1);
    }
    if (keyIsDown(RIGHT_ARROW)){
      if (this.x + (1*20) < width)
        this.moveX(1);
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

Thanks, works perfectly. Sorry for the late response – CppPythonDude Apr 22 '19 at 20:00 — CppPythonDude, Apr 22 '19 at 20:00

Make a bullet object in p5.js javascript

1 Answers1