javascript - 如何使用 P5.JS 在我的游戏中添加“生命”?
问题描述
我想知道是否有人可以帮助我完成我在 P5.JS 上创建的游戏?我正在尝试将生命作为该游戏的一项功能来创建,但是每当我死在峡谷中时,它都会夺走所有生命,而不是只夺走一条生命并按应有的方式重置游戏。任何建议都会非常有帮助。
var gameChar_x;
var gameChar_y;
var floorPos_y;
var scrollPos;
var gameChar_world_x;
var isLeft;
var isRight;
var isFalling;
var isPlummeting;
var trees_x;
var clouds;
var mountains;
var collectables;
var canyon;
var game_score;
var flagpole;
var lives;
function setup()
{
createCanvas(1024, 576);
floorPos_y = height * 3/4;
lives = 3;
startGame();
}
function draw()
{
background(100, 155, 255); // fill the sky blue
noStroke();
fill(0,155,0);
rect(0, floorPos_y, width, height/4); // draw some green ground
push();
translate(scrollPos, 0);
drawClouds();
drawMountains();
drawTrees();
for(var i = 0; i < canyon.length; i++)
{
drawCanyon(canyon[i]);
checkCanyon(canyon[i]);
}
// Draw collectable items.
strokeWeight(1)
for(var i = 0; i < collectables.length; i++)
{
if(!collectables[i].isFound)
{
drawCollectable(collectables[i]);
checkCollectable(collectables[i]);
}
}
renderFlagpole();
checkPlayerDie();
pop();
// Draw game character.
drawGameChar();
fill(255, 0, 0);
textSize(24);
text("Lives: " + lives, width/8, 20);
fill(0);
noStroke();
textSize(24);
text("score: " + game_score, width/2, 20)
textSize(12);
// Logic to make the game character move or the background scroll.
if(isLeft)
{
if(gameChar_x > width * 0.2)
{
gameChar_x -= 5;
}
else
{
scrollPos += 5;
}
}
if(isRight)
{
if(gameChar_x < width * 0.8)
{
gameChar_x += 5;
}
else
{
scrollPos -= 5; // negative for moving against the background
}
}
// Logic to make the game character rise and fall.
if(gameChar_y !== floorPos_y)
{
gameChar_y += 2
isFalling = true;
}
else if(isFalling)
{
isFalling = false;
}
if(flagpole.isReached == false)
{
checkFlagpole();
}
// Update real position of gameChar for collision detection.
gameChar_world_x = gameChar_x - scrollPos;
}
// ---------------------
// Key control functions
// ---------------------
function keyPressed()
{
if(keyCode == 37)
{
console.log("left arrow");
isLeft = true;
}
else if(keyCode == 39)
{
console.log("right arrow");
isRight = true;
}
if(keyCode == 32 && gameChar_y == floorPos_y)
{
console.log("jump")
gameChar_y -=100;
}
}
function keyReleased()
{
if(keyCode == 37)
{
console.log("left arrow");
isLeft = false;
}
else if(keyCode == 39)
{
console.log("right arrow");
isRight = false;
}
}
// ------------------------------
// Game character render function
// ------------------------------
// Function to draw the game character.
function drawGameChar()
{
if(isLeft && isFalling)
{
// add your jumping-left code
fill(255, 201, 169); //head
ellipse(gameChar_x, gameChar_y - 55, 30, 40);
fill(0); //back leg
ellipse(gameChar_x + 10, gameChar_y - 20, 20, 10);
fill(255, 201, 169); //back arm
ellipse(gameChar_x + 12, gameChar_y - 35, 10, 10);
fill(135, 206, 235); //body
rect(gameChar_x-10, gameChar_y - 38, 20, 15);
fill(0) //front leg
ellipse(gameChar_x - 10, gameChar_y - 20, 20, 10);
fill(0) //eye
ellipse(gameChar_x - 11, gameChar_y - 58, 2, 10);
fill(255, 201, 169); //front arm
ellipse(gameChar_x + 8, gameChar_y - 30, 10, 10);
}
else if(isRight && isFalling)
{
// add your jumping-right code
fill(255, 201, 169); //head
ellipse(gameChar_x, gameChar_y - 55, 30, 40);
fill(0); //back leg
ellipse(gameChar_x - 10, gameChar_y - 20, 20, 10);
fill(255, 201, 169); //back arm
ellipse(gameChar_x - 12, gameChar_y - 35, 10, 10);
fill(135, 206, 235); //body
rect(gameChar_x - 10, gameChar_y - 38, 20, 15);
fill(0) //front leg
ellipse(gameChar_x + 10, gameChar_y - 20, 20, 10);
fill(0) //eye
ellipse(gameChar_x + 11, gameChar_y - 58, 2, 10);
fill(255, 201, 169); //front arm
ellipse(gameChar_x - 8, gameChar_y - 30, 10, 10);
}
else if(isLeft)
{
// add your walking left code
fill(255, 201, 169); //head
ellipse(gameChar_x, gameChar_y - 45, 30, 40);
fill(0); //back leg
ellipse(gameChar_x + 10, gameChar_y - 7, 20, 10);
fill(255, 201, 169); //back arm
ellipse(gameChar_x + 12, gameChar_y - 25, 10, 10);
fill(135, 206, 235); //body
rect(gameChar_x-10, gameChar_y - 28, 20, 20);
fill(0) //front leg
ellipse(gameChar_x - 10, gameChar_y - 4, 20, 10);
fill(0) //eye
ellipse(gameChar_x - 11, gameChar_y - 48, 2, 10);
fill(255, 201, 169); //front arm
ellipse(gameChar_x - 13, gameChar_y - 16, 10, 10);
}
else if(isRight)
{
// add your walking right code
fill(255, 201, 169); //head
ellipse(gameChar_x, gameChar_y - 45, 30, 40);
fill(0); //back leg
ellipse(gameChar_x - 10, gameChar_y - 7, 20, 10);
fill(255, 201, 169); //back arm
ellipse(gameChar_x - 12, gameChar_y - 25, 10, 10);
fill(135, 206, 235); //body
rect(gameChar_x - 10, gameChar_y - 28, 20, 20);
fill(0) //front leg
ellipse(gameChar_x + 10, gameChar_y - 4, 20, 10);
fill(0) //eye
ellipse(gameChar_x + 11, gameChar_y - 48, 2, 10);
fill(255, 201, 169); //front arm
ellipse(gameChar_x + 13, gameChar_y - 16, 10, 10);
}
else if(isFalling || isPlummeting)
{
// add your jumping facing forwards code
fill(255, 201, 169);//head
ellipse(gameChar_x, gameChar_y - 55, 40, 40);
fill(135, 206, 235); //body
rect(gameChar_x-13, gameChar_y - 38, 26, 20);
fill(255, 201, 169); //arms
ellipse(gameChar_x - 13, gameChar_y - 33, 10, 10);
ellipse(gameChar_x + 18, gameChar_y - 70, 10, 10);
fill(0) //legs
ellipse(gameChar_x - 10, gameChar_y - 10, 20, 10);
ellipse(gameChar_x + 10, gameChar_y - 17, 20, 10);
fill(0) //eyes
ellipse(gameChar_x - 8, gameChar_y - 58, 5, 10);
ellipse(gameChar_x + 8, gameChar_y - 58, 5, 10);
}
else
{
// add your standing front facing code
fill(255, 201, 169);
ellipse(gameChar_x, gameChar_y - 45, 40, 40);
fill(135, 206, 235);
rect(gameChar_x-13, gameChar_y - 28, 26, 20);
fill(255, 201, 169);
ellipse(gameChar_x - 13, gameChar_y - 18, 10, 10);
ellipse(gameChar_x + 13, gameChar_y - 18, 10, 10);
fill(0)
ellipse(gameChar_x - 10, gameChar_y - 5, 20, 10);
ellipse(gameChar_x + 10, gameChar_y - 5, 20, 10);
fill(0)
ellipse(gameChar_x - 8, gameChar_y - 48, 5, 10);
ellipse(gameChar_x + 8, gameChar_y - 48, 5, 10);
strokeWeight(0)
}
}
// ---------------------------
// Background render functions
// ---------------------------
// Function to draw cloud objects.
function drawClouds()
{
for (var i = 0; i < clouds.length; i++)
{
fill(255,255,255);
ellipse(clouds[i].pos_x,
clouds[i].pos_y, 70, 80);
ellipse(clouds[i].pos_x + 30,
clouds[i].pos_y, 80, 100);
ellipse(clouds[i].pos_x + 60,
clouds[i].pos_y, 80, 100);
ellipse(clouds[i].pos_x + 90,
clouds[i].pos_y, 70, 80);
}
}
// Function to draw mountains objects.
function drawMountains()
{
for (var i = 0; i < mountains.length; i++)
{
fill(120, 120, 120);
triangle(mountains[i].pos_x,
mountains[i].pos_y,
mountains[i].pos_x + 270,
mountains[i].pos_y - 326,
mountains[i].pos_x + 410,
mountains[i].pos_y);
fill(255, 255, 255);
triangle(mountains[i].pos_x + 310,
mountains[i].pos_y - 247,
mountains[i].pos_x + 267,
mountains[i].pos_y - 326,
mountains[i].pos_x + 270,
mountains[i].pos_y - 266);
triangle(mountains[i].pos_x + 280,
mountains[i].pos_y - 266,
mountains[i].pos_x + 267,
mountains[i].pos_y - 326,
mountains[i].pos_x + 210,
mountains[i].pos_y - 255);
triangle(mountains[i].pos_x + 225,
mountains[i].pos_y - 267,
mountains[i].pos_x + 260,
mountains[i].pos_y - 247,
mountains[i].pos_x + 300,
mountains[i].pos_y - 267);
}
}
// Function to draw trees objects.
function drawTrees()
{
for (var i = 0; i < trees_x.length; i++)
{
fill(122, 31, 31); //tree
rect(trees_x[i], treePos_y + 105, 35, 40);
fill(34,139,34);
triangle(trees_x[i] + 80,
treePos_y + 115,
trees_x[i] + 20,
treePos_y + 45,
trees_x[i] - 45,
treePos_y + 115);
triangle(trees_x[i] + 80,
treePos_y + 75,
trees_x[i] + 20,
treePos_y - 5,
trees_x[i] - 45,
treePos_y + 75);
}
}
// ---------------------------------
// Canyon render and check functions
// ---------------------------------
// Function to draw canyon objects.
function drawCanyon(t_canyon)
{
fill(100, 155, 255);
rect(t_canyon.pos_x, floorPos_y, t_canyon.width, 144);
}
// Function to check character is over a canyon.
function checkCanyon(t_canyon)
{
if(gameChar_world_x > t_canyon.pos_x && gameChar_world_x < t_canyon.pos_x + 100)
{
gameChar_y += 2
isFalling = true;
}
}
// ----------------------------------
// Collectable items render and check functions
// ----------------------------------
// Function to draw collectable objects.
function drawCollectable(t_collectable)
{
stroke(1);
fill(255,215,0);
ellipse(t_collectable.x_pos,
t_collectable.y_pos - 20,
t_collectable.size,
t_collectable.size);
ellipse(t_collectable.x_pos,
t_collectable.y_pos - 20,
t_collectable.size - 10,
t_collectable.size - 10);
fill(0, 0, 0);
text("$", t_collectable.x_pos - 3,
t_collectable.y_pos - 16);
}
// Function to check character has collected an item.
function checkCollectable(t_collectable)
{
if(dist(gameChar_world_x, gameChar_y,
t_collectable.x_pos, t_collectable.y_pos - 20) < t_collectable.size)
{
t_collectable.isFound = true;
game_score += 1;
}
}
function checkPlayerDie()
{
console.log(lives);
if(gameChar_y > height)
{
lives = true;
lives = lives -= 1;
}
if(lives == true)
{
startGame;
}
}
function startGame()
{
gameChar_x = width/2;
gameChar_y = floorPos_y;
treePos_y = height/2;
// Variable to control the background scrolling.
scrollPos = 0;
// Variable to store the real position of the gameChar in the game
// world. Needed for collision detection.
gameChar_world_x = gameChar_x - scrollPos;
// Boolean variables to control the movement of the game character.
isLeft = false;
isRight = false;
isFalling = false;
isPlummeting = false;
// Initialise arrays of scenery objects.
trees_x = [25,
75,
125,
360,
410,
460,
800,
850,
900,
1240,
1290,
1340,
1680,
1730,
1780
];
clouds = [
{pos_x: 50, pos_y: 50},
{pos_x: 300, pos_y: 70},
{pos_x: 550, pos_y: 110},
{pos_x: 800, pos_y: 70},
{pos_x: 1000, pos_y: 50},
{pos_x: 1250, pos_y: 70},
{pos_x: 1500, pos_y: 110},
{pos_x: 1750, pos_y: 50}
];
mountains = [
{pos_x: 75, pos_y: 432},
{pos_x: 175, pos_y: 432},
{pos_x: 775, pos_y: 432},
{pos_x: 1675, pos_y: 432},
{pos_x: 1975, pos_y: 432},
];
collectables = [
{x_pos: 566, y_pos: floorPos_y, size: 30, isFound: false},
{x_pos: 700, y_pos: floorPos_y, size: 30, isFound: false},
{x_pos: 1100, y_pos: floorPos_y, size: 30, isFound: false},
{x_pos: 1900, y_pos: floorPos_y, size: 30, isFound: false}
];
canyon = [
{pos_x: 590, width: 100},
{pos_x: 1450, width: 100}
];
game_score = 0;
flagpole = {isReached: false, x_pos: 2000}
}
function renderFlagpole()
{
push();
strokeWeight(5);
stroke(255);
line(flagpole.x_pos, floorPos_y, flagpole.x_pos, floorPos_y - 350);
fill(255, 215, 0);
noStroke();
if(flagpole.isReached)
{
rect(flagpole.x_pos, floorPos_y - 50, 75, 50);
}
else
{
rect(flagpole.x_pos, floorPos_y - 350, 75, 50);
}
pop();
}
function checkFlagpole()
{
var d = abs(gameChar_world_x - flagpole.x_pos);
if(d < 15)
{
flagpole.isReached = true;
}
}
我已经添加了代码,下面也是我正在做的事情。
https://editor.p5js.org/conorwykes/present/zvxNtkcy
提前致谢
解决方案
我相信你的错误在这里:
function checkPlayerDie()
{
console.log(lives);
if(gameChar_y > height)
{
lives = true;
lives = lives -= 1;
}
if(lives == true)
{
startGame;
}
}
特别是这两行:
lives = true;
lives = lives -= 1;
我假设您的意图是作为lives
一个整数值,计算角色剩余生命的数量。但是,您将值更改为布尔true
值,基本上丢弃了任何存在的数量。因此,因为true - 1
结果导致0
你立即失去了所有现有的生命。
如果我正确理解您的逻辑,我认为您还想将以下if
条件更改为 。if (lives > 0)
此外,虽然这不是错误,但我建议更改下一行lives = lives -= 1
. 在这里,您是多余的,因为您将Assignment Operator与Substraction Assignment operator结合起来。您应该将其更改为 justlives -= 1;
或lives = lives - 1;
.
编辑:
我刚刚运行了您的代码,并且还注意到,为了使其正常工作,您需要将第二个if
语句放在第一个if
语句中。这是我所做的编辑,导致它正常工作:
function checkPlayerDie()
{
console.log(lives);
if(gameChar_y > height)
{
lives -= 1;
if(lives > 0)
{
startGame();
}
}
}
推荐阅读
- java - 在运行时禁用/启用对 Vaadin 8 网格的拖放支持
- c# - 如何将 JSON 对象转换为数组
- autosar - AUTOSAR 是否包含开箱即用的组件
- linux - shell 脚本无法在 eclipse che 中创建工作区
- c# - C# 使用 Office.Interop 设置数据透视表的 TableStyle
- spring - CannotLoadBeanClassException:找不到名称在 ServletContext 资源 [/WEB-INF/sping-servlet.xml] 中定义的 bean 的类
- excel - 如何通过激活另一个工作簿中的宏来更改工作簿的全局变量
- c - 在C中访问多维字符串数组的元素
- javascript - SAPUI5 StandardListItem 按选定排序
- r - ggplot中标题行的水平调整不等