Question

我正在用原始的pong游戏的三个不同版本来创建pong游戏，并且每个版本都具有3种不同的功能，例如；单人，多人等我已经调用了一个函数menu（）;在第一个功能setup（）中，它将创建一个菜单屏幕，供用户使用按钮选择游戏的版本。

出于某种原因，当我执行代码并单击其中一个按钮（例如“单人游戏”）时，该代码不会执行，而是仍然停留在菜单屏幕上。

function setup() {
    createCanvas(400,400)
    background(0)
    menu();
}

function draw() {
}

function menu() {
    background(120,0,255);
    button=createButton("Normal Multiplayer")
    button.position(135,60);

    button2=createButton("Multiplayer ball frenzy");
    button2.position(130,180);
    button2.mousePressed(MultiplayerFrenzy);

    button3=createButton("Singleplayer (use mouse)");
    button3.position(125,260);
    button3.mousePressed(Singleplayer)

    textSize(32)
    fill(0)
    text("PONG",95,30)
    textSize(12)
    fill(0)
    text("Play with your keyboard",130,100)
    text("Guide your paddle with the mouse",115,295)
}

 function Singleplayer() {
clear();
hideButtons();
text("single player",width/2,height/2)
var paddleLx;
var paddleLy;
var paddleRx;
var paddleRy;
var ballX;
var ballY;
var ballVx;
var ballVy;
var ballSize = 20;
var paddleWidth = 20;
var paddleHeight = 120;
var bigWidth = (ballSize + paddleWidth)/2;
var bigHeight = (ballSize + paddleHeight)/2;
var gameOn = 0;
var ticker = 0;
var LScore = 0;
var RScore = 0;
var r2 = 0;
var b2 = 255;
let balls = [];


function restart() {
paddleLx = 22;
paddleLy = 300;
paddleRx = 777;
paddleRy = 300;
ballX = paddleLx + ballSize;
ballY = paddleRy;
ballVx = 0;
ballVy = 0;

}

function setup() {
//creates the canvas
createCanvas(800, 400);
// change the background attribute so that it changes colour as mousex and mousey changes
background(0);
restart();
// creates the text for the initial page
textSize(50);
fill(0,0,255);
text("PONG", 310, 160);
text("MODIFIED", 275, 240);
fill(20,35,86);
text("PONG", 310+2, 160+2);
text("MODIFIED", 275+2, 240+2);

}

   //begins the game if the mouse is pressed
       function mousePressed() {
        if (gameOn == 0) {
          gameOn = 1;
          ballVx = 5;
    }

}




     //main function called for the game to be played
       function update() {

//responsible for moving the user's paddle
    paddleLy = mouseY;

//
    ballX=ballX+ballVx;
    ballY=ballY+ballVy;

//increments ticker variable
    ++ticker;



//defines the movement for the right paddle to move autonomously
    paddleRy = int(ballY + 50*sin(sin((ballY + ticker)/30)));

// changes background colour when left and right paddle move
    r2=map(paddleRy,0,400,0,255);
    b2=map(mouseY,0,400,255,0);
    background(r2,0,b2);

    fill(255,255,255);
    textSize(32);
    text(LScore, 10, 30);
    text(RScore, 770, 30);

// if the y coordinate of the ball is out of bounds, its direction is reversed
    if (ballY < 0 || ballY > 400) {
    ballVy=ballVy*-1
  }

//rules for handling how the paddles interact with the ball
    else if ((paddleLx - bigWidth < ballX) && (ballX < paddleLx + bigWidth) && (paddleLy - bigHeight < ballY) && (ballY < paddleLy + bigHeight)) {
        ballVy = ((ballY - paddleLy)/float(bigHeight))*4;
        ballVx *= -1.1;
        ballX += 1;
 }
    else if ((paddleRx - bigWidth < ballX) && (ballX < paddleRx + bigWidth) && (paddleRy - bigHeight < ballY) && (ballY < paddleRy + bigHeight)) {
     ballVy = ((ballY - paddleRy)/float(bigHeight))*4;
     ballVx *= -1;
     ballX -= 1;
 }
//if player loses
    else if (ballX < -2) {
      ballVx = ballVy = 0;
      textSize(50);
      fill(0,0,0);
      text("GAME OVER!", 215,200);
      fill(random(255),0,0)
      text("GAME OVER!", 215+2, 200+2);

      ++RScore;
      gameOn = 0;
      restart();
  }
//if player wins
    else if (ballX > 802) {
       ballVx = ballVy = 0;
       textSize(50);
       fill(0,0,0)
       text("YOU WIN!", 260, 200);
       fill(random(255),0,0);
       text("YOU WIN!", 260+2, 200+2);
       ++LScore;
       gameOn = 0;
       restart();
    }
}


 //draw function (repeats continously throughout the course of the sketch)
     function draw() {
        if (gameOn == 1) {
           update();
     }
     fill(random(255),random(255),random(255));
      rect(paddleLx-(paddleWidth/2), paddleLy-(paddleHeight/2), paddleWidth, paddleHeight);

      rect(paddleRx-(paddleWidth/2), paddleRy-(paddleHeight/2), paddleWidth, paddleHeight);
      fill(random(255),0,random(255));
      ellipse(int(ballX), int(ballY), ballSize, ballSize);

    }
    }

Answer 1

您应该做的第一件事是单击Single Player或Multiplayer时隐藏按钮。由于未在画布中使用clear()创建按钮，因此无法满足要求。

我已经使用您的Singleplayer函数建立了一个小示例：

function Singleplayer() {
    clear();
    hideButtons();
    text("Single player game", width/2, height/2);
}

function hideButtons() {
    button.hide();
    button2.hide();
    button3.hide();
}

因此clear()将删除背景色和文本，而hideButtons()将隐藏您设置的按钮。这样，您现在可以使用空白画布对Singleplayer代码进行排序。

如何使用按钮在p5.js中为游戏创建菜单

1 个答案: