Mystery Game #9
← Back to Games List
// Frogger Game Implementation
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Game settings
const gridSize = 40;
const rows = 15;
const cols = 15;
canvas.width = cols * gridSize;
canvas.height = rows * gridSize;
// Game objects
const player = {
x: Math.floor(cols/2) * gridSize,
y: (rows-1) * gridSize,
width: gridSize - 4,
height: gridSize - 4
};
const vehicles = [
// Row 1 (bottom to top)
{ x: 0, y: (rows-3) * gridSize, width: gridSize * 2, height: gridSize - 4, speed: 2, color: 'red' },
{ x: cols * gridSize / 2, y: (rows-3) * gridSize, width: gridSize * 2, height: gridSize - 4, speed: 2, color: 'red' },
// Row 2
{ x: 0, y: (rows-4) * gridSize, width: gridSize * 1.5, height: gridSize - 4, speed: -3, color: 'blue' },
{ x: cols * gridSize / 2, y: (rows-4) * gridSize, width: gridSize * 1.5, height: gridSize - 4, speed: -3, color: 'blue' },
// Row 3
{ x: 0, y: (rows-5) * gridSize, width: gridSize * 1.8, height: gridSize - 4, speed: 2.5, color: 'green' },
{ x: cols * gridSize / 2, y: (rows-5) * gridSize, width: gridSize * 1.8, height: gridSize - 4, speed: 2.5, color: 'green' }
];
const logs = [
// Row 1 (from water)
{ x: 0, y: (rows-7) * gridSize, width: gridSize * 3, height: gridSize - 4, speed: 2, color: '#8B4513' },
{ x: cols * gridSize / 2, y: (rows-7) * gridSize, width: gridSize * 3, height: gridSize - 4, speed: 2, color: '#8B4513' },
// Row 2
{ x: 0, y: (rows-8) * gridSize, width: gridSize * 2, height: gridSize - 4, speed: -2.5, color: '#8B4513' },
{ x: cols * gridSize / 2, y: (rows-8) * gridSize, width: gridSize * 2, height: gridSize - 4, speed: -2.5, color: '#8B4513' },
// Row 3
{ x: 0, y: (rows-9) * gridSize, width: gridSize * 4, height: gridSize - 4, speed: 1.5, color: '#8B4513' },
{ x: cols * gridSize / 2, y: (rows-9) * gridSize, width: gridSize * 4, height: gridSize - 4, speed: 1.5, color: '#8B4513' }
];
let onLog = null;
let score = 0;
let lives = 3;
let gameOver = false;
// Handle keyboard input
document.addEventListener('keydown', function(e) {
if (gameOver) {
if (e.key === 'Enter') {
resetGame();
}
return;
}
switch(e.key) {
case 'ArrowUp':
player.y = Math.max(0, player.y - gridSize);
break;
case 'ArrowDown':
player.y = Math.min(canvas.height - player.height, player.y + gridSize);
break;
case 'ArrowLeft':
player.x = Math.max(0, player.x - gridSize);
break;
case 'ArrowRight':
player.x = Math.min(canvas.width - player.width, player.x + gridSize);
break;
}
});
function updateVehicles() {
vehicles.forEach(vehicle => {
vehicle.x += vehicle.speed;
if (vehicle.speed > 0 && vehicle.x > canvas.width) {
vehicle.x = -vehicle.width;
} else if (vehicle.speed < 0 && vehicle.x + vehicle.width < 0) {
vehicle.x = canvas.width;
}
// Check collision
if (checkCollision(player, vehicle)) {
resetPlayer();
lives--;
if (lives <= 0) {
gameOver = true;
}
}
});
}
function updateLogs() {
onLog = null;
logs.forEach(log => {
log.x += log.speed;
if (log.speed > 0 && log.x > canvas.width) {
log.x = -log.width;
} else if (log.speed < 0 && log.x + log.width < 0) {
log.x = canvas.width;
}
// Check if player is on log
if (checkCollision(player, log)) {
onLog = log;
player.x += log.speed;
}
});
// Check if in water but not on log
if (player.y < (rows-6) * gridSize && player.y > (rows-10) * gridSize && !onLog) {
resetPlayer();
lives--;
if (lives <= 0) {
gameOver = true;
}
}
}
function checkCollision(rect1, rect2) {
return rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.y + rect1.height > rect2.y;
}
function resetPlayer() {
player.x = Math.floor(cols/2) * gridSize;
player.y = (rows-1) * gridSize;
}
function resetGame() {
resetPlayer();
lives = 3;
score = 0;
gameOver = false;
}
function draw() {
// Clear canvas
ctx.fillStyle = '#333';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw safe zones
ctx.fillStyle = '#0f0';
ctx.fillRect(0, 0, canvas.width, gridSize); // Goal
ctx.fillRect(0, (rows-2) * gridSize, canvas.width, gridSize); // Start
ctx.fillRect(0, (rows-6) * gridSize, canvas.width, gridSize); // Middle
// Draw water
ctx.fillStyle = '#00f';
ctx.fillRect(0, (rows-9) * gridSize, canvas.width, 3 * gridSize);
// Draw vehicles
vehicles.forEach(vehicle => {
ctx.fillStyle = vehicle.color;
ctx.fillRect(vehicle.x, vehicle.y, vehicle.width, vehicle.height);
});
// Draw logs
logs.forEach(log => {
ctx.fillStyle = log.color;
ctx.fillRect(log.x, log.y, log.width, log.height);
});
// Draw player
ctx.fillStyle = 'yellow';
ctx.fillRect(player.x, player.y, player.width, player.height);
// Draw score and lives
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.fillText('Lives: ' + lives, 10, canvas.height - 10);
ctx.fillText('Score: ' + score, canvas.width - 100, canvas.height - 10);
// Draw game over message
if (gameOver) {
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.font = '40px Arial';
ctx.textAlign = 'center';
ctx.fillText('Game Over!', canvas.width/2, canvas.height/2 - 20);
ctx.font = '20px Arial';
ctx.fillText('Score: ' + score, canvas.width/2, canvas.height/2 + 20);
ctx.fillText('Press Enter to Play Again', canvas.width/2, canvas.height/2 + 50);
}
}
function gameLoop() {
if (!gameOver) {
updateVehicles();
updateLogs();
// Check if reached goal
if (player.y === 0) {
score += 100;
resetPlayer();
}
}
draw();
requestAnimationFrame(gameLoop);
}
// Start game
gameLoop();
# Frogger Game Implementation
import pygame
import random
from dataclasses import dataclass
from typing import List, Tuple
@dataclass
class GameObject:
x: float
y: float
width: float
height: float
speed: float = 0.0
color: Tuple[int, int, int] = (255, 255, 255)
class FroggerGame:
def __init__(self):
pygame.init()
# Game settings
self.grid_size = 40
self.rows = 15
self.cols = 15
self.width = self.cols * self.grid_size
self.height = self.rows * self.grid_size
# Initialize display
self.screen = pygame.display.set_mode((self.width, self.height))
pygame.display.set_caption('Frogger')
self.clock = pygame.time.Clock()
# Colors
self.BROWN = (139, 69, 19)
self.RED = (255, 0, 0)
self.BLUE = (0, 0, 255)
self.GREEN = (0, 255, 0)
self.YELLOW = (255, 255, 0)
# Game state
self.score = 0
self.lives = 3
self.game_over = False
self.on_log = None
# Initialize game objects
self.init_game_objects()
def init_game_objects(self):
# Create player
self.player = GameObject(
x=self.cols//2 * self.grid_size,
y=(self.rows-1) * self.grid_size,
width=self.grid_size - 4,
height=self.grid_size - 4,
color=self.YELLOW
)
# Create vehicles
self.vehicles = [
# Row 1 (bottom to top)
GameObject(0, (self.rows-3) * self.grid_size, self.grid_size * 2,
self.grid_size - 4, 2, self.RED),
GameObject(self.cols * self.grid_size / 2, (self.rows-3) * self.grid_size,
self.grid_size * 2, self.grid_size - 4, 2, self.RED),
# Row 2
GameObject(0, (self.rows-4) * self.grid_size, self.grid_size * 1.5,
self.grid_size - 4, -3, self.BLUE),
GameObject(self.cols * self.grid_size / 2, (self.rows-4) * self.grid_size,
self.grid_size * 1.5, self.grid_size - 4, -3, self.BLUE),
# Row 3
GameObject(0, (self.rows-5) * self.grid_size, self.grid_size * 1.8,
self.grid_size - 4, 2.5, self.GREEN),
GameObject(self.cols * self.grid_size / 2, (self.rows-5) * self.grid_size,
self.grid_size * 1.8, self.grid_size - 4, 2.5, self.GREEN)
]
# Create logs
self.logs = [
# Row 1 (from water)
GameObject(0, (self.rows-7) * self.grid_size, self.grid_size * 3,
self.grid_size - 4, 2, self.BROWN),
GameObject(self.cols * self.grid_size / 2, (self.rows-7) * self.grid_size,
self.grid_size * 3, self.grid_size - 4, 2, self.BROWN),
# Row 2
GameObject(0, (self.rows-8) * self.grid_size, self.grid_size * 2,
self.grid_size - 4, -2.5, self.BROWN),
GameObject(self.cols * self.grid_size / 2, (self.rows-8) * self.grid_size,
self.grid_size * 2, self.grid_size - 4, -2.5, self.BROWN),
# Row 3
GameObject(0, (self.rows-9) * self.grid_size, self.grid_size * 4,
self.grid_size - 4, 1.5, self.BROWN),
GameObject(self.cols * self.grid_size / 2, (self.rows-9) * self.grid_size,
self.grid_size * 4, self.grid_size - 4, 1.5, self.BROWN)
]
def handle_input(self) -> bool:
for event in pygame.event.get():
if event.type == pygame.QUIT:
return False
if event.type == pygame.KEYDOWN:
if self.game_over:
if event.key == pygame.K_RETURN:
self.reset_game()
else:
self.handle_player_movement(event.key)
return True
def handle_player_movement(self, key):
if key == pygame.K_UP:
self.player.y = max(0, self.player.y - self.grid_size)
elif key == pygame.K_DOWN:
self.player.y = min(self.height - self.player.height,
self.player.y + self.grid_size)
elif key == pygame.K_LEFT:
self.player.x = max(0, self.player.x - self.grid_size)
elif key == pygame.K_RIGHT:
self.player.x = min(self.width - self.player.width,
self.player.x + self.grid_size)
def update_vehicles(self):
for vehicle in self.vehicles:
vehicle.x += vehicle.speed
if vehicle.speed > 0 and vehicle.x > self.width:
vehicle.x = -vehicle.width
elif vehicle.speed < 0 and vehicle.x + vehicle.width < 0:
vehicle.x = self.width
if self.check_collision(self.player, vehicle):
self.reset_player()
self.lives -= 1
if self.lives <= 0:
self.game_over = True
def update_logs(self):
self.on_log = None
for log in self.logs:
log.x += log.speed
if log.speed > 0 and log.x > self.width:
log.x = -log.width
elif log.speed < 0 and log.x + log.width < 0:
log.x = self.width
if self.check_collision(self.player, log):
self.on_log = log
self.player.x += log.speed
# Check if in water but not on log
if (self.player.y < (self.rows-6) * self.grid_size and
self.player.y > (self.rows-10) * self.grid_size and
not self.on_log):
self.reset_player()
self.lives -= 1
if self.lives <= 0:
self.game_over = True
def check_collision(self, obj1: GameObject, obj2: GameObject) -> bool:
return (obj1.x < obj2.x + obj2.width and
obj1.x + obj1.width > obj2.x and
obj1.y < obj2.y + obj2.height and
obj1.y + obj1.height > obj2.y)
def reset_player(self):
self.player.x = self.cols//2 * self.grid_size
self.player.y = (self.rows-1) * self.grid_size
def reset_game(self):
self.reset_player()
self.lives = 3
self.score = 0
self.game_over = False
def draw(self):
# Clear screen
self.screen.fill((51, 51, 51)) # Dark gray background
# Draw safe zones
pygame.draw.rect(self.screen, self.GREEN, # Goal
(0, 0, self.width, self.grid_size))
pygame.draw.rect(self.screen, self.GREEN, # Start
(0, (self.rows-2) * self.grid_size,
self.width, self.grid_size))
pygame.draw.rect(self.screen, self.GREEN, # Middle
(0, (self.rows-6) * self.grid_size,
self.width, self.grid_size))
# Draw water
pygame.draw.rect(self.screen, self.BLUE,
(0, (self.rows-9) * self.grid_size,
self.width, 3 * self.grid_size))
# Draw vehicles
for vehicle in self.vehicles:
pygame.draw.rect(self.screen, vehicle.color,
(vehicle.x, vehicle.y,
vehicle.width, vehicle.height))
# Draw logs
for log in self.logs:
pygame.draw.rect(self.screen, log.color,
(log.x, log.y, log.width, log.height))
# Draw player
pygame.draw.rect(self.screen, self.player.color,
(self.player.x, self.player.y,
self.player.width, self.player.height))
# Draw score and lives
font = pygame.font.Font(None, 36)
lives_text = font.render(f'Lives: {self.lives}', True, (255, 255, 255))
score_text = font.render(f'Score: {self.score}', True, (255, 255, 255))
self.screen.blit(lives_text, (10, self.height - 30))
self.screen.blit(score_text, (self.width - 120, self.height - 30))
# Draw game over message
if self.game_over:
overlay = pygame.Surface((self.width, self.height))
overlay.fill((0, 0, 0))
overlay.set_alpha(178) # 70% opacity
self.screen.blit(overlay, (0, 0))
font = pygame.font.Font(None, 64)
game_over = font.render('Game Over!', True, (255, 255, 255))
game_over_rect = game_over.get_rect(
center=(self.width//2, self.height//2 - 20))
self.screen.blit(game_over, game_over_rect)
font = pygame.font.Font(None, 36)
score = font.render(f'Score: {self.score}', True, (255, 255, 255))
score_rect = score.get_rect(
center=(self.width//2, self.height//2 + 20))
self.screen.blit(score, score_rect)
play_again = font.render('Press Enter to Play Again',
True, (255, 255, 255))
play_again_rect = play_again.get_rect(
center=(self.width//2, self.height//2 + 50))
self.screen.blit(play_again, play_again_rect)
pygame.display.flip()
def run(self):
running = True
while running:
running = self.handle_input()
if not self.game_over:
self.update_vehicles()
self.update_logs()
# Check if reached goal
if self.player.y == 0:
self.score += 100
self.reset_player()
self.draw()
self.clock.tick(60)
pygame.quit()
if __name__ == '__main__':
game = FroggerGame()
game.run()
Play Game