小贝子编程

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



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

  1. 它从玩家位置开始
  2. 它找到了鼠标单击的 y 旋转(从屏幕中心看，看看它是什么度旋转(360 度))
  3. 查看鼠标单击的 Y 旋转
  4. 远处响起

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

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

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 python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium