Hier ist ein weiteres einfaches HTML-Mini-Spiel, das du in deinen Blog einbinden kannst. Es ist ein kleines Spiel, bei dem der Spieler versuchen muss, einen Ball mit der Maus zu fangen:
Code / :
<!DOCTYPE html>
<html>
<head>
<style>
#gameContainer {
width: 300px;
height: 300px;
position: relative;
background-color: #f0f0f0;
border: 1px solid #000;
}
#ball {
width: 30px;
height: 30px;
position: absolute;
background-color: #777;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<div id="gameContainer">
<div id="ball"></div>
</div>
<script>
var ball = document.getElementById('ball');
var gameContainer = document.getElementById('gameContainer');
function moveBall() {
var xPosition = Math.random() * (gameContainer.offsetWidth - ball.offsetWidth);
var yPosition = Math.random() * (gameContainer.offsetHeight - ball.offsetHeight);
ball.style.top = yPosition + 'px';
ball.style.left = xPosition + 'px';
}
ball.addEventListener('mouseover', moveBall);
</script>
</body>
</html>
In diesem Spiel bewegt sich der Ball (#ball) zufällig innerhalb des Containers (#gameContainer), wenn der Mauszeiger über den Ball fährt. Es ist ein einfaches Fangspiel, das du leicht anpassen und erweitern kannst, um es interessanter zu machen. Viel Spaß beim Spielen und Anpassen für deinen Blog!
Erstellt mithilfe von KI Copilot
Comments are closed