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 改进我的自定义函数矢量化

node.js - backbone.js + node.js - express.js
我正在学习构建单页应用程序 (SPA) 所需的所有技术。总而言之，我想将我的应用程序实现为单独的层，其中前端仅使用 API Web 服务(json 通过 socket.io)与后端通信。前端基本上是
node.js - Sequelize js/express js/node js 如何更改日期格式
当我看到存储在我的数据库中的日期时。这是正常。日期和时间就是这样。但是当我运行 get 请求来获取数据时。此格式与存储在数据库中的格式不同。为什么会发生这种情况？最佳答案我认为您可以将
history.js - Sammy.js/History.js/Nav.js 之间的比较
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
backbone.js - Mustache.js/Hogan.js 和 Backbone.js
我正在尝试使用backbone.js 实现一些代码和 hogan.js (http://twitter.github.com/hogan.js/) Hogan.js was developed ag
node.js - Backbone.js Node.js Express.js 中的用户功能
我正在使用 Backbone.js、Node.js 和 Express.js 制作一个 Web 应用程序，并且想要添加用户功能(登录、注销、配置文件、显示内容与该用户相关)。我打算使用 Passpor
node.js - Angular.js/D3.js/Node.js 之间有什么区别和相似之处
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
node.js - d3.js、queue.js 和 node.js
我尝试在 NodeJS 中加载数据，然后将其传递给 ExpressJS 以在浏览器中呈现 d3 图表。我知道我可以通过这种方式加载数据 - https://github.com/mbostock/q
node.js - node.js 中 app.js、index.js 和 server.js 的约定？
在 node.js 中，我似乎遇到了相同的 3 个文件名来描述应用程序的主要入口点: 使用 express-generator 包时，会创建一个 app.js 文件作为生成应用的主要入口点。通过 n
backbone.js - amplify.js 和backbone.js
最近，我有机会观看了 john papa 关于构建单页应用程序的精彩类(class)。我会喜欢的。它涉及服务器端和客户端应用程序的方方面面。我更喜欢客户端。在他的实现过程中，papa先生在客户端有类
backbone.js - Mustache.js、Handlebars.js 和 Underscore.js 有什么区别？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
d3.js - Pixi.js vs Konva.js vs D3.js
我是一个图形新手，需要帮助了解各种 javascript 2D 库的功能。 . . 我从 Pixi.js 中得到了什么，而我没有从 Konva 等基于 Canvas 的库中得到什么？我从 Konva
node.js - Ember.js:将选项传递给node.js
我正在尝试将一些 LESS 代码(通过 ember-cli-less)构建到 CSS 文件中。 1) https://almsaeedstudio.com/ AdminLTE LESS 文件2) Bo
node.js - 尝试在 Express.js Node.js Passport.js 中查看所有登录用户
尝试查看 Express Passport 中所有登录用户的所有 session ，并希望能够查看当前登录的用户。最好和最快的方法是什么？我在想也许我可以在登录时执行此操作并将用户模型数据库“在线”
node.js - React.js 渲染完成后运行客户端 JS
我有一个 React 应用程序，但我需要在组件加载完成后运行一些客户端 js。一旦渲染函数完成并加载，运行与 DOM 交互的 js 的最佳方式是什么，例如 $('div').mixItUp() 。对
node.js - 使用 vue.js、node.js 和express.js 上传原始文件
请告诉我如何使用bodyparser.raw()将文件上传到express.js服务器客户端 // ... onFilePicked(file) { const url = 'upload/a
node.js - 由于 js 错误过多，Gulp.js 无法编译 angular.js 项目？
我正在尝试从 Grunt 迁移到 Gulp。这个项目在 Grunt 下运行得很好，所以我一定是在 Gulp 中做错了什么。除脚本外，所有其他任务均有效。我现在厌倦了添加和注释部分。我不断收到与意外
node.js - sails.js(使用 node.js 和 express.js)的标题或应用名称在哪里？
我正在尝试更改我的网站名称。找不到可以设置标题或应用程序名称的位置。最佳答案您可以在 config/ 目录中创建任何文件，例如 config/app.js 包含如下内容: module.expor
node.js - 将 ember.js 与 node.js + express.js 结合使用
经过多年的服务器端 PHP/MySQL 开发，我正在尝试探索用于构建现代 Web 应用程序的新技术。我正在尝试对所有 JavaScript 内容进行排序，如果我理解得很好，一个有效的解决方案可以是服
node.js - Node.js 中 app.js 和 index.js 的区别
我是 Nodejs 的新手。我在 route 目录中有一个 app.js 和一个 index.js。我有一个 app.use(multer....)。我还定义了 app.post('filter-re
javascript - AngularJS 种子 : putting JavaScript into separate files (app. js、controllers.js、directives.js、filters.js、services.js)
我正在使用 angular-seed用于构建我的应用程序的模板。最初，我将所有 JavaScript 代码放入一个文件 main.js。该文件包含我的模块声明、 Controller 、指令、过滤器和

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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