Create HTML Platform Game: Code Example
<!DOCTYPE html>
<html>
<head>
<title>Platformer</title>
<style>
body {
margin: 0px;
}
<pre><code>canvas {
display: block;
background: #eeeeee;
margin: 0 auto;
position: relative;
}
</code></pre>
</style>
</head>
<body>
<p><canvas id='myCanvas' width='600' height='400'></canvas></p>
<script>
// Setup canvas
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Setup ground
var groundY = canvas.height - 20;
ctx.fillStyle = '#000000';
ctx.fillRect(0, groundY, canvas.width, 20);
// Setup player
var player = {
x: canvas.width/2,
y: groundY - 50,
width: 20,
height: 50,
speed: 3,
velX: 0,
velY: 0,
jumping: false
};
// Setup keyboard controls
var keys = [];
document.addEventListener('keydown', function(e) {
keys[e.keyCode] = true;
});
document.addEventListener('keyup', function(e) {
keys[e.keyCode] = false;
});
// Main game loop
function update() {
// Player movement
if (keys[37]) {
// Left
if (player.velX > -player.speed) {
player.velX--;
}
}
if (keys[39]) {
// Left
if (player.velX < player.speed) {
player.velX++;
}
}
if (keys[38] && !player.jumping) {
// Up
player.jumping = true;
player.velY = -player.speed*2;
}
player.x += player.velX;
player.y += player.velY;
// Gravity
if (player.y + player.height < groundY) {
player.jumping = true;
player.velY += 0.3;
} else {
player.jumping = false;
}
// Collisions
if (player.x < 0) {
player.x = 0;
} else if (player.x + player.width > canvas.width) {
player.x = canvas.width - player.width;
}
if (player.y < 0) {
player.y = 0;
} else if (player.y + player.height > groundY) {
player.y = groundY - player.height;
}
// Draw
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#000000';
ctx.fillRect(player.x, player.y, player.width, player.height);
ctx.fillRect(0, groundY, canvas.width, 20);
}
setInterval(update, 10);
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnRi 著作权归作者所有。请勿转载和采集!