HTML Platformer Game: Build a Simple 2D Platformer with JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Simple Platformer</title>
<style>
body {
margin: 0;
padding: 0;
}
<pre><code> canvas {
background-color: #000;
border: 1px solid #000;
display: block;
margin: 0 auto;
}
</style>
</code></pre>
</head>
<body>
<canvas width="640" height="480"></canvas>
<script>
window.onload = function(){
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
<pre><code> // Main Character
var player = {
x: 0,
y: 0,
width: 32,
height: 32,
speed: 5
};
// Platforms
var platforms = [
{x: 0, y: 400, width: 800, height: 16},
{x: 400, y: 200, width: 400, height: 16},
{x: 0, y: 100, width: 800, height: 16}
];
// Render main character
var render = function() {
ctx.fillStyle = "#FFF";
ctx.fillRect(player.x, player.y, player.width, player.height);
};
// Render platforms
var renderPlatforms = function() {
ctx.fillStyle = "#000";
for(var i = 0; i < platforms.length; i++) {
ctx.fillRect(platforms[i].x, platforms[i].y, platforms[i].width, platforms[i].height);
}
};
// Check for collisions
var checkCollisions = function() {
// player and platforms
for(var i = 0; i < platforms.length; i++) {
if(player.x + player.width > platforms[i].x &&
player.x < platforms[i].x + platforms[i].width &&
player.y + player.height > platforms[i].y &&
player.y < platforms[i].y + platforms[i].height) {
player.y = platforms[i].y - player.height;
}
}
};
// Update
var update = function() {
// Put update logic here
};
// Key events
var keysDown = {};
window.addEventListener('keydown', function(e) {
keysDown[e.keyCode] = true;
});
window.addEventListener('keyup', function(e) {
delete keysDown[e.keyCode];
});
// Main loop
var main = function() {
// Handle user input
if(38 in keysDown) {
// Up
player.y -= player.speed;
}
if(40 in keysDown) {
// Down
player.y += player.speed;
}
if(37 in keysDown) {
// Left
player.x -= player.speed;
}
if(39 in keysDown) {
// Right
player.x += player.speed;
}
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Update and render
update();
render();
renderPlatforms();
checkCollisions();
// Request animation frame
requestAnimationFrame(main);
};
// Start
main();
};
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnR5 著作权归作者所有。请勿转载和采集!