<!DOCTYPE html>
<html>
<head>
<title>BBQ Grill Game</title>
<style>
body {
background-color: #EFEFEF;
font-family: Arial, sans-serif;
}
#grill {
background-image: url("bbq-grill.png");
background-size: 100% 100%;
height: 400px;
width: 600px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
#burger, #steak {
position: absolute;
bottom: 0;
width: 50px;
height: 50px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#burger {
background-image: url("burger.png");
left: 50%;
transform: translateX(-50%);
}
#steak {
background-image: url("steak.png");
right: 50%;
transform: translateX(50%);
}
#score {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="grill">
<div id="burger"></div>
<div id="steak"></div>
</div>
<div id="score">Score: 0</div>
<script>
// Set up variables for game
var score = 0;
var timeInterval = 2000;
var timeDecreaseAmount = 100;
var burgerCooking = false;
var steakCooking = false;
// Functions to start cooking a burger or steak
function cookBurger() {
if (!burgerCooking) {
burgerCooking = true;
setTimeout(function() {
score++;
updateScore();
burgerCooking = false;
}, timeInterval);
}
}
function cookSteak() {
if (!steakCooking) {
steakCooking = true;
setTimeout(function() {
score++;
updateScore();
steakCooking = false;
}, timeInterval);
}
}
// Function to update the score display
function updateScore() {
document.getElementById("score").innerHTML = "Score: " + score;
if (score % 5 == 0) {
timeInterval -= timeDecreaseAmount;
}
if (timeInterval < 500) {
timeInterval = 500;
}
}
// Set up event listeners for cooking the burger and steak
document.getElementById("burger").addEventListener("click", cookBurger);
document.getElementById("steak").addEventListener("click", cookSteak);
// Start the game loop
setInterval(function() {
// Randomly choose burger or steak to grill
var rand = Math.random();
if (rand < 0.5) {
document.getElementById("burger").style.bottom = "50px";
document.getElementById("steak").style.bottom = "0px";
} else {
document.getElementById("burger").style.bottom = "0px";
document.getElementById("steak").style.bottom = "50px";
}
},
