p5.js - 如何在两个对象(火箭飞船和射击)之间建立独立性？

Question

在我的代码中，我有一艘火箭飞船并添加了一个发射函数。我想做两件事:

• 能够多次射击
• 能够让子弹沿发射方向连续发射(旋转时)

我猜我需要以某种方式将火箭动画与发射动画分开？目前，我将发射动画作为火箭飞船对象的一种方法。火箭飞船的旋转与发射动画相关联。

谢谢!

var rocket;
var baseLine;
var rotateValue = 0;

function setup() {
    createCanvas(1000, 600);

    baseLine = height - 50

    rocket = {
        x: width / 2,
        y: baseLine,
        thrust: false,
        fire: false,
        fireX: width / 2,
        fireY: baseLine,
        moveLeft: false,
        moveRight: false,
        rCW: false,
        rCCW: false,
        rotateAngle: 0,
        drawRocket: function() {
            fill(80)
            push();
            if (this.rCW) {
                translate(this.x, this.y);
                rotate(this.rotateAngle);
                rect(10, -90, 10, 100);
            } else if (this.rCCW) {
                translate(this.x, this.y);
                rotate(this.rotateAngle);
                rect(10, -90, 10, 100);
            } else {
                translate(this.x, this.y);
                rotate(this.rotateAngle);
                rect(10, -90, 10, 100);
            }
            pop();

            fill(150, 0, 0)
            push();
            translate(this.x, this.y);
            rotate(this.rotateAngle);
            triangle(10, -90, 15, -120, 20, -90);
            pop();

            fill(150, 0, 0);
            noStroke();
            push();
            translate(this.x, this.y);
            rotate(this.rotateAngle);
            triangle(-10, 10, 10, -20, 10, 10);
            pop();

            push();
            translate(this.x, this.y);
            rotate(this.rotateAngle);
            triangle(20, 10, 20, -20, 40, 10);
            pop();

            if (this.thrust) {
                fill(255, 150, 0);
                noStroke();
                push();
                translate(this.x, this.y);
                rotate(this.rotateAngle);
                triangle(0, 10, 20, 10, 10, 30);
                triangle(5, 10, 25, 10, 15, 35);
                triangle(10, 10, 30, 10, 20, 30);
                pop();

            }

        },
        moveRocket: function() {
            if (this.thrust && this.y > 0 && this.rCW === true) {
                this.y -= 2;
                this.x += 1;
            } else if (this.thrust && this.y > 0 && this.rCCW === true) {
                this.y -= 2;
                this.x -= 1;
            } else if (this.thrust && this.y > 0) {
                this.y -= 2;
            } else if (this.y < baseLine) {
                this.y += 3;
            }

            if (this.moveLeft && this.x > 0 && this.y != baseLine) {
                this.x -= 2;
            }

            if (this.moveRight && this.x < width && this.y != baseLine) {
                this.x += 2;
            }


        },

        fireRocket: function() {
            if (this.fire && this.fireY >= 0) {
                fill(255, 140, 0);
                noStroke();
                ellipse(this.fireX + 5, this.fireY - 10, random(3, 6), random(8, 11));
                ellipse(this.fireX + 25, this.fireY - 10, random(3, 6), random(8, 11));
                if (this.rCW === true) {
                    this.fireY -= 3;
                    this.fireX += 2;
                } else if (this.rCCW === true) {
                    this.fireY -= 3;
                    this.fireX -= 2;
                } else {
                    this.fireY -= 3;
                }

                if (this.fireY <= 1) {
                    this.fireY = baseLine;
                    this.fire = false;
                }

            }
        }

    }
}

function draw() {
    background(10);

    rocket.drawRocket();
    rocket.moveRocket();
    rocket.fireRocket();

}

function keyPressed() {
    if (key == "W") {
        rocket.thrust = true;
    }

    if (key == "A") {
        rocket.moveLeft = true;
    }

    if (key == "D") {
        rocket.moveRight = true;
    }

    if (key == "F") {
        rocket.fireX = rocket.x;
        rocket.fireY = rocket.y;
        rocket.fire = true;
    }

    if (key == "R") {
        rocket.rCW = true;
        rocket.rotateAngle = PI / 4;
    }

    if (key == "E") {
        rocket.rCCW = true;
        rocket.rotateAngle = -PI / 4;
    }
}

function keyReleased() {
    if (key == "W") {
        rocket.thrust = false;
    }

    if (key == "A") {
        rocket.moveLeft = false;
    }

    if (key == "D") {
        rocket.moveRight = false;
    }


    if (key == "R") {
        rocket.rCW = false;
        rocket.rotateAngle = 0;
    }


    if (key == "E") {
        rocket.rCCW = false;
        rocket.rotateAngle = 0;
    }

}

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

Answer 1

快速浏览您的代码，我发现有一对火坐标。您想要的是一个单独的 fire(bullet) 类，以便此类的实例可以独立更新。您需要一个数组来存储项目符号。当火箭发射时，一颗新子弹在火箭的位置实例化，但从那时起，每颗子弹的速度都会更新子弹位置:

var rocket;
var missiles = [];
var baseLine;
var rotateValue = 0;

class Missile{
  constructor(x, y, vx, vy){
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
  }
  update(){
    this.x += this.vx;
    this.y += this.vy;
    fill(255, 140, 0);
    noStroke();
    ellipse(this.x + 5, this.y - 10, random(3, 6), random(8, 11));
    ellipse(this.x + 25, this.y - 10, random(3, 6), random(8, 11));
  }
}

function setup() {
    createCanvas(1000, 600);

    baseLine = height - 50

    rocket = {
        x: width / 2,
        y: baseLine,
        vx: 0,
        vy: 0,
        thrust: false,
        fire: false,
        fireX: width / 2,
        fireY: baseLine,
        moveLeft: false,
        moveRight: false,
        rCW: false,
        rCCW: false,
        rotateAngle: 0,
        drawRocket: function() {
            fill(80)
            push();
            if (this.rCW) {
                translate(this.x, this.y);
                rotate(this.rotateAngle);
                rect(10, -90, 10, 100);
            } else if (this.rCCW) {
                translate(this.x, this.y);
                rotate(this.rotateAngle);
                rect(10, -90, 10, 100);
            } else {
                translate(this.x, this.y);
                rotate(this.rotateAngle);
                rect(10, -90, 10, 100);
            }
            pop();

            fill(150, 0, 0)
            push();
            translate(this.x, this.y);
            rotate(this.rotateAngle);
            triangle(10, -90, 15, -120, 20, -90);
            pop();

            fill(150, 0, 0);
            noStroke();
            push();
            translate(this.x, this.y);
            rotate(this.rotateAngle);
            triangle(-10, 10, 10, -20, 10, 10);
            pop();

            push();
            translate(this.x, this.y);
            rotate(this.rotateAngle);
            triangle(20, 10, 20, -20, 40, 10);
            pop();

            if (this.thrust) {
                fill(255, 150, 0);
                noStroke();
                push();
                translate(this.x, this.y);
                rotate(this.rotateAngle);
                triangle(0, 10, 20, 10, 10, 30);
                triangle(5, 10, 25, 10, 15, 35);
                triangle(10, 10, 30, 10, 20, 30);
                pop();

            }

        },
        moveRocket: function() {
            if (this.thrust && this.y > 0 && this.rCW === true) {
                this.y -= 2;
                this.x += 1;
                this.vy = -2;
                this.vx  = 1;
            } else if (this.thrust && this.y > 0 && this.rCCW === true) {
                this.y -= 2;
                this.x -= 1;
                this.vy = -2;
                this.vx  = -1;
            } else if (this.thrust && this.y > 0) {
                this.y -= 2;
                this.vy = -2;
            } else if (this.y < baseLine) {
                this.y += 3;
                this.vy = 2;
            }

            if (this.moveLeft && this.x > 0 && this.y != baseLine) {
                this.x -= 2;
                this.vx = -2;
            }

            if (this.moveRight && this.x < width && this.y != baseLine) {
                this.x += 2;
                this.vx = 2;
            }


        },

        fireRocket: function() {
            if (this.fire && this.fireY >= 0) {
                fill(255, 140, 0);
                noStroke();
                ellipse(this.fireX + 5, this.fireY - 10, random(3, 6), random(8, 11));
                ellipse(this.fireX + 25, this.fireY - 10, random(3, 6), random(8, 11));
                if (this.rCW === true) {
                    this.fireY -= 3;
                    this.fireX += 2;
                } else if (this.rCCW === true) {
                    this.fireY -= 3;
                    this.fireX -= 2;
                } else {
                    this.fireY -= 3;
                }

                if (this.fireY <= 1) {
                    this.fireY = baseLine;
                    this.fire = false;
                }

            }
        }

    }
}

