p5Js，即使精灵在移动，我的精灵坐标也没有更新

Question

我正在 p5.Js 使用 p5.play 创建一个类似于 battle city 的游戏。现在我正在研究发射子弹。我已经使用箭头键让我的精灵移动了。我还制作了一个功能，其中子弹会在坦克所在的任何地方产生。但是子弹不会从坦克中产生或发射。它从我 canvas 的左手角发射。当我检查我的坦克的坐标时，即使精灵在移动它也没有改变。你知道为什么以及如何解决这个问题吗？

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)
}

这是我的项目符号函数：

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
    
  }
}

如果您还想查看真实文件，这里是网络编辑器的link： https://editor.p5js.org/somr_pel/sketches/ACXgrz0gk

Answer 1

在您的函数 keyPressed() 中，您必须为 tank.position.x 和 tank.position.y 替换 tankx 和 tanky。

它不更新是因为你没有更新tankx和tanky变量而不是它，你更新的是tank对象，如tank的console.log所示，位置属性已更新。所以使用起来更方便。

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)
  }
}

p5Js，即使精灵在移动，我的精灵坐标也没有更新

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

javascript

p5.js