<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chef's Kitchen Rush</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #2c3e50;
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
color: white;
overflow: hidden;
}
h1 { margin-bottom: 10px; }
#gameCanvas {
background-color: #ecf0f1;
border: 5px solid #e67e22;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
cursor: none; /* Hide cursor over canvas for immersion */
}
#scoreBoard {
font-size: 24px;
margin-top: 10px;
}
.instructions {
font-size: 14px;
color: #bdc3c7;
margin-top: 5px;
}
</style>
</head>
<body>
<h1>👨🍳 Chef's Kitchen Rush</h1>
<canvas id="gameCanvas" width="600" height="400"></canvas>
<div id="scoreBoard">Score: 0 | Lives: 3</div>
<div class="instructions">Move MOUSE to catch food. Avoid burnt food! Click to Restart.</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('scoreBoard');
// Game State
let score = 0;
let lives = 3;
let isGameOver = false;
let frameCount = 0;
// Chef Player
const chef = {
x: canvas.width / 2,
y: canvas.height - 60,
width: 50,
height: 50,
emoji: "👨🍳"
};
// Falling Items
const foods = ["🍔", "🍕", "🌮", "🍩", "🍗"];
const burntFood = "⚫";
let items = [];
// Mouse Controls
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
chef.x = e.clientX - rect.left - (chef.width / 2);
// Keep chef inside canvas
if(chef.x < 0) chef.x = 0;
if(chef.x > canvas.width - chef.width) chef.x = canvas.width - chef.width;
});
// Restart on Click
canvas.addEventListener('mousedown', () => {
if (isGameOver) resetGame();
});
function spawnItem() {
const isBad = Math.random() < 0.3; // 30% chance of burnt food
const content = isBad ? burntFood : foods[Math.floor(Math.random() * foods.length)];
items.push({
x: Math.random() * (canvas.width - 30),
y: -30,
speed: 3 + (score / 100), // Get faster as score increases
content: content,
type: isBad ? 'bad' : 'good'
});
}
function resetGame() {
score = 0;
lives = 3;
items = [];
isGameOver = false;
frameCount = 0;
loop();
}
function update() {
if (isGameOver) return;
frameCount++;
// Spawn items every 60 frames (approx 1 second)
// Spawns faster as score increases
let spawnRate = 60;
if(score > 50) spawnRate = 50;
if(score > 100) spawnRate = 40;
if (frameCount % spawnRate === 0) {
spawnItem();
}
// Move items
for (let i = 0; i < items.length; i++) {
let item = items[i];
item.y += item.speed;
// Collision Detection
if (
item.x < chef.x + chef.width &&
item.x + 30 > chef.x &&
item.y < chef.y + chef.height &&
item.y + 30 > chef.y
) {
// Caught!
if (item.type === 'good') {
score += 10;
} else {
lives--;
// Screen shake effect logic could go here
}
items.splice(i, 1);
i--;
continue;
}
// Missed items
if (item.y > canvas.height) {
if (item.type === 'good') {
// Optional: Penalize for missing good food?
// For now, let's keep it simple.
}
items.splice(i, 1);
i--;
}
}
// Check Game Over
if (lives <= 0) {
isGameOver = true;
}
// Update UI
scoreElement.innerText = `Score: ${score} | Lives: ${lives}`;
}
function draw() {
// Clear screen
ctx.fillStyle = '#ecf0f1';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw Chef
ctx.font = '40px Arial';
ctx.fillText(chef.emoji, chef.x, chef.y + 40);
// Draw Items
for (let item of items) {
ctx.fillText(item.content, item.x, item.y + 30);
}
// Draw Game Over Screen
if (isGameOver) {
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.font = '50px Arial';
ctx.textAlign = 'center';
ctx.fillText("KITCHEN CLOSED!", canvas.width / 2, canvas.height / 2 - 20);
ctx.font = '24px Arial';
ctx.fillText(`Final Score: ${score}`, canvas.width / 2, canvas.height / 2 + 20);
ctx.fillText("Click to Open Kitchen Again", canvas.width / 2, canvas.height / 2 + 60);
ctx.textAlign = 'start'; // Reset alignment
}
}
function loop() {
update();
draw();
if (!isGameOver) {
requestAnimationFrame(loop);
} else {
// Keep drawing the game over screen
requestAnimationFrame(draw);
}
}
// Start the game
resetGame();
</script>
</body>
</html>