javascript - 在 p5.js javascript 中创建项目符号对象

标签 javascript object processing p5.js

我正在用 p5.js 制作一个 javascript 游戏。我做了很多游戏，然后想添加一些战斗。我做了一个可以发射子弹的武器。但是现在子弹很难制造。所以我的武器是这样工作的:

  1. 从玩家位置开始
  2. 它找到了鼠标点击的y旋转(从屏幕中心看，看是旋转了多少度(360度))
  3. 看鼠标点击的y轴旋转
  4. 在远处熄灭

那么我该如何制作子弹呢？我有基本脚本，但是子弹只有在击中敌人时才会被删除，只会进入鼠标，有一个用于寻找鼠标路径的愚蠢算法，你一次只能有一颗子弹，如果它没有击中任何敌人，它就像地雷一样躺在地上。

这是伪代码(根本没有编程规则，哈哈):

Make bullet(playerPositionX,playerPositionY,mouseX,mousey) as a object:
 starter x and y = playerPostionX and playerPositionY
 lookTowards a point(mouseX,mouseY)
 goto the point(mouseX and mouseY) from the starter X and Y
 movespeed is 20pixel per frame

所以我现在在游戏中得到的是: 草图脚本:

var player;
var enemy;
var bullet;
var score = 0;
function setup(){
  createCanvas(600,600);
  player = new Player();
  enemy = new Enemy();
  textSize(20);
}
function draw(){
  clear();
  background(51);
  enemy.show();
  enemy.moveToPlayer(player.x, player.y);
  player.show();
  player.MovePlayer();
  if (bullet != undefined){
    bullet.show();
    bullet.toMouse();
    if (dist(bullet.x,bullet.y,enemy.x,enemy.y) <= enemy.r){
      enemy = new Enemy();
      score += 100;
      bullet = undefined;
    }
  }
  fill(255);
  text(score,500,500,100,100)
}
function mousePressed(){
  //if (enemy.clicked(mouseX,mouseY)){
  bullet = new Bullet(mouseX,mouseY,player.x,player.y);
  //enemy = new Enemy();
  //}
}

项目符号脚本:

function Bullet(X,Y,PX,PY){
  this.speed = 20;
  this.x = PX;
  this.y = PY;
  this.r = 5;
  this.show = function(){
    fill(255,255,0);
    stroke(128,128,0);
    circle(this.x,this.y,this.r);
  }
  this.toMouse = function(){
    if (Y < this.y){
      this.y += -1*this.speed;
    } else if (Y > this.y) {
      this.y += 1*this.speed;
    }
    if (X < this.x){
      this.x += -1*this.speed;
    } else if (X > this.x){
      this.x += 1*this.speed;
    }
  }

}

敌人脚本:

function Enemy(){
  this.r = 25;
  this.x = 0+this.r;
  this.y = 0+this.r;
  this.chance = random(0,1);
  console.log(this.chance);
  if (this.chance <= 0.10){
    this.speed = 3;
    this.r = 15;
    this.red = 0;
    this.green = 0;
    this.blue = 255;
  } else {
    this.speed = 2;
    this.red = 255;
    this.green = 0;
    this.blue = 0;
  }
  this.show = function(){
    fill(this.red,this.green,this.blue);
    stroke(128,0,0);
    circle(this.x,this.y,this.r);
  }
  this.moveToPlayer = function(playerX,playerY){
    if (playerY < this.y){
      this.y += -1*this.speed;
    } else if (playerY > this.y) {
      this.y += 1*this.speed;
    }
    if (playerX < this.x){
      this.x += -1*this.speed;
    } else if (playerX > this.x){
      this.x += 1*this.speed;
    }
  }
  /*
  this.clicked = function(mX,mY){
    if (dist(mX,mY,this.x,this.y) <= this.r){
      return true;
    }
    return false;
  }
  */
}

播放器脚本:

function Player(){
  this.x = width/2;
  this.y = height/2;
  this.r = 20;
  this.speed = 4;
  this.show = function(){
    fill(0,255,0);
    stroke(0,128,0);
    circle(this.x,this.y,this.r);
  }
  this.moveY = function(number){
    this.y += (number*this.speed);
  }
  this.moveX = function(number){
    this.x += (number*this.speed);
  }
  this.MovePlayer = function(){
    if (keyIsDown(UP_ARROW)){
      if (this.y + (-1*20) > 0)
        this.moveY(-1);
    }
    if (keyIsDown(DOWN_ARROW)){
      if (this.y + (1*20) < height)
        this.moveY(1);
    }
    if (keyIsDown(LEFT_ARROW)){
      if (this.x + (-1*20) > 0)
        this.moveX(-1);
    }
    if (keyIsDown(RIGHT_ARROW)){
      if (this.x + (1*20) < width)
        this.moveX(1);
    }
  }
}

html文件有它需要的一切 感谢您的提前!

var player;
var enemy;
var bullet;
var score = 0;
function setup(){
  createCanvas(600,600);
  player = new Player();
  enemy = new Enemy();
  textSize(20);
}
function draw(){
  clear();
  background(51);
  enemy.show();
  enemy.moveToPlayer(player.x, player.y);
  player.show();
  player.MovePlayer();
  if (bullet != undefined){
    bullet.show();
    bullet.toMouse();
    if (dist(bullet.x,bullet.y,enemy.x,enemy.y) <= enemy.r){
      enemy = new Enemy();
      score += 100;
      bullet = undefined;
    }
  }
  fill(255);
  text(score,500,500,100,100)
}
function mousePressed(){
  //if (enemy.clicked(mouseX,mouseY)){
  bullet = new Bullet(mouseX,mouseY,player.x,player.y);
  //enemy = new Enemy();
  //}
}

function Bullet(X,Y,PX,PY){
  this.speed = 20;
  this.x = PX;
  this.y = PY;
  this.r = 5;
  this.show = function(){
    fill(255,255,0);
    stroke(128,128,0);
    circle(this.x,this.y,this.r);
  }
  this.toMouse = function(){
    if (Y < this.y){
      this.y += -1*this.speed;
    } else if (Y > this.y) {
      this.y += 1*this.speed;
    }
    if (X < this.x){
      this.x += -1*this.speed;
    } else if (X > this.x){
      this.x += 1*this.speed;
    }
  }

}

function Enemy(){
  this.r = 25;
  this.x = 0+this.r;
  this.y = 0+this.r;
  this.chance = random(0,1);
  console.log(this.chance);
  if (this.chance <= 0.10){
    this.speed = 3;
    this.r = 15;
    this.red = 0;
    this.green = 0;
    this.blue = 255;
  } else {
    this.speed = 2;
    this.red = 255;
    this.green = 0;
    this.blue = 0;
  }
  this.show = function(){
    fill(this.red,this.green,this.blue);
    stroke(128,0,0);
    circle(this.x,this.y,this.r);
  }
  this.moveToPlayer = function(playerX,playerY){
    if (playerY < this.y){
      this.y += -1*this.speed;
    } else if (playerY > this.y) {
      this.y += 1*this.speed;
    }
    if (playerX < this.x){
      this.x += -1*this.speed;
    } else if (playerX > this.x){
      this.x += 1*this.speed;
    }
  }
  /*
  this.clicked = function(mX,mY){
    if (dist(mX,mY,this.x,this.y) <= this.r){
      return true;
    }
    return false;
  }
  */
}

