Cyberpunk Shooter

Okay, let's create a simple p5.js shooter game with a cyberpunk neon theme. Cyberpunk Shooter html, body { margin: 0; padding: 0; overflow: hidden; /* Prevent scrollbars */ background-color: #0a0a1a; /* Dark blue/purple background */ display: flex; justify-content: center; align-items: center; height: 100vh; } canvas { display: block; box-shadow: 0 0 20px #0ff, 0 0 30px #0ff; /* Neon cyan glow */ } let player; let bullets = []; let enemies = []; let score = 0; let spawnRate = 60; // Lower is faster spawning let lastSpawn = -spawnRate; let gameOver = false; // --- Player Class --- class Player { constructor() { this.x = width / 2; this.y = height - 50; this.size = 30; this.color = color(0, 255, 255); // Neon Cyan this.speed = 5; } display() { fill(this.color); noStroke(); // Simple triangle shape push(); // Isolate transformations translate(this.x, this.y); triangle( 0, -this.size / 2, -this.size / 2, this.size / 2, this.size / 2, this.size / 2 ); pop(); // Restore previous transformations } move() { if (keyIsDown(LEFT_ARROW) || keyIsDown(65)) { // A key this.x -= this.speed; } if (keyIsDown(RIGHT_ARROW) || keyIsDown(68)) { // D key this.x += this.speed; } // Constrain player within canvas bounds this.x = constrain(this.x, this.size / 2, width - this.size / 2); } shoot() { bullets.push(new Bullet(this.x, this.y - this.size / 2)); } } // --- Bullet Class --- class Bullet { constructor(x, y) { this.x = x; this.y = y; this.size = 8; this.speed = 7; this.color = color(255, 255, 0); // Neon Yellow } display() { fill(this.color); noStroke(); ellipse(this.x, this.y, this.size, this.size * 1.5); // Slightly elongated } update() { this.y -= this.speed; } isOffScreen() { return this.y < 0; } hits(enemy) { let d = dist(this.x, this.y, enemy.x, enemy.y); return d < (this.size / 2 + enemy.size / 2); } } // --- Enemy Class --- class Enemy { constructor(x, y) { this.x = x; this.y = y; this.size = 25 + random(-5, 5); // Vary size slightly this.speed = random(1, 3); this.color = color(255, 0, 100); // Neon Magenta/Red } display() { fill(this.color); noStroke(); // Simple square shape rectMode(CENTER); rect(this.x, this.y, this.size, this.size); } update() { this.y += this.speed; } isOffScreen() { return this.y > height + this.size / 2; } hitsPlayer(player) { let d = dist(this.x, this.y, player.x, player.y); // Approximate collision check (adjust tolerance as needed) return d < (this.size / 2 + player.size / 2) * 0.8; } } // --- p5.js Functions --- function setup() { createCanvas(windowWidth * 0.8, windowHeight * 0.8); // Use most of the window player = new Player(); textFont('monospace'); // Font that fits the theme } function draw() { background(10, 10, 26, 180); // Dark background with some transparency for trails if (gameOver) { displayGameOver(); return; // Stop game loop } // --- Spawning Enemies --- if (frameCount - lastSpawn > spawnRate) { enemies.push(new Enemy(random(width), -30)); lastSpawn = frameCount; if (spawnRate > 15) { // Gradually increase spawn rate spawnRate *= 0.99; } } // --- Player Logic --- player.display(); player.move(); // --- Bullet Logic --- for (let i = bullets.length - 1; i >= 0; i--) { bullets[i].display(); bullets[i].update(); // Check for collision with enemies for (let j = enemies.length - 1; j >= 0; j--) { if (bullets[i].hits(enemies[j])) { score += 10; // Increase score enemies.splice(j, 1); // Remove enemy bullets.splice(i, 1); // Remove bullet break; // Exit inner loop since bullet is gone } } // Remove bullets that go off-screen (check after potential splice) if (bullets[i] && bullets[i].isOffScreen()) { bullets.splice(i, 1); } } // --- Enemy Logic --- for (let i = enemies.length - 1; i >= 0; i--) { enemies[i].display(); enemies[i].update(); // Check for collision with player if (enemies[i].hitsPlayer(player)) { gameOver = true; } // Remove enemies that go off-screen if (enemies[i].isOffScreen()) { enemies.splice(i, 1); } } // --- Display Score --- displayScore(); } function keyPressed() { if (!gameOver && (keyCode === 32 || keyCode === UP_ARROW || key === 'w' || key === 'W')) { // Spacebar or Up Arrow or W player.shoot(); } if (gameOver && keyCode === ENTER) { resetGame(); } } // Allow continuous shooting while holding space/up/W function keyReleased() { // Optional: Add logic here if needed, e.g., stop shooting sound } function displayScore() { fill(0, 255, 100); // Neon Green textSize(24); textAlign(LEFT, TOP); text(`SCORE: ${score}`, 20, 20); } function displayGameOver() { fill(255, 0, 0, 200); // Semi-transparent Red rectMode(CENTER); rect(width / 2, height / 2, width * 0.6, height * 0.4, 10); // Rounded corners fill(255); // White text textSize(48); textAlign(CENTER, CENTER); text("GAME OVER", width / 2, height / 2 - 40); textSize(24); text(`Final Score: ${score}`, width / 2, height / 2 + 20); textSize(18); text("Press ENTER to Restart", width / 2, height / 2 + 70); } function resetGame() { score = 0; bullets = []; enemies = []; spawnRate = 60; lastSpawn = -spawnRate; player = new Player(); // Recreate player at start position gameOver = false; loop(); // Restart draw loop if it was stopped } // Adjust canvas size if window is resized function windowResized() { resizeCanvas(windowWidth * 0.8, windowHeight * 0.8); player.y = height - 50; // Keep player near bottom after resize } This sets up a basic shooter: * **Player:** A neon cyan triangle controlled by Arrow Keys or A/D. * **Shooting:** Press Spacebar, Up Arrow, or W to shoot neon yellow bullets. * **Enemies:** Neon magenta/red squares spawn from the top and move down. * **Collisions:** Bullets destroy enemies, increasing your score. Enemies hitting the player ends the game. * **Scoring:** Displayed in the top-left corner. * **Game Over:** Screen appears when an enemy hits the player. Press Enter to restart. * **Theme:** Dark background, neon colors, and a slight glow effect on the canvas via CSS. You can now run this. Use the arrow keys (or A/D) to move and Space/Up/W to shoot.