xxxxxxxxxx350
// Declare global variables for the game, players, arena, and itemlet game;let player1, player2;let arena;let item;function setup() { createCanvas(800, 600); // Create a canvas of 800x600 pixels game = new Game(); // Initialize the game object player1 = new Player(200, 300, 'red', 1, 1); // Create player 1 at (200, 300) with red color and mass 1 player2 = new Player(600, 300, 'blue', 2, 1); // Create player 2 at (600, 300) with blue color and mass 1 arena = new Arena(400, 300, 250); // Create the arena at the center with radius 250 item = null; // Initialize item as null (no item at start)}function draw() { background(220); // Set the background color if (game.state === 'start') { game.showStartScreen(); // Show the start screen } else if (game.state === 'instructions') { game.showInstructions(); // Show the instructions screen } else if (game.state === 'play') { arena.display(); // Display the arena player1.update(); // Update player 1's position player2.update(); // Update player 2's position // Handle collision between players if (player1.collidesWith(player2)) { player1.bounce(player2); // Handle collision between players with bouncing } // Handle players falling out of the arena if (!arena.contains(player1)) { player2.roundScore++; // Increase player 2's score player1.reset(); // Reset player 1's position } if (!arena.contains(player2)) { player1.roundScore++; // Increase player 1's score player2.reset(); // Reset player 2's position } player1.display(); // Display player 1 player2.display(); // Display player 2 // Item logic if (item) { item.display(); // Display the item if it exists if (item.collidesWith(player1)) { item.applyEffect(player1); // Apply item effect to player 1 item = null; // Remove the item after collision } else if (item.collidesWith(player2)) { item.applyEffect(player2); // Apply item effect to player 2 item = null; // Remove the item after collision } } // Generate a new item every 3 seconds (180 frames) if (frameCount % 180 === 0) { let angle = random(TWO_PI); // Random angle let radius = random(arena.radius - 10); // Random radius, staying within arena bounds let x = arena.x + cos(angle) * radius; let y = arena.y + sin(angle) * radius; item = new Item(x, y); // Generate the item within the arena } game.checkWinCondition(); // Check if any player has won game.displayScores(); // Display the scores game.displayCoins(); // Display the coin counts } else if (game.state === 'end') { game.showEndScreen(); // Show the end screen }}// Handle key press eventsfunction keyPressed() { // Player 1 controls (arrow keys) if (keyCode === LEFT_ARROW) player1.moveLeft = true; if (keyCode === RIGHT_ARROW) player1.moveRight = true; if (keyCode === UP_ARROW) player1.moveUp = true; if (keyCode === DOWN_ARROW) player1.moveDown = true; // Player 2 controls (WASD keys) if (key === 'A' || key === 'a') player2.moveLeft = true; if (key === 'D' || key === 'd') player2.moveRight = true; if (key === 'W' || key === 'w') player2.moveUp = true; if (key === 'S' || key === 's') player2.moveDown = true;}// Handle key release eventsfunction keyReleased() { // Player 1 controls (arrow keys) if (keyCode === LEFT_ARROW) player1.moveLeft = false; if (keyCode === RIGHT_ARROW) player1.moveRight = false; if (keyCode === UP_ARROW) player1.moveUp = false; if (keyCode === DOWN_ARROW) player1.moveDown = false; // Player 2 controls (WASD keys) if (key === 'A' || key === 'a') player2.moveLeft = false; if (key === 'D' || key === 'd') player2.moveRight = false; if (key === 'W' || key === 'w') player2.moveUp = false; if (key === 'S' || key === 's') player2.moveDown = false;}// Game class to manage game states and screensclass Game { constructor() { this.state = 'start'; // Initial game state this.playButton = null; // Play button this.instructionsButton = null; // Instructions button this.backButton = null; // Back button } createButtons() { this.playButton = createButton('Play'); // Create play button this.playButton.position(width / 2 - 100, height / 2); // Position play button this.playButton.mousePressed(() => this.startGame()); // Set play button click event this.instructionsButton = createButton('Instructions'); // Create instructions button this.instructionsButton.position(width / 2 + 20, height / 2); // Position instructions button this.instructionsButton.mousePressed(() => this.showInstructions()); // Set instructions button click event } hideButtons() { if (this.playButton) this.playButton.hide(); // Hide play button if (this.instructionsButton) this.instructionsButton.hide(); // Hide instructions button if (this.backButton) this.backButton.hide(); // Hide back button } showButtons() { if (this.playButton) this.playButton.show(); // Show play button if (this.instructionsButton) this.instructionsButton.show(); // Show instructions button } startGame() { this.state = 'play'; // Set game state to play this.hideButtons(); // Hide buttons } showStartScreen() { background(220); // Set background color textAlign(CENTER); // Align text to center textSize(32); // Set text size text('Welcome to the Game!', width / 2, height / 4); if (!this.playButton) { this.createButtons(); // Create buttons if they don't exist } else { this.showButtons(); // Show buttons if they exist } } showInstructions() { this.state = 'instructions'; // Set game state to instructions this.hideButtons(); // Hide main menu buttons background(220); textAlign(CENTER); textSize(24); text('Instructions:', width / 2, height / 4); text('Player 1: Use WASD keys to move', width / 2, height / 4 + 40); text('Player 2: Use Arrow keys to move', width / 2, height / 4 + 80); text('Collect 3 coins or push the opponent out 3 times to win!', width / 2, height / 4 + 120); if (!this.backButton) { this.backButton = createButton('Back'); // Create back button if it doesn't exist this.backButton.position(width / 2 - 50, height * 2 / 3); // Position back button this.backButton.mousePressed(() => this.backToStart()); // Set back button click event } else { this.backButton.show(); // Show back button if it exists } } checkWinCondition() { // Check if either player has won (3 coins or opponent out of arena) if (player1.roundScore >= 3 || player1.coins >= 3) { this.state = 'end'; // Set game state to end if player 1 wins } else if (player2.roundScore >= 3 || player2.coins >= 3) { this.state = 'end'; // Set game state to end if player 2 wins } } showEndScreen() { background(220); // Set background color textAlign(CENTER); // Align text to center textSize(32); // Set text size text('Game Over', width / 2, height / 2); // Display game over text text('Click to Restart', width / 2, height / 2 + 40); // Display restart instruction } displayScores() { textAlign(RIGHT); // Align text to right textSize(24); // Set text size fill(0); // Set text color to black text(`Player 1: ${player1.roundScore} `, width - 20, 30); // Display player 1 score text(`Player 2: ${player2.roundScore} `, width - 20, 60); // Display player 2 score } displayCoins() { textAlign(LEFT); // Align text to left textSize(24); // Set text size fill(0); // Set text color to black text(`Player 1 Coins: ${player1.coins}`, 20, 30); // Display player 1 coin count text(`Player 2 Coins: ${player2.coins}`, 20, 60); // Display player 2 coin count } reset() { this.state = 'start'; // Set game state to start this.hideButtons(); // Hide all buttons player1.reset(); // Reset player 1 player2.reset(); // Reset player 2 item = null; // Remove any existing item }}// Player class to manage player properties and movementclass Player { constructor(x, y, color, num, mass) { this.x = x; // X position this.y = y; // Y position this.color = color; // Player color this.num = num; // Player number this.radius = 20; // Player radius this.speed = 5; // Player speed this.coins = 0; // Coin count this.vx = 0; // X velocity this.vy = 0; // Y velocity this.roundScore = 0; // Round score this.mass = mass; // Player mass } update() { let moveX = (this.moveRight ? 1 : 0) - (this.moveLeft ? 1 : 0); let moveY = (this.moveDown ? 1 : 0) - (this.moveUp ? 1 : 0); this.vx = moveX * this.speed; this.vy = moveY * this.speed; this.x += this.vx; this.y += this.vy; // Apply friction to slow down the players when no key is pressed this.vx *= 0.95; this.vy *= 0.95; } collidesWith(other) { let dx = this.x - other.x; // Calculate X distance let dy = this.y - other.y; // Calculate Y distance let distance = Math.sqrt(dx * dx + dy * dy); // Calculate total distance return distance < this.radius + other.radius; // Check if collision occurred } bounce(other) { let dx = other.x - this.x; let dy = other.y - this.y; let dvx = other.vx - this.vx; let dvy = other.vy - this.vy; let impactDist = this.radius + other.radius; let impx = dx / impactDist; let impy = dy / impactDist; let impvx1 = this.vx * impx + this.vy * impy; let impvx2 = other.vx * impx + other.vy * impy; let tempv1 = (impvx1 * (this.mass - other.mass) + 2 * other.mass * impvx2) / (this.mass + other.mass); let tempv2 = (impvx2 * (other.mass - this.mass) + 2 * this.mass * impvx1) / (this.mass + other.mass); // Update velocities based on the impact this.vx += (tempv1 - impvx1) * impx; this.vy += (tempv1 - impvx1) * impy; other.vx += (tempv2 - impvx2) * impx; other.vy += (tempv2 - impvx2) * impy; } display() { fill(this.color); // Set fill color to player color ellipse(this.x, this.y, this.radius * 2); // Draw player as circle } reset() { this.coins = 0; // Reset coin count this.roundScore = 0; // Reset round score if (this.num === 1) { this.x = 200; // Reset player 1 X position } else { this.x = 600; // Reset player 2 X position } this.y = 300; // Reset Y position for both players this.vx = 0; // Reset X velocity this.vy = 0; // Reset Y velocity }}// Arena class to manage the game arenaclass Arena { constructor(x, y, radius) { this.x = x; // X position of arena center this.y = y; // Y position of arena center this.radius = radius; // Radius of arena } display() { noFill(); // Set no fill for arena stroke(0); // Set stroke color to black ellipse(this.x, this.y, this.radius * 2); // Draw arena as circle } contains(player) { let d = dist(this.x, this.y, player.x, player.y); // Calculate distance from arena center to player return d <= this.radius - player.radius; // Return true if inside, false if outside }}// Item class to manage collectible itemsclass Item { constructor(x, y) { this.x = x; this.y = y; this.radius = 10; } display() { fill('yellow'); ellipse(this.x, this.y, this.radius * 2); } collidesWith(player) { // Check if the item collides with a player let d = dist(this.x, this.y, player.x, player.y); return d < this.radius + player.radius; } applyEffect(player) { player.coins++; // Increase the player's coin count }}function mousePressed() { if (game.state === 'start') { game.startGame(); } else if (game.state === 'end') { game.reset(); }}function exitGame() { game.state = 'start'; game.hideButtons(); game.showStartScreen(); player1.reset(); player2.reset(); item = null;}