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

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

转载作者：行者123 更新时间：2023-12-04 14:05:56

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

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

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

谢谢!

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>

最佳答案

快速浏览您的代码，我发现有一对火坐标。您想要的是一个单独的 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>

关于p5.js - 如何在两个对象(火箭飞船和射击)之间建立独立性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68513848/

文章推荐： PowerShell 安全扩展任意字符串中的非打印字符

文章推荐： python - 如何使用 numpy 改进我的自定义函数矢量化

java - 如果姓氏的第一个字符在 A 和 M 之间，如何返回 1；如果姓氏的第一个字符在 N 到 Z 之间，如何返回 2？
我需要修复 getLineNumberFor 方法，以便如果 lastName 的第一个字符位于 A 和 M 之间，则返回 1；如果它位于 N 和 Z 之间，则返回 2。在我看来听起来很简单，但我不
javascript - 在 Javascript 中，Onclick Img 标记和递增(在 1-10 之间)和 onclick 其他 img 和递减(在 1-10 之间)相同的计数器
您好，感谢您的帮助!我有这个: 0 我必须在每次点击后增加“pinli
javascript - 切换案例到/之间
Javascript 中是否有一种方法可以在不使用 if 语句的情况下通过 switch case 结构将一个整数与另一个整数进行比较？例如。 switch(integer) { case
delphi - cxgrid列过滤器选项“之间”
我有一列是“日期”类型的。如何在自定义选项中使用“之间”选项？最佳答案请注意，您有2个盒子。 between（在SQL中）包含所有内容，因此将框1设置为：DATE >= startdate，将框2
SQL Server 之间
我有一个表，其中包含年、月和一些数字列 Year Month Total 2011 10 100 2011 11 150 2011 12 100 20
Java - 从一行中读取特定部分( ""之间)
这个问题已经有答案了: Extract a substring between double quotes with regular expression in Java (2 个回答) how to
php - 在连接表中计算结果并在侧边栏中显示 () 之间
我有一个带有类别的边栏。正如你在这里看到的:http://kees.een-site-bouwen.nl/ url 中类别的 ID。带有 uri 段(3)当您单击其中一个类别时，例如网页设计。显示了一
C++正则表达式搜索多行注释(/* */之间)
这个问题在这里已经有了答案: My regex is matching too much. How do I make it stop? [duplicate] (5 个答案) 关闭 4 年前。我
php - 正则表达式取值在括号 "()"之间？
我很不会写正则表达式。我正在尝试获取括号“()”之间的值。像下面这样的东西...... $a = "POLYGON((1 1,2 2,3 3,1 1))"; preg_match_all("/\((
Android 覆盖在布局边界之外/之间
我必须添加一个叠加层 (ImageView)，以便它稍微移动到包含布局的左边界的左侧。执行此操作的最佳方法是什么？尝试了一些简单的方法，比如将 ImageView 放在布局中并使用负边距 andr
c# - 值与 Rx 之间
Rx 中是否有一些扩展方法来完成下面的场景？我有一个开始泵送的值(绿色圆圈)和其他停止泵送的值(簧片圆圈)，蓝色圆圈应该是预期值，我不希望这个命令被取消并重新创建(即“TakeUntil”和“Ski
r - 检查列值是否在其他两个列值的(范围)之间
我有一个看起来像这样的数据框(Dataframe X): id number found 1 5225 NA 2 2222 NA 3 3121 NA 我有另一个看起来
javascript - 排除 if 之间，但更复杂
所以，我正在尝试制作正则表达式，它将解析存储在对象中的所有全局函数声明，例如，像这样 const a = () => {} 我做了这样的事情: /(?:const|let|var)\s*([A-z0-
javascript - 如何将导弹枪管限制在最小和最大 Angular 之间？
我正在尝试从 Intellivision 重新创建 Astro-Smash，我想让桶保持在两个 Angular 之间。我只是想不出在哪里以及如何让这个东西停留在两者之间。我已经以各种方式交换了函数，
php - 查找选定变量内(之间)的数据总和
到处检查但找不到答案。我有这个页面，我使用 INNER JOIN 将两个表连接在一起，获取它们的值并显示它们。我有这个表格，用来获取变量(例如开始日期、结束日期和卡号)，这些变量将作为从表中调用值的
rust - 夹在一生和 FFI 之间
我陷入了两个不同的问题/错误之间，无法想出一个合适的解决方案。任何帮助将不胜感激上下文、FFI 和调用大量 C 函数，并将 C 类型包装在 rust 结构中。第一个问题是ICE: this pat
MySQL 选择 Current_timestamp 之间
我在 MySQL 中有一个用户列表，在订阅时，时间戳是使用 CURRENT_TIMESTAMP 在数据库中设置的。现在我想从此表中选择订阅日期介于第 X 天和第 Y 天之间的表我尝试了几个查询，但不
java - 如何检查两个日期是否在一个时间段(间隔)之间？
我的输入是开始日期和结束日期。我想检查它是在 12 月 1 日到 3 月 31 日之间。(年份可以更改，并且只有在此期间内或之外的日期)。到目前为止，我还没有找到任何关于 Joda-time 的解决
python - 为什么线程分布在 CPU 之间？
我正在努力了解线程与 CPU 使用率的关系。有很多关于线程与多处理的讨论(一个很好的概述是 this answer )所以我决定通过在运行 Windows 10、Python 3.4 的 8 CPU
PHP do-while 与 HTML 之间
我正在尝试编写 PHP 代码来循环遍历数组以创建 HTML 表格。我一直在尝试做类似的事情: fetchAll(PDO::FETCH_ASSOC); ?>

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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