Best Slime Game Ever

Best Slime Game Ever

60

0 : 0

Controls

Blue Slime: W/A/S/D = Move
Red Slime: Arrow Keys = Move

body { background: #222; color: #fff; font-family: 'Segoe UI', Arial, sans-serif; text-align: center; margin: 0; padding: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } h1 { margin-top: 0; font-size: 2.5em; letter-spacing: 2px; margin-bottom: 0; } #timer { font-size: 1.5em; margin-bottom: 10px; letter-spacing: 2px; font-weight: bold; color: #aaa; } #gameCanvas { background: linear-gradient(to top, #4ecdc4 60%, #fff 100%); border: 4px solid #333; border-radius: 16px; margin: 20px auto; display: block; box-shadow: 0 8px 32px #0008; } #scoreboard { font-size: 2em; margin: 10px 0 20px 0; font-weight: bold; letter-spacing: 4px; } #controls { margin: 20px auto; width: 400px; background: #333a; border-radius: 8px; padding: 10px 0; font-size: 1.1em; } #endGameButton { position: absolute; top: 10px; right: 10px; background-color: #e74c3c; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 1em; } #endGameButton:hover { background-color: #c0392b; } .menu { position: fixed; /* Changed to fixed for full screen menu */ top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #222; /* Match body background */ } .menu .menu-content { background-color: #34495e; padding: 40px 60px; /* Increased padding for better look */ border-radius: 15px; /* More rounded corners */ box-shadow: 0 0 30px rgba(0, 0, 0, 0.9); /* Stronger shadow */ text-align: center; } .menu h2 { margin-top: 0; font-size: 3em; /* Larger title */ margin-bottom: 10px; } .menu .tagline { font-size: 1.4em; color: #eee; margin-bottom: 30px; } .menu p { font-size: 1.2em; margin-bottom: 20px; } .menu button { background-color: #4CAF50; color: white; border: none; padding: 18px 30px; /* Larger button */ text-align: center; text-decoration: none; display: inline-block; font-size: 1.5em; /* Larger font size for button */ margin: 4px 2px; cursor: pointer; border-radius: 10px; /* More rounded button corners */ transition: background-color 0.3s ease; /* Smooth transition for hover effect */ } .menu button:hover { background-color: #45a049; } .hidden { display: none !important; } @media (max-width: 850px) { .menu .menu-content { padding: 30px 40px; /* Adjust padding for smaller screens */ } .menu h2 { font-size: 2.5em; /* Adjust title size for smaller screens */ } .menu .tagline { font-size: 1.2em; /* Adjust tagline size for smaller screens */ } .menu button { padding: 14px 24px; /* Adjust button padding for smaller screens */ font-size: 1.3em; /* Adjust button font size for smaller screens */ } #gameCanvas { width: 98vw !important; height: 50vw !important; max-width: 100vw; max-height: 60vw; } #controls { width: 90vw; } } import { Game } from './slimeGame.js'; const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreLeft = document.getElementById('scoreLeft'); const scoreRight = document.getElementById('scoreRight'); const timerDisplay = document.getElementById('timer'); const gameMenu = document.getElementById('gameMenu'); const endGameButton = document.getElementById('endGameButton'); const playAgainButton = document.getElementById('playAgainButton'); const gameResultText = document.getElementById('gameResult'); const mainMenu = document.getElementById('mainMenu'); // Main Menu const startButton = document.getElementById('startButton'); // Start Button in Main Menu let game; // Declare game outside to access in event listeners function startGame() { mainMenu.classList.add('hidden'); // Hide main menu gameMenu.classList.add('hidden'); // Ensure game over menu is hidden if (!game) { game = new Game(canvas.width, canvas.height, (left, right) => { scoreLeft.textContent = left; scoreRight.textContent = right; }, timerDisplay, (resultText) => { // Callback for game end gameResultText.textContent = resultText; gameMenu.classList.remove('hidden'); // Show game over menu on game over }); } else { game.reset(); // Reset game if it already exists } game.menuActive = false; // Game is active, menu is not } function loop() { if (game && !game.menuActive && !mainMenu.classList.contains('hidden')) { mainMenu.classList.remove('hidden'); // Show main menu at start gameMenu.classList.add('hidden'); // Hide game over menu at start return; // Do not run game loop if main menu is active } if (game && !game.menuActive) { // Only update and draw if game is active and menu is not shown game.update(); game.draw(ctx); } requestAnimationFrame(loop); } loop(); // Start loop, menu will be shown initially startButton.addEventListener('click', () => { // Event listener for Play button startGame(); }); window.addEventListener('keydown', (e) => { if (game && !game.menuActive && mainMenu.classList.contains('hidden')) { // Only handle keys if game is active, menu is not shown and main menu is hidden game.handleKey(e.code, true); } }); window.addEventListener('keyup', (e) => { if (game && !game.menuActive && mainMenu.classList.contains('hidden')) { // Only handle keys if game is active, menu is not shown and main menu is hidden game.handleKey(e.code, false); } }); endGameButton.addEventListener('click', () => { if (game && !game.gameOver) { game.showMenu(); // Show game over menu manually } }); playAgainButton.addEventListener('click', () => { startGame(); // Restart the game }); // Slime Game core logic const GROUND_Y = 340; const GRAVITY = 0.7; const JUMP_VEL = -13; const SLIME_RADIUS = 40; const SLIME_SPEED = 5; const BALL_RADIUS = 18; const NET_HEIGHT = 80; const NET_WIDTH = 8; const COURT_MARGIN = 20; const MAX_SCORE = 7; const ROUND_TIME = 60; // seconds const MAX_ROUNDS = 6; // Total number of rounds export class Game { constructor(width, height, onScore, timerDisplay, onGameOver) { this.width = width; this.height = height; this.onScore = onScore; this.timerDisplay = timerDisplay; this.onGameOver = onGameOver; // Callback function for game over this.reset(); this.roundCount = 0; this.gameOver = false; this.menuActive = true; // Initially menu is active } reset() { this.scores = [0, 0]; this.roundCount = 0; this.gameOver = false; this.menuActive = true; // Main menu is active on reset this.resetRound(); } showMenu() { this.menuActive = true; this.roundOver = true; // End current round if menu is shown mid-round clearInterval(this.timerInterval); // Stop timer this.drawGameOverScreen(); // Directly draw game over screen } resetRound(scoredBy = null) { if (this.gameOver) return; this.roundCount++; if (this.roundCount > MAX_ROUNDS) { this.gameOver = true; clearInterval(this.timerInterval); this.drawGameOverScreen(); // Draw game over screen directly return; } this.slimes = [ new Slime(COURT_MARGIN + SLIME_RADIUS, GROUND_Y, '#3ad'), new Slime(this.width - COURT_MARGIN - SLIME_RADIUS, GROUND_Y, '#e35') ]; const randomSlimeIndex = Math.random() < 0.5 ? 0 : 1; const slime = this.slimes[randomSlimeIndex]; this.ball = new Ball(slime.x, slime.y - SLIME_RADIUS - 30); this.ball.vx = (Math.random() - 0.5) * 4; this.ball.vy = -2; this.keys = {}; this.net = { x: this.width / 2 - NET_WIDTH / 2, y: GROUND_Y - NET_HEIGHT, w: NET_WIDTH, h: NET_HEIGHT }; this.scoredBy = scoredBy; this.roundOver = false; this.roundOverTimer = 0; this.roundTime = ROUND_TIME; this.updateTimerDisplay(); this.timerInterval = setInterval(() => { this.roundTime--; this.updateTimerDisplay(); if (this.roundTime <= 0) { this.endRoundByTimer(); } }, 1000); } endRoundByTimer() { clearInterval(this.timerInterval); this.roundOver = true; const ballOnLeftSide = this.ball.x < this.width / 2; if (ballOnLeftSide) { this.scores[1]++; this.scoredBy = 1; } else { this.scores[0]++; this.scoredBy = 0; } this.onScore(this.scores[0], this.scores[1]); if (this.scores[0] >= MAX_SCORE || this.scores[1] >= MAX_SCORE) { this.scores = [0, 0]; this.onScore(0, 0); } this.roundOverTimer = 0; } updateTimerDisplay() { if (this.timerDisplay) { this.timerDisplay.textContent = this.roundTime; } } update() { if (this.gameOver || this.menuActive) return; // Stop update if game over or menu active if (this.roundOver) { this.roundOverTimer++; if (this.roundOverTimer > 60) { this.resetRound(); } return; } // Blue Slime: W/A/S/D if (this.keys['KeyA']) this.slimes[0].vx = -SLIME_SPEED; else if (this.keys['KeyD']) this.slimes[0].vx = SLIME_SPEED; else this.slimes[0].vx = 0; if (this.keys['KeyW'] && this.slimes[0].onGround()) { this.slimes[0].vy = JUMP_VEL; } if (this.keys['KeyS'] && !this.slimes[0].onGround()) { this.slimes[0].vy += 1.2; } // Red Slime: Arrow Keys if (this.keys['ArrowLeft']) this.slimes[1].vx = -SLIME_SPEED; else if (this.keys['ArrowRight']) this.slimes[1].vx = SLIME_SPEED; else this.slimes[1].vx = 0; if (this.keys['ArrowUp'] && this.slimes[1].onGround()) { this.slimes[1].vy = JUMP_VEL; } if (this.keys['ArrowDown'] && !this.slimes[1].onGround()) { this.slimes[1].vy += 1.2; } // Update slimes for (let i = 0; i < 2; ++i) { this.slimes[i].update(this.width, GROUND_Y, i === 0 ? 0 : this.width / 2 + NET_WIDTH / 2, i === 0 ? this.width / 2 - NET_WIDTH / 2 : this.width); } // Update ball this.ball.update(this.width, GROUND_Y); // Ball/net collision if ( this.ball.x + BALL_RADIUS > this.net.x && this.ball.x - BALL_RADIUS < this.net.x + this.net.w && this.ball.y + BALL_RADIUS > this.net.y && this.ball.y - BALL_RADIUS < this.net.y + this.net.h ) { const overlapX = Math.min(this.ball.x + BALL_RADIUS - this.net.x, this.net.x + this.net.w - (this.ball.x - BALL_RADIUS)); const overlapY = Math.min(this.ball.y + BALL_RADIUS - this.net.y, this.net.y + this.net.h - (this.ball.y - BALL_RADIUS)); if (overlapX < overlapY) { if (this.ball.x < this.net.x + this.net.w / 2) { this.ball.x = this.net.x - BALL_RADIUS; } else { this.ball.x = this.net.x + this.net.w + BALL_RADIUS; } this.ball.vx *= -0.7; } else { if (this.ball.y < this.net.y + this.net.h / 2) { this.ball.y = this.net.y - BALL_RADIUS; } else { this.ball.y = this.net.y + this.net.h + BALL_RADIUS; } this.ball.vy *= -0.7; } } // Ball/slime collision for (let i = 0; i < 2; ++i) { const slime = this.slimes[i]; const dx = this.ball.x - slime.x; const dy = this.ball.y - (slime.y - SLIME_RADIUS / 2); const dist = Math.sqrt(dx * dx + dy * dy); if (dist < SLIME_RADIUS + BALL_RADIUS - 4) { const angle = Math.atan2(dy, dx); const tx = slime.x + Math.cos(angle) * (SLIME_RADIUS + BALL_RADIUS); const ty = (slime.y - SLIME_RADIUS / 2) + Math.sin(angle) * (SLIME_RADIUS + BALL_RADIUS); this.ball.x = tx; this.ball.y = ty; const relvx = this.ball.vx - slime.vx; const relvy = this.ball.vy - slime.vy; const dot = relvx * Math.cos(angle) + relvy * Math.sin(angle); if (dot < 0) { this.ball.vx -= Math.cos(angle) * dot * 1.5; this.ball.vy -= Math.sin(angle) * dot * 1.5; } this.ball.vx += slime.vx * 0.2; this.ball.vy += slime.vy * 0.2; } } // Score check if (this.ball.y + BALL_RADIUS > GROUND_Y + 2) { if (this.ball.x < this.width / 2) { this.scores[1]++; this.onScore(this.scores[0], this.scores[1]); this.roundOver = true; this.scoredBy = 1; } else { this.scores[0]++; this.onScore(this.scores[0], this.scores[1]); this.roundOver = true; this.scoredBy = 0; } if (this.scores[0] >= MAX_SCORE || this.scores[1] >= MAX_SCORE || this.roundCount >= MAX_ROUNDS) { this.gameOver = true; this.drawGameOverScreen(); // Draw game over screen when game ends by score or rounds } } } drawGameOverScreen() { this.menuActive = true; // Set menu active when game over screen is drawn let winnerText = ''; if (this.scores[0] > this.scores[1]) { winnerText = 'Blue Wins!'; } else if (this.scores[1] > this.scores[0]) { winnerText = 'Red Wins!'; } else { winnerText = 'Tie Game!'; } this.onGameOver(winnerText); // Use callback to set game result text and show menu } draw(ctx) { if (this.menuActive) return; // Do not draw game if menu is active ctx.clearRect(0, 0, this.width, this.height); ctx.fillStyle = '#3c763d'; ctx.fillRect(0, GROUND_Y, this.width, this.height - GROUND_Y); ctx.fillStyle = '#fff'; ctx.fillRect(this.net.x, this.net.y, this.net.w, this.net.h); ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(this.width / 2, GROUND_Y); ctx.lineTo(this.width / 2, this.height); ctx.stroke(); for (let i = 0; i < 2; ++i) { this.slimes[i].draw(ctx); } this.ball.draw(ctx); if (this.roundOver) { ctx.save(); ctx.globalAlpha = 0.8; ctx.fillStyle = '#000'; ctx.fillRect(0, 0, this.width, this.height); ctx.globalAlpha = 1; ctx.fillStyle = '#fff'; ctx.font = 'bold 48px Arial'; ctx.textAlign = 'center'; if (!this.gameOver) { // Round Over, but not Game Over if (this.scoredBy === 0) { ctx.fillText('Blue Scores!', this.width / 2, this.height / 2); } else if (this.scoredBy === 1) { ctx.fillText('Red Scores!', this.width / 2, this.height / 2); } else if (this.scoredBy === -1) { const ballOnLeftSide = this.ball.x < this.width / 2; const scoredPlayer = ballOnLeftSide ? 'Red' : 'Blue'; ctx.fillText(`${scoredPlayer} Scores! (Time Out)`, this.width / 2, this.height / 2); } ctx.font = '24px Arial'; ctx.fillText('Next round...', this.width / 2, this.height / 2 + 40); } ctx.restore(); } } handleKey(code, pressed) { if (!this.menuActive) { // Only handle keys if menu is not active this.keys[code] = pressed; } } } class Slime { constructor(x, y, color) { this.x = x; this.y = y; this.vx = 0; this.vy = 0; this.color = color; } update(width, groundY, minX, maxX) { this.x += this.vx; this.y += this.vy; if (this.y < groundY) { this.vy += GRAVITY; } else { this.y = groundY; this.vy = 0; } if (this.x < minX + SLIME_RADIUS) this.x = minX + SLIME_RADIUS; if (this.x > maxX - SLIME_RADIUS) this.x = maxX - SLIME_RADIUS; } onGround() { return this.y >= GROUND_Y; } draw(ctx) { // Body (semicircle) ctx.save(); ctx.beginPath(); ctx.arc(this.x, this.y, SLIME_RADIUS, Math.PI, 0, false); ctx.closePath(); ctx.fillStyle = this.color; ctx.shadowColor = '#000'; ctx.shadowBlur = 10; ctx.fill(); ctx.shadowBlur = 0; // Eye ctx.beginPath(); ctx.arc(this.x - 15, this.y - 20, 8, 0, 2 * Math.PI); ctx.arc(this.x + 15, this.y - 20, 8, 0, 2 * Math.PI); ctx.fillStyle = '#fff'; ctx.fill(); // Pupils ctx.beginPath(); ctx.arc(this.x - 15, this.y - 20, 3, 0, 2 * Math.PI); ctx.arc(this.x + 15, this.y - 20, 3, 0, 2 * Math.PI); ctx.fillStyle = '#222'; ctx.fill(); // Smile ctx.beginPath(); ctx.arc(this.x, this.y - 5, 18, 0.15 * Math.PI, 0.85 * Math.PI, false); ctx.lineWidth = 3; ctx.strokeStyle = '#222'; ctx.stroke(); ctx.restore(); } } class Ball { constructor(x, y) { this.x = x; this.y = y; this.vx = (Math.random() - 0.5) * 8; this.vy = -6; } update(width, groundY) { this.x += this.vx; this.y += this.vy; // Gravity this.vy += GRAVITY; // Wall bounce if (this.x < BALL_RADIUS) { this.x = BALL_RADIUS; this.vx *= -1; } if (this.x > width - BALL_RADIUS) { this.x = width - BALL_RADIUS; this.vx *= -1; } // Ceiling if (this.y < BALL_RADIUS) { this.y = BALL_RADIUS; this.vy *= -0.7; } // Ground if (this.y > groundY - BALL_RADIUS) { this.y = groundY - BALL_RADIUS; this.vy *= -0.7; this.vx *= 0.98; } } draw(ctx) { ctx.save(); ctx.beginPath(); ctx.arc(this.x, this.y, BALL_RADIUS, 0, 2 * Math.PI); ctx.fillStyle = '#ffeb3b'; ctx.shadowColor = '#fbc02d'; ctx.shadowBlur = 12; ctx.fill(); ctx.shadowBlur = 0; ctx.strokeStyle = '#fbc02d'; ctx.lineWidth = 2; ctx.stroke(); ctx.restore(); } }