Simple HTML Game: Dodge the Obstacle
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Game: Dodge the Obstacle</title>
<style>
body {
background-color: #f2f2f2;
}
#game {
width: 500px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
}
#start {
text-align: center;
font-size: 20px;
color: #000;
font-weight: bold;
margin-top: 30px;
}
#score {
font-size: 20px;
font-weight: bold;
color: #000;
float: right;
margin-right: 30px;
}
#playArea {
width: 400px;
height: 400px;
margin: 0 auto;
border: 3px solid #000;
position: relative;
}
#player {
width: 20px;
height: 20px;
background-color: #00f;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
}
#obstacle {
width: 20px;
height: 20px;
background-color: #f00;
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id='game'>
<div id='start'>
<button onclick='startGame()'>Start Game</button>
</div>
<div id='score'></div>
<div id='playArea'></div>
</div>
<script>
var score = 0;
var player;
var obstacle;
<pre><code> function startGame() {
document.getElementById('start').style.display = 'none';
player = document.createElement('div');
player.id = 'player';
document.getElementById('playArea').appendChild(player);
movePlayer();
obstacle = document.createElement('div');
obstacle.id = 'obstacle';
document.getElementById('playArea').appendChild(obstacle);
moveObstacle();
}
function movePlayer() {
if (player.offsetLeft > (document.getElementById('playArea').offsetWidth - player.offsetWidth)) {
player.style.left = 0 + 'px';
} else {
player.style.left = (player.offsetLeft + 10) + 'px';
}
setTimeout(movePlayer, 50);
detectCollision();
}
function moveObstacle() {
if (obstacle.offsetLeft > (document.getElementById('playArea').offsetWidth - obstacle.offsetWidth)) {
obstacle.style.left = 0 + 'px';
} else {
obstacle.style.left = (obstacle.offsetLeft + 10) + 'px';
}
setTimeout(moveObstacle, 100);
detectCollision();
}
function detectCollision() {
if (player.offsetLeft < obstacle.offsetLeft + obstacle.offsetWidth &&
player.offsetLeft + player.offsetWidth > obstacle.offsetLeft &&
player.offsetTop < obstacle.offsetTop + obstacle.offsetHeight &&
player.offsetTop + player.offsetHeight > obstacle.offsetTop) {
alert('Game Over');
document.getElementById('score').innerHTML = 'Score: 0';
score = 0;
} else {
score++;
document.getElementById('score').innerHTML = 'Score: ' + score;
}
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmdg 著作权归作者所有。请勿转载和采集!