hra
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8" />
<title>Bicycle Garage - Web Prototype</title>
<style>
body {
background: #2c2f3a;
color: white;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#game {
width: 100%;
max-width: 900px;
margin: auto;
padding: 20px;
}
.customer {
background: #6e738d;
margin: 10px 0;
padding: 10px;
border-radius: 6px;
cursor: pointer;
}
#miniGame {
margin-top: 20px;
background: #1a1d25;
padding: 20px;
border-radius: 10px;
display: none;
text-align: center;
}
#barContainer {
width: 80%;
height: 30px;
margin: 20px auto;
background: red;
border-radius: 5px;
position: relative;
}
#greenZone {
position: absolute;
left: 40%;
width: 20%;
height: 100%;
background: green;
}
#movingBar {
position: absolute;
width: 5%;
height: 100%;
background: white;
left: 0%;
}
</style>
</head>
<body>
<div id="game">
<h1>Bicycle Garage – Web Hra (Prototyp)</h1>
<p>Čas: <span id="time">60</span>s | Peniaze: €<span id="money">50</span> | Skóre: <span id="score">0</span></p>
<h2>Zákazníci:</h2>
<div id="customers"></div>
<div id="miniGame">
<h2>Mini-hra: Brake Adjustment</h2>
<p>Klikni, keď je biela tyč v zelenom poli!</p>
<div id="barContainer">
<div id="greenZone"></div>
<div id="movingBar"></div>
</div>
<button onclick="stopBrakeGame()">Stop!</button>
</div>
</div>
<script>
let money = 50;
let score = 0;
let timeLeft = 60;
let customers = [];
let maxCustomers = 3;
function randomCustomer() {
return {
name: "Cust" + Math.floor(Math.random() * 900 + 100),
task: "brake",
pay: Math.floor(Math.random() * 30 + 20),
patience: Math.floor(Math.random() * 20 + 20)
};
}
function spawnCustomer() {
if (customers.length < maxCustomers) {
customers.push(randomCustomer());
renderCustomers();
}
}
function renderCustomers() {
let cDiv = document.getElementById("customers");
cDiv.innerHTML = "";
customers.forEach((c, index) => {
let el = document.createElement("div");
el.className = "customer";
el.innerHTML = `${c.name} – ${c.task} – €${c.pay} (Trpezlivosť: ${c.patience}s)`;
el.onclick = () => startBrakeGame(index);
cDiv.appendChild(el);
});
}
// Mini-game variables
let barPos = 0;
let direction = 1;
let brakeInterval;
function startBrakeGame(index) {
currentCustomer = customers[index];
customers.splice(index, 1);
renderCustomers();
document.getElementById("miniGame").style.display = "block";
brakeInterval = setInterval(() => {
barPos += direction * 2;
if (barPos >= 95) direction = -1;
if (barPos <= 0) direction = 1;
document.getElementById("movingBar").style.left = barPos + "%";
}, 16);
}
function stopBrakeGame() {
clearInterval(brakeInterval);
let success = barPos >= 40 && barPos <= 60;
let reward = success ? currentCustomer.pay : 0;
money += reward;
score += reward;
alert(success ? "Výborne! Oprava hotová!" : "Nepodarilo sa!");
document.getElementById("miniGame").style.display = "none";
document.getElementById("money").innerText = money;
document.getElementById("score").innerText = score;
}
// Game loop
setInterval(() => {
timeLeft--;
document.getElementById("time").innerText = timeLeft;
customers.forEach(c => c.patience--);
customers = customers.filter(c => c.patience > 0);
renderCustomers();
if (timeLeft <= 0) alert("Koniec hry!");
}, 1000);
setInterval(spawnCustomer, 3000);
</script>
</body>
</html>