How to make the game continue playing, not just playing once

p5.js Coding Questions
1

At the moment, the red color circle can be played only once, can the game continue to play maybe for 1 minute, then it will stop and show the scores? And when the following game continues, so the answer to the game will be automatically changed.

17%20PM
Screen Shot 2018-10-07 at 6.06.17 PM.png1228×636 4.46 KB

The code link is here:

https://editor.p5js.org/mtwhill/sketches/ryMrazX5Q

var bx;
var by;
var ellSize = 75;
var overBox = false;
var locked = false;
var xOffset = 0.0; 
var yOffset = 0.0; 

function setup() {
  createCanvas(600, 300);
  bx = width/2.0;
  by = height/2.0;
  rectMode(RADIUS);
  strokeWeight(1.5);
}

function draw() { 
  background(230);
  
  // Test if the cursor is over the box 
  if (mouseX > bx-ellSize && mouseX < bx+ellSize && 
      mouseY > by-ellSize && mouseY < by+ellSize) {
    overBox = true;  
    if(!locked) { 
      stroke(255); 
    } 
  } else {
    stroke(0);
    overBox = false;
  }
  
  // Draw the box
	fill(250, 0, 0);
  ellipse(bx, by, ellSize, ellSize);
	rect(50, 50, 80, 80);
	fill(0, 250, 0);
	rect(550, 50, 80, 80);
	fill(0, 0, 250);
	rect(50, 250, 80, 80);
	fill(0, 0, 0);
	rect(550, 250, 80, 80);

}

function mousePressed() {
  if(overBox) { 
    locked = true; 
  } else {
    locked = false;
  }
  xOffset = mouseX-bx; 
  yOffset = mouseY-by; 

}

function mouseDragged() {
  if(locked) {
    bx = mouseX-xOffset; 
    by = mouseY-yOffset; 
  }
}

function mouseReleased() {
  if(bx>120|by >120) {
		bx = 300;
		by = 150;
		 }
	else {
		ellSize = 0;
	}
}
2

https://editor.p5js.org/julian2/sketches/Bko1oSDq7

I think the goal you wanted to create with this was to drag the red ball to the red square/corner right? I’ve tried to make minimal changes in order to get to a ‘game loop’ where we check for the condition isGameOver() in every loop, and a setupGame() function to call in order to restart :slight_smile:

3

Awesome, thank you so much for your help, that is what I want! Do you know how could make the questions placed in different locations, and the answers are different, rather than the red color circle always showing on the interface.

4

Currently, you have hard coded the location of the red square in your collision checker. What you probably want now is to make a general square <-> ball collision detection function, that takes in the square & the ball, and outputs whether the ball is colliding with the square or not! :slight_smile:

something like the following (note: this is untested code & the parameters square and ball are hypothetical objects), I’m not sure if you’ve looked into classes yet, but if you have, then square and ball can be thought of as classes with properties such as ‘width, height, x and y’:

function isCollision(square, ball) {
    if (
        ball.x > square.x && ball.x < square.x + square.width &&
        ball.y > square.y && ball.y < square.y + square.height
    ) {
        return true;
    }
    return false
}

this way, regardless of how many squares & where the squares are located, you can check if the ball is placed inside it or not.

5

Thanks a lot for spending your time on it. Yes, I like to make the “questions” and “answers” appear randomly when the game is continuing. And I like to put the image(png) as the sources of questions and answers, rather than draw the circle and square with colors.

6

If you post your question to multiple sites, please link between crossposts.

This question has also been asked (and answered) here.

7

Thanks for your reminding. The question has some problems going.