Hier ist ein einfaches HTML-Mini-Spiel, das du in deinen Blog einbinden kannst. Es ist ein kleines Spiel, bei dem der Spieler versuchen muss, einen beweglichen Block zu fangen:
Code / :
<!DOCTYPE html>
<html>
<head>
<style>
#gameContainer {
width: 100px;
height: 100px;
position: relative;
background-color: #f0f0f0;
border: 1px solid #000;
}
#player {
width: 50px;
height: 50px;
position: absolute;
background-color: #333;
cursor: pointer;
}
</style>
</head>
<body>
<div id="gameContainer">
<div id="player"></div>
</div>
<script>
var player = document.getElementById('player');
var gameContainer = document.getElementById('gameContainer');
function movePlayer() {
var xPosition = Math.random() * (gameContainer.offsetWidth - player.offsetWidth);
var yPosition = Math.random() * (gameContainer.offsetHeight - player.offsetHeight);
player.style.top = yPosition + 'px';
player.style.left = xPosition + 'px';
}
player.addEventListener('mouseover', movePlayer);
</script>
</body>
</html>
In diesem Spiel bewegt sich der Block (#player) zufällig innerhalb des Containers (#gameContainer), wenn der Mauszeiger über den Block 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