Simple HTML Platformer Game: Create Your Own Jump and Run Adventure
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Platformer Game</title>
<style>
#player {
position: absolute;
top: 250px;
left: 0px;
width: 30px;
height: 30px;
background-color: #00FF00;
}
#floor {
position: absolute;
top: 300px;
left: 0px;
width: 600px;
height: 10px;
background-color: #999999;
}
#box {
position: absolute;
top: 270px;
left: 150px;
width: 30px;
height: 30px;
background-color: #FF0000;
}
</style>
<script>
let leftArrowDown = false;
let rightArrowDown = false;
let player = document.getElementById('player');
let floor = document.getElementById('floor');
let box = document.getElementById('box');
<pre><code> document.addEventListener('keydown', function(event) {
if (event.keyCode == 37) {
leftArrowDown = true;
}
if (event.keyCode == 39) {
rightArrowDown = true;
}
});
document.addEventListener('keyup', function(event) {
if (event.keyCode == 37) {
leftArrowDown = false;
}
if (event.keyCode == 39) {
rightArrowDown = false;
}
});
setInterval(function() {
if (leftArrowDown == true) {
player.style.left = player.offsetLeft - 5 + 'px';
}
if (rightArrowDown == true) {
player.style.left = player.offsetLeft + 5 + 'px';
}
if (isColliding(player, floor)) {
player.style.top = floor.offsetTop - player.offsetHeight + 'px';
}
if (isColliding(player, box)) {
player.style.top = box.offsetTop - player.offsetHeight + 'px';
}
}, 10);
function isColliding(a, b) {
let aRect = a.getBoundingClientRect();
let bRect = b.getBoundingClientRect();
return !(
aRect.bottom < bRect.top ||
aRect.top > bRect.bottom ||
aRect.right < bRect.left ||
aRect.left > bRect.right
);
}
</script>
</code></pre>
</head>
<body>
<div id='player'></div>
<div id='floor'></div>
<div id='box'></div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmmz 著作权归作者所有。请勿转载和采集!