xxxxxxxxxx
287
let gameState = 'start';
let circleX = 200;
let obstacles = [];
let xPositions = [];
let obstacleSpeed = 1; // Initial speed of obstacles
let speedIncrement = 0.4;
let score = 0;
let wonGame = false;
let startimage;
// A sketch that resizes itself to fill the window
// Mangtronix - 2020-09-30
// MIT License
let help = "Press f (possibly twice) to toggle fullscreen";
function preload() {
startimage = loadImage('images/startimage.png');
grass = loadImage('images/grass.png');
playimage = loadImage('images/playimage.png');
endimage = loadImage('images/endimage.png');
horse = loadImage('images/horse.png');
obstacle_1 = loadImage('images/obstacle_1.png');
}
function setup() {
createCanvas(windowWidth, windowHeight);
restartGame();
print(help);
xPositions = [windowWidth * (3 / 12), windowWidth * (5 / 12), windowWidth * (7 / 12), windowWidth * (9 / 12)];
}
function restartGame() {
// Reset character position, lives, etc
wonGame = false;
gameState = 'start';
circleX = 200; // Reset circle position if needed
obstacles = []; // Clear the obstacles array
score = 0; // Reset the score
obstacleSpeed = 1;
}
function draw() {
background(220);
if (gameState == 'start') {
drawInstructions();
} else if (gameState == 'playing') {
drawGame();
} else if (gameState == 'end') {
drawEndScreen();
}
}
function drawInstructions() {
//print('drawing instructions');
background(255); // white
textSize(20);
startimage.resize(windowWidth, windowHeight);
image(startimage, 0, 0);
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);}
// } else {
// text("Connected", 20, 30);
// }
}
function drawGame() {
background('#FFFFFF');
// grass.resize(windowWidth, windowHeight);
// image(grass, 0, 0);
playimage.resize(windowWidth, windowHeight);
image(playimage, 0, 0);
// fill('#bae1ff');
// rect(windowWidth*(2/12), 0, windowWidth*(2/12), windowHeight);
// fill('#ffb3ba');
// rect(windowWidth*(4/12), 0, windowWidth*(2/12), windowHeight);
// fill('#ffffba');
// rect(windowWidth*(6/12), 0, windowWidth*(2/12), windowHeight);
// fill('#baffc9');
// rect(windowWidth*(8/12), 0, windowWidth*(2/12), windowHeight);
// let border = 30;
// background('#009bb4');
// // A rectangle
// fill('#f39100');
// noStroke();
// rect(border, border, windowWidth - 2 * border, windowHeight - 2 * border);
fill(0);
let circleRadius = min(windowWidth, windowHeight) * 0.04; // Adjust the proportion as needed
// ellipse(circleX, windowHeight * (2 / 3), circleRadius * 2, circleRadius * 2);
image(horse, circleX - circleRadius, windowHeight * (2 / 3) - circleRadius, circleRadius * 2, circleRadius * 3);
// ellipse(circleX, windowHeight*(2/3), 50, 50);
// Use the received distance value to control the size of the ellipse
// let ellipseSize = map(distance, 0, 100, 10, 200); // Map the distance to ellipse size
// Create obstacles randomly
if (frameCount % 40 === 0) {
let randomIndex = floor(random(xPositions.length));
let randomX = xPositions[randomIndex];
let obstacle = new Obstacle(randomX);
obstacles.push(obstacle);
}
if (frameCount % 4000 === 0) {
obstacleSpeed += speedIncrement; // Increase the speed
}
// Update and display obstacles
for (let i = obstacles.length - 1; i >= 0; i--) {
obstacles[i].speed = obstacleSpeed; // Update obstacle speed
obstacles[i].update();
obstacles[i].display();
// Update and display obstacles
for (let i = obstacles.length - 1; i >= 0; i--) {
obstacles[i].update();
obstacles[i].display();
// Remove obstacles when they reach the bottom of the screen
if (obstacles[i].offScreen()) {
obstacles.splice(i, 1);
}
}
for (let i = 0; i < obstacles.length; i++) {
let obstacle = obstacles[i];
let distance = dist(circleX, windowHeight * (2 / 3), obstacle.x, obstacle.y);
// let minDistance = 25 + obstacle.radius; // Radius of the circle + radius of the player
let minDistance = obstacle.radius + (circleRadius / 2);
if (distance < minDistance) {
// gameOver();
// return; // End the draw loop
// Lost the game!
wonGame = false;
// Change to end game state
gameState = 'end';
} else if (obstacle.y > windowHeight && !obstacle.passed) {
obstacle.passed = true; // Flag the obstacle as passed
score++; // Increment the score when an obstacle is successfully avoided
}
}
rect(windowWidth*0.04, windowHeight*0.01, textSize(`Score: ${score}`)+windowWidth*0.1, windowHeight*0.05);
fill(0);
textSize(30);
textStyle(BOLD);
text(`Score: ${score}`, windowWidth*0.05, windowHeight*0.05);
}
}
function keyPressed() {
if (key == " ") {
// important to have in order to start the serial connection!!
setUpSerial();
}
if (keyCode === ENTER) {
if (gameState == 'start') {
// Start the game
gameState = 'playing';
} else if (gameState == 'playing') {
// Magically win game on space bar
if (key == ' ') {
// Won game!
wonGame = true;
gameState = 'end';
}
} else if (gameState == 'end') {
restartGame();
}
}
}
function drawEndScreen() {
if (wonGame) {
background('blue');
text('You WON!!', 100, 200);
} else {
endimage.resize(windowWidth, windowHeight);
image(endimage, 0, 0);
textSize(150);
textAlign(CENTER, CENTER);
textStyle(BOLD);
fill('#012495');
text(`${score}`, windowWidth*0.8, windowHeight*0.65);
}
}
// This function will be called by the web-serial library
// with each new *line* of data. The serial library reads
// the data until the newline and then gives it to us through
// this callback function
function readSerial(data) {
////////////////////////////////////
//READ FROM ARDUINO HERE
////////////////////////////////////
if (data != null) {
// make sure there is actually a message
// split the message
let fromArduino = split(trim(data), ",");
// if the right length, then proceed
if (fromArduino.length == 1) {
// only store values here
// do everything with those values in the main draw loop
if (data === '1') {
circleX = windowWidth*(3/12); // Change circle position if '1' is received
} else if (data === '2') {
circleX = windowWidth*(5/12); // Change circle position if '2' is received
} else if (data === '3') {
circleX = windowWidth*(7/12); // Change circle position if '3' is received
} else if (data === '4') {
circleX = windowWidth*(9/12); // Change circle position if '4' is received
}
}
//////////////////////////////////
//SEND TO ARDUINO HERE (handshake)
//////////////////////////////////
let sendToArduino = circleX + "\n";
writeSerial(sendToArduino);
}
}
class Obstacle {
constructor(x) {
this.x = x;
this.y = 0;
this.speed = obstacleSpeed; // Adjust speed as needed
// this.radius = 20; // Radius of the circle
this.radius = min(windowWidth, windowHeight) * 0.03;
}
update() {
this.y += this.speed;
}
display() {
fill(255, 0, 0);
// ellipse(this.x, this.y, this.radius * 2, this.radius * 2);
image(obstacle_1, this.x, this.y, this.radius * 2.5, this.radius * 2.5);
}
offScreen() {
return this.y > windowHeight + this.radius; // Consider the radius for off-screen detection
}
}
// function gameOver() {
// noLoop(); // Stop the draw loop
// textSize(32);
// textAlign(CENTER, CENTER);
// fill(255, 0, 0);
// text("Game Over", windowWidth / 2, windowHeight / 2); // Display Game Over message
// }
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
xPositions = [windowWidth * (3 / 12), windowWidth * (5 / 12), windowWidth * (7 / 12), windowWidth * (9 / 12)];
}
function keyTyped() {
// $$$ For some reason on Chrome/Mac you may have to press f twice to toggle. Works correctly on Firefox/Mac
if (key === 'f') {
toggleFullscreen();
}
// uncomment to prevent any default behavior
// return false;
}
// Toggle fullscreen state. Must be called in response
// to a user event (i.e. keyboard, mouse click)
function toggleFullscreen() {
let fs = fullscreen(); // Get the current state
fullscreen(!fs); // Flip it!
}