在运行gameScreen（）之后，一旦代码停止并且用户根本无法与之交互，通常这是一个错误的迹象，但我看不到它有帮助。在我一起实现它们之前，用于更改屏幕和游戏的代码确实可以正常工作。整个过程中都有评论，以帮助您确定需要的任何内容。我的想法是，设置中发生了一些与速度和运动有关的大多数变量，但是我确实知道我是否要将代码移出设置之外的另一个函数，因为随机位置会导致一切都会随机移动，直到角色死亡。游戏的目标并不多，只是要在游戏内部弄乱，因为我仍在学习编码。
//screens (not ordered 2-6)
const controls = 3;
const game = 4;
const end = 5;
const Menu = 2;
const theEGG = 6; //pointless game screen but is only triggered by holding "T","R","A","V",I","S" because ya know.... easter egg. still in the making so not yet developed
var currentState = Menu;
//buttons
var playButton;
var controlsButton;
var backButton;
//------------------------------------------------------------------
//objects and such
var CspeedB = 5; //the current speed of the blue bike
var CspeedC = 5; //the current speed of the corrupt bike - the orange-red bike
var bBImg;//img of the bike
var cBImg;//alternate image that will be included later
var blueBike;//player
var asteroid;//asteroid img
var playerHeight = 50;//setting sizes
var playerWidth = 50;
var asteroids = [];//making array for asteroids
var lives = 100;
//==================================================================
//------------------------------------------------------------------
function preload(){
bBImg= loadImage("new/blueBike.png");
cBImg= loadImage('new/corruptBike.png');
asteroid = loadImage('new/asteroid.jpg');
TB = loadImage('new/tronbackground.jpg')
//text = loadStrings('');
}
//==================================================================
//runs only once
function setup(){
createCanvas(windowWidth,windowHeight);
playButton = createButton('Play!');//buttons to change screens
playButton.hide();
playButton.show();
backButton = createButton("Back");
backButton.size(width/5,height/5);
backButton.hide();
controlButton = createButton('Controls');
//------------------------------------------------------------------
blueBike= createSprite();
blueBike.addImage(bBImg);
bBImg.width = playerWidth;
bBImg.height = playerHeight;
blueBike.width = playerWidth;
blueBike.Height = playerHeight;
for (var i = 0; i < 10; i++) {
asteroids[i] = createSprite();
asteroids[i].addImage(asteroid);
asteroids[i].maxSpeed = 1;
asteroid.width = 70;
asteroid.height = 70;
asteroids[i].position.x = random(0,windowWidth);
asteroids[i].position.y = random(0,windowHeight);
asteroids[i].velocity.x = random(-4,4);
asteroids[i].velocity.y = random(-4,4);
asteroids[i].mass = random(1,5);
}
//creating obsticals
walls = new Group();
boxes = new Group();
for (var j = 0; j < 100; j++) {
var w = createSprite();
w.width = random(0,50);
w.height = random(0,50);
w.position.x = random(0,windowWidth);
w.position.y = random(0,windowHeight);
w.shapeColor = color(0,0,255);
walls.add(w);
}
for (var j = 0; j < 20; j++) {
var b = createSprite(random(width), random(height),25, 25);
b.shapeColor = color(0, 255, 0);
boxes.add(b);
}
//-==========================================================
State();
}
function State(){// uses this function to go to different functions depending on state
switch (currentState){
case Menu:
menuScreen();
break;
case controls:
controlScreen();
break;
case end:
endScreen();
break;
case theEGG:
theRabitHole();
break;
case game:
gameScreen();
break;
}
}
function menuScreen(){
background("blue");
currentState = Menu;
playButton.size(width/5,height/5);
playButton.mouseClicked(gameScreen);
playButton.show();
controlButton.size(width/5,height/5);
controlButton.mouseClicked(controlsScreen);
backButton.hide();
}
function controlsScreen(){
background("green");
currentState = controls;
backButton.size(width/5,height/5);
backButton.mouseClicked(menuScreen);
}
//after running through gameScreen() once the code stopes and the user is anable to interact with it at all, usually that is a sign of an error but i cannot see it pls help. the code for changing the screens and the game did work before i implemented them together.
function gameScreen(){
background("red");
currentState = game;
backButton.size(width/5,height/5);
backButton.mouseClicked(menuScreen);
playButton.hide();
backButton.show();
//-------------------------------------------------------
//background
background(TB);
// lives displayed in top left
for (var i = 0; i < 10; i++) {
fill("pink");
textSize(20);
text("Health: " + lives, width/10,height/10);
//losing livies when contacting the asteroids (each frame it is conecting)
if (asteroids[i].collide(asteroids[i])){
asteroids[i].bounce(asteroids[i]);
}
//movement
if (mouseIsPressed) {
blueBike.attractionPoint(0.4, mouseX, mouseY);
blueBike.rotateToDirection = true;
blueBike.maxSpeed = CspeedB;
}
//collision with asteroids
if (blueBike.collide(asteroids[i])){
background('red');
lives -= 1;
}
//asteroids colliding with walls put them to the opposite side of the screen
if (asteroids[i].position.x > width) {
asteroids[i].position.x = 0;
}
if (asteroids[i].position.x < 0) {
asteroids[i].position.x = width;
}
if (asteroids[i].position.y > height) {
asteroids[i].position.y = 0;
}
if (asteroids[i].position.y < 0) {
asteroids[i].position.y = height;
}
}
//lives
if (lives<= 0){
currentState = end;
State();
}
//collisions with obsticals
blueBike.collide(walls);
blueBike.bounce(boxes);
boxes.collide(walls);
boxes.displace(boxes);
drawSprites();
state();
//=============================================================
}
function endScreen(){
background("yellow");
currentState = end;
backButton.show();
backButton.position(windowWidth/2,windowHeight/2);
}
//nothing worth looking at.
function theRabitHole(){// want this to cycle through colours like a rainbow
/*for(let H = 0; H >= 255; H++){
if (H == 255){
H = 0;
}
background(H,255,255);
}*/
currentState = theEGG;
backButton.show();
}<!DOCTYPE html>
<html>
<head>
<script src="p5/p5.js"></script>
<script src="p5/addons/p5.dom.js"></script>
<script src="dat.js"></script>
</head>
<body>
</body>
<!-- begin snippet: js hide: false console: true babel: false -->
</html>