Question

我当时在p5.js中制作一个JavaScript游戏。我做了很多游戏，然后想增加一些战斗力。我制造了一种发射子弹的武器。但是现在子弹很难制造。这就是我的武器的工作原理：

从玩家位置开始
找到鼠标单击的y旋转（从屏幕中心看，然后看旋转角度为多少（360度））
查看鼠标单击的y旋转
远处走

那我该怎么做子弹？我有基本脚本，但是子弹只有在击中敌人时才会被删除，只会进入清真寺，并且具有用于鼠标寻找路径的哑算法，您一次只能拥有一个子弹，如果没有击中任何敌人，它就像地雷一样坐在地上。

这是伪代码（根本没有编程规则）：

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>

Answer 1

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

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>

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

1 个答案: