Create HTML Code for a Basic Platformer Game
<!DOCTYPE html>
<html>
<head>
<title>Platformer</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
}
.platformer {
width: 800px;
height: 600px;
margin: 0 auto;
background-color: #fff;
position: relative;
}
.platformer-player {
width: 40px;
height: 40px;
background-color: #00f;
position: absolute;
top: 560px;
left: 0;
transition: all 0.2s linear;
}
.platform {
width: 100%;
height: 50px;
background-color: #00f;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class='platformer'>
<div class='platformer-player'></div>
<div class='platform'></div>
</div>
<script type='text/javascript'>
const player = document.querySelector('.platformer-player');
let isJumping = false;
let gravity = 0.9;
let velocity = 0;
<pre><code> function control(e) {
if (e.keyCode === 32) {
if (!isJumping) {
isJumping = true;
velocity = -20;
}
}
}
document.addEventListener('keyup', control);
function jump() {
if (isJumping) {
if (player.y < 560) {
velocity += gravity;
player.y += velocity;
} else {
isJumping = false;
player.y = 560;
velocity = 0;
}
}
requestAnimationFrame(jump);
}
jump();
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnRO 著作权归作者所有。请勿转载和采集!