HTML Platformer Game: Create Your Own Jumping Adventure
<!DOCTYPE html>
<html>
<head>
<title>Platformer Game</title>
<style>
body {
background-color: #121212;
overflow: hidden;
}
canvas {
position: absolute;
background-color: white;
}
</style>
</head>
<body>
<canvas id='canvas' width='500' height='500'></canvas>
<script>
window.onload = function() {
// Setup canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ground = canvas.height - 30;
<pre><code> // Setup player
var player = {
x: 10,
y: ground,
width: 20,
height: 20,
speed: 5,
gravity: 1.5,
jumpForce: 20
};
// Setup Keys
var left = false;
var right = false;
var jump = false;
// Setup Ground
var platforms = [
{x: 0, y: canvas.height - 10, width: canvas.width, height: 10}, // Bottom
{x: canvas.width - 10, y: 250, width: 10, height: canvas.height - 250}, // Right
{x: 0, y: 0, width: 10, height: 250} // Left
];
// Draw function
function draw() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw ground
ctx.fillStyle = '#222222';
for (var i = 0; i < platforms.length; i++) {
var p = platforms[i];
ctx.fillRect(p.x, p.y, p.width, p.height);
}
// Draw player
ctx.fillStyle = '#FF0000';
ctx.fillRect(player.x, player.y, player.width, player.height);
}
// Update function
function update() {
// Left
if (left) {
player.x -= player.speed;
}
// Right
if (right) {
player.x += player.speed;
}
// Gravity
player.y += player.gravity;
// Jump
if (jump) {
player.y -= player.jumpForce;
}
// Ground collision
for (var i = 0; i < platforms.length; i++) {
var p = platforms[i];
if (player.y + player.height >= p.y && player.y <= p.y && player.x + player.width >= p.x && player.x <= p.x + p.width) {
player.y = p.y - player.height;
jump = false;
}
}
// Check boundaries
if (player.x > canvas.width - player.width) {
player.x = canvas.width - player.width;
}
if (player.x < 0) {
player.x = 0;
}
if (player.y > canvas.height - player.height) {
player.y = canvas.height - player.height;
jump = false;
}
if (player.y < 0) {
player.y = 0;
}
}
// Key events
document.addEventListener('keydown', function(e) {
if (e.keyCode === 37) {
left = true;
}
else if (e.keyCode === 39) {
right = true;
}
if (e.keyCode === 38) {
jump = true;
}
});
document.addEventListener('keyup', function(e) {
if (e.keyCode === 37) {
left = false;
}
else if (e.keyCode === 39) {
right = false;
}
});
// Main loop
function loop() {
draw();
update();
requestAnimationFrame(loop);
}
loop();
};
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnR7 著作权归作者所有。请勿转载和采集!