Simple HTML Platformer Game: Build Your First Game Now
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Platformer Game</title>
<style>
#player {
position: absolute;
width: 32px;
height: 32px;
}
<pre><code>#platform {
position: absolute;
width: 200px;
height: 10px;
top: 250px;
left: 100px;
}
</code></pre>
</style>
</head>
<body>
<div id='player'></div>
<div id='platform'></div>
<script>
// Initialize the player's position
document.querySelector('#player').style.top = '0px';
document.querySelector('#player').style.left = '0px';
<pre><code>// This is the main loop for the game
setInterval(function() {
// Move the player
let player = document.querySelector('#player');
let top = parseInt(player.style.top);
let left = parseInt(player.style.left);
top += 5;
player.style.top = `${top}px`;
// Check if the player is hitting the platform
let platform = document.querySelector('#platform');
let platformTop = parseInt(platform.style.top);
let platformLeft = parseInt(platform.style.left);
if (top + 32 > platformTop && left + 32 > platformLeft && left < platformLeft + 200) {
player.style.top = `${platformTop - 32}px`;
}
}, 100);
</code></pre>
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmmC 著作权归作者所有。请勿转载和采集!