function draw() {
    background(10);

    rocket.drawRocket();
    rocket.moveRocket();
    //rocket.fireRocket();
    // update missiles
    for(let i = 0 ;  i < missiles.length; i++){
      missiles[i].update();
    }

}

function keyPressed() {
    if (key == "W") {
        rocket.thrust = true;
    }

    if (key == "A") {
        rocket.moveLeft = true;
    }

    if (key == "D") {
        rocket.moveRight = true;
    }

    if (key == "F") {
        //rocket.fireX = rocket.x;
        //rocket.fireY = rocket.y;
        //rocket.fire = true;
        missiles.push(new Missile(rocket.x, rocket.y, rocket.vx, rocket.vy));
        console.log(missiles);
    }

    if (key == "R") {
        rocket.rCW = true;
        rocket.rotateAngle = PI / 4;
    }

    if (key == "E") {
        rocket.rCCW = true;
        rocket.rotateAngle = -PI / 4;
    }
}

function keyReleased() {
    if (key == "W") {
        rocket.thrust = false;
    }

    if (key == "A") {
        rocket.moveLeft = false;
    }

    if (key == "D") {
        rocket.moveRight = false;
    }


    if (key == "R") {
        rocket.rCW = false;
        rocket.rotateAngle = 0;
    }


    if (key == "E") {
        rocket.rCCW = false;
        rocket.rotateAngle = 0;
    }

}

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

这有点 hacky:理想情况下，您希望更新 keyPressed 上的速度并简单地重复使用它以将其添加到当前位置。

不幸的是，此时我无法详细介绍很多细节，但我建议简化代码并掌握 p5.Vector 的窍门。/Daniel Shiffman's Nature of Code Vector math videos和一个 bit of trigonometry会有帮助。

这是一个您可以改编的 super 基本示例:

class Rocket{
  
  constructor(x, y){
    this.position = createVector(x, y);
    this.velocity = createVector();
    this.thrust = 0;
    this.angle = 0;
    this.friction = 0.1;
  }
  
  update(){
    // use polar to cartesian coordinate conversion formulate apply direction angle and thrust (radius)
    // -HALF_PI angle offset is because 0 degrees points to the right when it comes to rendering and we want our ship pointing up
    this.velocity.set(cos(this.angle - HALF_PI) * this.thrust,
                      sin(this.angle - HALF_PI) * this.thrust);
    // add velocity to position
    this.position.add(this.velocity);
    // render
    push();
    // remember: order of transformations is important
    translate(this.position.x, this.position.y);
    rotate(this.angle);
    triangle(0 , -10,
             -5,  10,
             +5, 10);
    pop();
  }
  
}

class Laser{
  constructor(position, velocity, angle){
    this.position = position;
    this.velocity = velocity;
    // angle is simply copied so it can be reused for rendering without having to re-calculate using this.velocity.heading()
    this.angle = angle;
    // keep direction, but change speed
    this.velocity.normalize();
    this.velocity.mult(3);
  }
  
  update(){
    this.position.add(this.velocity);
    push();
    translate(this.position.x, this.position.y);
    rotate(this.angle);
    line(0, -5,
         0,  5);
    
    pop();
  }
  
}

let rocket;
// store lasers shot
let lasers = [];

function setup() {
  createCanvas(300, 300);
  rocket = new Rocket(width / 2, height / 2);
}

function draw() {
  // smooth controls in draw
  if(keyIsPressed){
    // change angle and thrust
    if (keyCode === UP_ARROW) {
      rocket.thrust = 0.3;
    }
    if (keyCode === LEFT_ARROW) {
      rocket.angle -= radians(1);
    }
    if (keyCode === RIGHT_ARROW) {
      rocket.angle += radians(1);
    }
  }
  
  background(255);
  rocket.update();
  updateLasers();
  text("use arrow keys to drive ship\nuse SPACE to shoot", 10, 15);
}

function updateLasers(){
  for(let i = 0 ; i < lasers.length; i++){
    lasers[i].update();
  }
}

