Simple HTML Platformer: Build a Basic Game Now
<!DOCTYPE html>
<html>
<head>
<title>Platformer</title>
<style>
body {
background-color: #fafafa;
margin: 0;
padding: 0;
}
#game-container {
width: 400px;
height: 300px;
position: relative;
}
#player {
width: 50px;
height: 50px;
background-color: #000;
position: absolute;
left: 20px;
top: 20px;
}
#platform {
width: 400px;
height: 30px;
position: absolute;
background-color: #999;
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="game-container">
<div id="player"></div>
<div id="platform"></div>
</div>
<script>
var player = document.getElementById("player");
var platform = document.getElementById("platform");
// Player movement
document.addEventListener("keydown", function(e) {
if (e.keyCode === 37) { // Left
player.style.left = parseInt(player.style.left) - 5 + "px";
} else if (e.keyCode === 39) { // Right
player.style.left = parseInt(player.style.left) + 5 + "px";
}
});
// Collision detection
setInterval(function() {
if (player.offsetLeft + player.offsetWidth > platform.offsetLeft &&
player.offsetLeft < platform.offsetLeft + platform.offsetWidth) {
if (player.offsetTop + player.offsetHeight >= platform.offsetTop) {
player.style.top = platform.offsetTop - player.offsetHeight + "px";
}
}
}, 10);
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmmF 著作权归作者所有。请勿转载和采集!