<!DOCTYPE html>
<html lang=”fi”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Klikkaa esiin tuleva kuva</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f2f2f2;
}
#game-container {
margin: 50px auto;
position: relative;
width: 500px;
height: 500px;
border: 2px solid #333;
background-color: #fff;
}
.image {
position: absolute;
width: 50px;
height: 50px;
cursor: pointer;
}
#score {
font-size: 20px;
margin-top: 20px;
}
#game-over {
font-size: 30px;
color: red;
display: none;
margin-top: 20px;
}
#restart-button {
margin-top: 10px;
display: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Klikkaa esiin tuleva kuva!</h1>
<div id=”game-container”></div>
<div id=”score”>Pisteet: 0</div>
<div id=”game-over”>Peli ohi! Yritä uudestaan.</div>
<button id=”restart-button” onclick=”startGame()”>Aloita alusta</button>
<script>
let score = 0;
let isGameActive = false;
let gameContainer = document.getElementById(”game-container”);
let scoreDisplay = document.getElementById(”score”);
let gameOverDisplay = document.getElementById(”game-over”);
let restartButton = document.getElementById(”restart-button”);
let gameTimeout;
function createImage() {
if (!isGameActive) return;
let image = document.createElement(”img”);
image.classList.add(”image”);
image.src = ”http://www.murukahvila.fi/wp-content/uploads/2024/12/WhatsApp_Image_2024-12-17_at_19.08.42-removebg.png”;
let imageSize = 50;
let maxX = gameContainer.offsetWidth – imageSize;
let maxY = gameContainer.offsetHeight – imageSize;
let randomX = Math.floor(Math.random() * maxX);
let randomY = Math.floor(Math.random() * maxY);
image.style.left = randomX + ”px”;
image.style.top = randomY + ”px”;
image.addEventListener(”click”, function() {
if (!isGameActive) return;
score++;
scoreDisplay.textContent = ”Pisteet: ” + score;
gameContainer.removeChild(image);
createImage();
});
gameContainer.appendChild(image);
setTimeout(function() {
if (isGameActive && gameContainer.contains(image)) {
gameContainer.removeChild(image);
createImage();
}
}, 2000);
}
function startGame() {
// Nollaa peli
isGameActive = true;
score = 0;
scoreDisplay.textContent = ”Pisteet: 0”;
gameOverDisplay.style.display = ”none”;
restartButton.style.display = ”none”;
// Poistetaan mahdolliset vanhat kuvat
gameContainer.innerHTML = ””;
// Aloita peli
createImage();
// Aseta aikaraja pelille (30s)
gameTimeout = setTimeout(function() {
isGameActive = false;
gameOverDisplay.style.display = ”block”;
restartButton.style.display = ”inline-block”;
}, 30000);
}
// Käynnistetään peli sivun latautuessa
window.onload = startGame;
</script>
</body>
</html>