javascript - p5Js, My sprite coordinate is not updating even thought the sprite is moving

Question

I am creating a game similar to battle city in p5.Js using p5.play. and right now I am working on firing a bullet. I have made my sprite move using the arrow keys. I have also made a function in which the bullets will spawn wherever the tank is. But bullets wont spawn or fire from the tank. It fires from the left hand corner of my canvas. and when I checked the coordinates of my tank, it is not changing even the sprite is moving. Do you know why and how to solve this problem?

let tankImg;
let tankx = 50
let tanky  = 570
let bullets = []
let bulletSpeed = 5


function preload(){
  tankImg = loadImage('tankk.jpg')
  blockImg = loadImage('wall.jpg')
  bulletImg = loadImage('bullet.jpg')
}
let tank;
let block;
function setup() {
  createCanvas(600, 600);
  //tank sprite
  tank = createSprite(tankx, tanky, 70,34)
  tank.addImage(tankImg)
  
  //wall sprite
  left_wall  = createSprite(0,0,10,1200)
  up_wall = createSprite(0,0,1200,10)
  right_wall = createSprite(600,0,-10,1200)
  down_wall = createSprite(600,600, 1200,20)
  //barriers
  //first phse
  block = createSprite(150,30, 70,40)
  block.addImage(blockImg)
  block1 = createSprite(150,75, 70,40)
  block1.addImage(blockImg)
  block2 = createSprite(150,120, 70,40)
  block2.addImage(blockImg)
  block3 = createSprite(150,165, 70,40)
  block3.addImage(blockImg)
  block4 = createSprite(150,210, 70,40)
  block4.addImage(blockImg)
  block5 = createSprite(150,255, 70,40)
  block5.addImage(blockImg)
  block6 = createSprite(150,300, 70,40)
  block6.addImage(blockImg)
  block7 = createSprite(150,345, 70,40)
  block7.addImage(blockImg)
  
  //second Phase
  
  block8 = createSprite(300,570, 70,40)
  block8.addImage(blockImg)
  block9 = createSprite(300,525, 70,40)
  block9.addImage(blockImg)
  block10 = createSprite(300,480, 70,40)
  block10.addImage(blockImg)
  block11 = createSprite(300,30, 70,40)
  block11.addImage(blockImg)
  block12 = createSprite(300,75, 70,40)
  block12.addImage(blockImg)
  block13 = createSprite(300,120, 70,40)
  block13.addImage(blockImg)
  block14 = createSprite(300,165, 70,40)
  block14.addImage(blockImg)
  block15 = createSprite(300,210, 70,40)
  block15.addImage(blockImg)
  
  
  //third phase
  
  block16 = createSprite(450,30, 70,40)
  block16.addImage(blockImg)
  block17 = createSprite(450,75, 70,40)
  block17.addImage(blockImg)
  block18 = createSprite(450,120, 70,40)
  block18.addImage(blockImg)
  block19 = createSprite(450,165, 70,40)
  block19.addImage(blockImg)
  block20 = createSprite(450,210, 70,40)
  block20.addImage(blockImg)
  block21= createSprite(450,255, 70,40)
  block21.addImage(blockImg)
  block22 = createSprite(450,300, 70,40)
  block22.addImage(blockImg)
  block23 = createSprite(450,345, 70,40)
  block23.addImage(blockImg)
 
}

function draw() {
  background(100, 100,250);
  
  //rotation of the tank
  tank_func()


  drawSprites()
}

//tank function
function tank_func(){
  if(keyIsPressed && keyCode == RIGHT_ARROW){
     tank.rotation++
    tank.setVelocity(1, 0)
     }if(keyIsPressed && keyCode == LEFT_ARROW){
       tank.rotation--
           tank.setVelocity(-1, 0)

     }
    if(keyIsDown(UP_ARROW)){
      tank.setVelocity(0,-1)
    }if(keyIsDown(DOWN_ARROW)){
      tank.setVelocity(0,1)
    }
  //boundaries
  left_wall.collide(tank, bounce_off)
  right_wall.collide(tank, bounce_off)
    up_wall.collide(tank, bounce_off)

    down_wall.collide(tank, bounce_off)
  
  
  //first phase collision
  block.collide(tank, bounce_off)
    block1.collide(tank, bounce_off)
  block2.collide(tank, bounce_off)
  block3.collide(tank, bounce_off)
  block4.collide(tank, bounce_off)
  block5.collide(tank, bounce_off)
  block6.collide(tank, bounce_off)
    block7.collide(tank, bounce_off)

   //second phase collision
  
  block8.collide(tank, bounce_off)
    block9.collide(tank, bounce_off)
  block10.collide(tank, bounce_off)
  block11.collide(tank, bounce_off)
  block12.collide(tank, bounce_off)
  block13.collide(tank, bounce_off)
  block14.collide(tank, bounce_off)
    block15.collide(tank, bounce_off)

  //third phase collision
  
  block16.collide(tank, bounce_off)
    block17.collide(tank, bounce_off)
  block18.collide(tank, bounce_off)
  block19.collide(tank, bounce_off)
  block20.collide(tank, bounce_off)
  block21.collide(tank, bounce_off)
  block22.collide(tank, bounce_off)
    block23.collide(tank, bounce_off)

if (bullets.length > 0) {
    for (var i = 0; i < bullets.length; i++) {
      bullets[i].render(200, 200, 0);
      if (bullets[i].x < 0 || bullets[i].x > width ||
        bullets[i].y < 0 || bullets[i].y > height)
        bullets.splice(i, 1)
    }
  }


}

function keyPressed(){
  if(keyCode == 32){
    noStroke()
    fill(250,0,0)
    bullets.push(new Bullet(tankx, tanky, 50,
      bulletSpeed));
    console.log(bullets)
  }
}



function bounce_off(){
tank.setVelocity(0,0)
  block.setVelocity(0,0)
}

here is my bullet function:

function Bullet (tx, ty, ts, tspeed){
    this.x = tx;
    this.y = ty;
    this.s = ts;
    this.speed = tspeed;
  

  this.render = function(r,g,b) {
    fill(r,g,b);
    rect(this.x, this.y, this.s, this.speed);
    this.x = this.x - this.speed
    
  }
}

if you also want to check the real file, here is the link for the web editor: https://editor.p5js.org/somr_pel/sketches/ACXgrz0gk

Answer 1

In your function keyPressed(), you must replace tankx and tanky for tank.position.x, and tank.position.y.

It does not update due to you are not updating tankx and tanky variables instead of it, you are updating the tank object, and as shown in the console.log of the tank, the position property is updated. So is easier use it.

function keyPressed(){
  if(keyCode == 32){
    noStroke()
    fill(250,0,0)
    console.log(tank);
    bullets.push(new Bullet(tank.position.x, tank.position.y, 50,
      bulletSpeed));
    console.log(bullets)
  }
}