function keyPressed(){
  // if space is pressed and the ship is moving
  if(key == ' ' && rocket.velocity.mag() > 0){
    // copy the ships position and velocity as well as the pre-computed rotation angle to the newly shot laser
    // ...and append it to the lasers array
    lasers.push(new Laser(rocket.position.copy(), 
                          rocket.velocity.copy(),
                          rocket.angle));
  }
}

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

这并不完美:还有很多地方需要改进(例如处理离开屏幕的飞船，将激光标记为在屏幕上或屏幕外以重新使用并避免减速，等等)，但是目的是说明将火/激光功能解耦为一个单独的类。射击将产生在数组中管理的新实例。希望这一点得到理解。

(您可能还会在 this answer 中找到一些方便的提示)

更新 为了好玩，这里有一个版本，其中包含一些建议的调整(例如环绕边界、放慢速度等):

class Rocket{
  
  constructor(x, y){
    this.position = createVector(x, y);
    this.velocity = createVector();
    this.thrust = 0;
    this.angle = 0;
    this.friction = 0.1;
    this.halfHeight = 10;
    this.width = 5;
  }
  
  update(){
    // use polar to cartesian coordinate conversion formulate apply direction angle and thrust (radius)
    // -HALF_PI angle offset is because 0 degrees points to the right when it comes to rendering and we want our ship pointing up
    this.velocity.set(cos(this.angle - HALF_PI) * this.thrust,
                      sin(this.angle - HALF_PI) * this.thrust);
    // add velocity to position
    this.position.add(this.velocity);
    // wrap around borders
    if(this.position.x > width) this.position.x = 0;
    if(this.position.y > height) this.position.y = 0;
    if(this.position.x < 0) this.position.x = width;
    if(this.position.y < 0) this.position.y = height;
    // render
    push();
    // remember: order of transformations is important
    translate(this.position.x, this.position.y);
    rotate(this.angle);
    triangle(0 , -this.halfHeight,
             -this.width,  this.halfHeight,
             +this.width,  this.halfHeight);
    let mag = this.velocity.mag();
    let tail = map(sin(frameCount), -1.0, 1.0,0, 9 * mag);
    triangle(-this.width * .3, this.halfHeight,
              this.width * .3, this.halfHeight,
              0              , this.halfHeight + tail);
    pop();
  }
  
}

class Laser{
  constructor(position, velocity, angle){
    this.position = position;
    this.velocity = velocity.copy();
    // angle is simply copied so it can be reused for rendering without having to re-calculate using this.velocity.heading()
    this.angle = angle;
    // keep direction, but change speed
    this.velocity.normalize();
    this.velocity.mult(3);
  }
  
  update(){
    this.position.add(this.velocity);
    push();
    translate(this.position.x, this.position.y);
    rotate(this.angle);
    line(0, -5,
         0,  5);
    
    pop();
  }
  
}

let rocket;
// store lasers shot
let lasers = [];

function setup() {
  createCanvas(300, 300);
  rocket = new Rocket(width / 2, height / 2);
}

function draw() {
  // smooth controls in draw
  if(keyIsPressed){
    const acceleration = 0.01;
    // change angle and thrust
    switch(keyCode) {
      case UP_ARROW:
        rocket.thrust += acceleration;
        if(rocket.thrust > 1.5) rocket.thrust = 1.5;
        break;
      case DOWN_ARROW:
        rocket.thrust -= acceleration;
        if(rocket.thrust < 0) rocket.thrust = 0;
        break;
      case LEFT_ARROW:
        rocket.angle -= radians(1);
        break;
      case RIGHT_ARROW:
        rocket.angle += radians(1);
        break;
    }
  }
  
  background(255);
  rocket.update();
  updateLasers();
  text("use arrow keys to drive ship\nuse SPACE to shoot", 10, 15);
}

function updateLasers(){
  for(let i = 0 ; i < lasers.length; i++){
     lasers[i].update();
  }
}

function keyPressed(){
  // if space is pressed and the ship is moving
  if(key == ' ' && rocket.velocity.mag() > 0){
    // copy the ships position and velocity as well as the pre-computed rotation angle to the newly shot laser
    // ...and append it to the lasers array
    lasers.push(new Laser(rocket.position.copy(), 
                          rocket.velocity.copy(),
                          rocket.angle));
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>