Simple HTML Clicker Game: Test Your Speed & Accuracy
Simple HTML Clicker Game
Are you ready to test your skills? In this simple HTML game, your goal is to click on as many squares as possible within a limited time frame.
Game Instructions
- Click on the 'Start Game' button to begin.
- Once the game starts, squares will appear randomly on the screen.
- Click on as many squares as you can within 30 seconds.
- Each square you click will earn you one point.
- The game will automatically end after 30 seconds.
- Your final score will be displayed on the screen.
Game Code
Here's the code for the game:
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Clicker Game</title>
<style>
.square {
height: 50px;
width: 50px;
background-color: #3498db;
position: absolute;
border-radius: 5px;
display: none;
}
</style>
</head>
<body>
<h1>Simple HTML Clicker Game</h1>
<button id='start-game'>Start Game</button>
<div id='game-board'></div>
<h2 id='score'>Score: 0</h2>
<script>
var score = 0;
var gameBoard = document.getElementById('game-board');
document.getElementById('start-game').addEventListener('click', function(){
timer();
setTimeout(stopGame, 30000);
});
function timer() {
var interval = setInterval(function() {
createSquare();
}, 1000);
}
function createSquare() {
var square = document.createElement('div');
square.classList.add('square');
square.style.top = Math.random() * (window.innerHeight - 50) + 'px';
square.style.left = Math.random() * (window.innerWidth - 50) + 'px';
square.addEventListener('click', function() {
this.style.display = 'none';
score++;
document.getElementById('score').innerHTML = 'Score: ' + score;
});
gameBoard.appendChild(square);
setTimeout(function() {
gameBoard.removeChild(square);
}, 1000);
}
function stopGame() {
clearInterval(interval);
alert('Game Over! Your final score is ' + score);
}
</script>
</body>
</html>
Game Demo
You can see a live demo of the game here.
Enjoy the game and good luck!
原文地址: https://www.cveoy.top/t/topic/lmkQ 著作权归作者所有。请勿转载和采集!