function Player(){
  this.x = width/2;
  this.y = height/2;
  this.r = 20;
  this.speed = 4;
  this.show = function(){
    fill(0,255,0);
    stroke(0,128,0);
    circle(this.x,this.y,this.r);
  }
  this.moveY = function(number){
    this.y += (number*this.speed);
  }
  this.moveX = function(number){
    this.x += (number*this.speed);
  }
  this.MovePlayer = function(){
    if (keyIsDown(UP_ARROW)){
      if (this.y + (-1*20) > 0)
        this.moveY(-1);
    }
    if (keyIsDown(DOWN_ARROW)){
      if (this.y + (1*20) < height)
        this.moveY(1);
    }
    if (keyIsDown(LEFT_ARROW)){
      if (this.x + (-1*20) > 0)
        this.moveX(-1);
    }
    if (keyIsDown(RIGHT_ARROW)){
      if (this.x + (1*20) < width)
        this.moveX(1);
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

最佳答案

创建项目符号数组而不是单个项目符号，如果按下鼠标按钮，则将新项目符号添加到数组:

var bullets = [];

function mousePressed(){
    if (mouseX != player.x || mouseY != player.y ) {
        bullets.push( new Bullet(mouseX,mouseY,player.x,player.y) )
    }
}

使用p5.Vector在类 [Bullet] 中计算从玩家位置到鼠标位置的归一化方向。这是定义了Bullet的移动方向，可以在toMouse中使用，来更新Bullet对象的位置。
进一步添加方法 onScreen，它验证 Bullet 是否仍在屏幕范围内:

function Bullet(X,Y,PX,PY){
    this.speed = 2;
    this.x = PX;
    this.y = PY;
    this.dir = createVector(X-PX, Y-PY).normalize()
    this.r = 5;

    this.show = function(){
      fill(255,255,0);
      stroke(128,128,0);
      circle(this.x,this.y,this.r);
    }
    this.toMouse = function() {
        this.x += this.dir.x * this.speed;
        this.y += this.dir.y * this.speed;
    }
    this.onScreen = function() {
      return this.x > -this.r && this.x < width+this.r &&
              this.y > -this.r && this.y < height+this.r;
    }
}

遍历draw中的子弹。检查子弹是否击中敌人或离开屏幕。为下一次 draw 运行保留剩余的项目符号:

let keepbullets = []
let anyhit = false;
for (let i=0; i < bullets.length; ++ i) {
    bullets[i].toMouse();
    let hit = dist(bullets[i].x, bullets[i].y, enemy.x, enemy.y) <= enemy.r;
    anyhit = anyhit || hit
    if (!hit && bullets[i].onScreen()) {
        keepbullets.push(bullets[i]);
        bullets[i].show();
    }
}
bullets = keepbullets;
if (anyhit) {
    enemy = new Enemy();
    score += 100;
}

请参阅示例，其中我将建议应用于问题的原始代码。请注意，我已经极度降低了子弹的速度，以使多发子弹的效果可见:

var player;
var enemy;
var bullets = [];
var score = 0;
function setup(){
  createCanvas(600,600);
  player = new Player();
  enemy = new Enemy();
  textSize(20);
}
function draw(){
  clear();
  background(51);
  enemy.show();
  enemy.moveToPlayer(player.x, player.y);
  player.show();
  player.MovePlayer();

  let keepbullets = []
  let anyhit = false;
  for (let i=0; i < bullets.length; ++ i) {
      bullets[i].toMouse();
      let hit = dist(bullets[i].x, bullets[i].y, enemy.x, enemy.y) <= enemy.r;
      anyhit = anyhit || hit
      if (!hit && bullets[i].onScreen()) {
          keepbullets.push(bullets[i]);
          bullets[i].show();
      }
  }
  bullets = keepbullets;
  if (anyhit) {
      enemy = new Enemy();
      score += 100;
  }
  
  fill(255);
  text(score,500,500,100,100)
}

function mousePressed(){
    if (mouseX != player.x || mouseY != player.y ) {
        bullets.push( new Bullet(mouseX,mouseY,player.x,player.y) )
    }
}

function Bullet(X,Y,PX,PY){
    this.speed = 2;
    this.x = PX;
    this.y = PY;
    this.dir = createVector(X-PX, Y-PY).normalize()
    this.r = 5;
    
    this.show = function(){
      fill(255,255,0);
      stroke(128,128,0);
      circle(this.x,this.y,this.r);
    }
    this.toMouse = function() {
        this.x += this.dir.x * this.speed;
        this.y += this.dir.y * this.speed;
    }
    this.onScreen = function() {
      return this.x > -this.r && this.x < width+this.r &&
              this.y > -this.r && this.y < height+this.r;
    }
}

function Enemy(){
  this.r = 25;
  this.x = 0+this.r;
  this.y = 0+this.r;
  this.chance = random(0,1);
  console.log(this.chance);
  if (this.chance <= 0.10){
    this.speed = 3;
    this.r = 15;
    this.red = 0;
    this.green = 0;
    this.blue = 255;
  } else {
    this.speed = 2;
    this.red = 255;
    this.green = 0;
    this.blue = 0;
  }
  this.show = function(){
    fill(this.red,this.green,this.blue);
    stroke(128,0,0);
    circle(this.x,this.y,this.r);
  }
  this.moveToPlayer = function(playerX,playerY){
    if (playerY < this.y){
      this.y += -1*this.speed;
    } else if (playerY > this.y) {
      this.y += 1*this.speed;
    }
    if (playerX < this.x){
      this.x += -1*this.speed;
    } else if (playerX > this.x){
      this.x += 1*this.speed;
    }
  }
  /*
  this.clicked = function(mX,mY){
    if (dist(mX,mY,this.x,this.y) <= this.r){
      return true;
    }
    return false;
  }
  */
}

function Player(){
  this.x = width/2;
  this.y = height/2;
  this.r = 20;
  this.speed = 4;
  this.show = function(){
    fill(0,255,0);
    stroke(0,128,0);
    circle(this.x,this.y,this.r);
  }
  this.moveY = function(number){
    this.y += (number*this.speed);
  }
  this.moveX = function(number){
    this.x += (number*this.speed);
  }
  this.MovePlayer = function(){
    if (keyIsDown(UP_ARROW)){
      if (this.y + (-1*20) > 0)
        this.moveY(-1);
    }
    if (keyIsDown(DOWN_ARROW)){
      if (this.y + (1*20) < height)
        this.moveY(1);
    }
    if (keyIsDown(LEFT_ARROW)){
      if (this.x + (-1*20) > 0)
        this.moveX(-1);
    }
    if (keyIsDown(RIGHT_ARROW)){
      if (this.x + (1*20) < width)
        this.moveX(1);
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

关于javascript - 在 p5.js javascript 中创建项目符号对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55796293/

上一篇：javascript - foreach 循环数组 promise 不被返回

下一篇：javascript - Web 组件 : Firefox custom-element is not showing

相关文章：

audio - 在处理中实例化类中的 SoundFile 对象

javascript - Cesium:选择实体并检索 WMS 的信息

javascript - MongooseJS 填充反模式吗？

javascript - 通过从下拉列表中选择，启用另一个下拉列表

javascript - ES6 如何检查对象的每个键和值是否为 null 或未定义？

javascript - ReactJS 将对象数组渲染到列表中会出现错误

java - 使用函数将元素添加到类数组。处理3中的 "Paint"

javascript - Narwhal和Node.js之间的差异

javascript - 是否可以创建一个作为另一个对象的子集的对象，而不会丢失 JavaScript 中的引用？

java - 处理复制/重复调整大小问题

©2024 IT工具网  联系我们