HTML Platform Game: Simple Platformer Example
<html>
<head>
<title>Platformer Game</title>
<style>
body {
background-color: #000000;
}
<pre><code> div {
position: absolute;
width: 100px;
height: 100px;
background-color: #FF0000;
}
#player {
top: 250px;
left: 25px;
}
</style>
</code></pre>
</head>
<body>
<div id='player'></div>
<div id='platform1'></div>
<div id='platform2'></div>
<div id='platform3'></div>
<script>
let player = document.getElementById('player');
let platform1 = document.getElementById('platform1');
let platform2 = document.getElementById('platform2');
let platform3 = document.getElementById('platform3');
<pre><code> let gravity = 0.25;
let player_velocity = 0;
platform1.style.left = '125px';
platform1.style.top = '250px';
platform2.style.left = '250px';
platform2.style.top = '350px';
platform3.style.left = '375px';
platform3.style.top = '450px';
function update() {
player_velocity += gravity;
player.style.top = parseInt(player.style.top) + player_velocity + 'px';
if (collision(player, platform1) ||
collision(player, platform2) ||
collision(player, platform3)) {
player_velocity = -10;
}
window.requestAnimationFrame(update);
}
function collision(a, b) {
let a_top = parseInt(a.style.top);
let a_left = parseInt(a.style.left);
let b_top = parseInt(b.style.top);
let b_left = parseInt(b.style.left);
if (a_top + 100 >= b_top &&
a_top <= b_top + 100 &&
a_left + 100 >= b_left &&
a_left <= b_left + 100) {
return true;
}
else {
return false;
}
}
window.addEventListener('keydown', (e) => {
if (e.keyCode === 32) {
player_velocity = -10;
}
});
window.requestAnimationFrame(update);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnRt 著作权归作者所有。请勿转载和采集!