HTML Platform Game Code: A Simple Example
<!DOCTYPE html>
<html>
<head>
<title>Platformer</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id='gameCanvas' width='640' height='480'></canvas>
<script>
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');
//Game Variables
var backgroundX = 0;
var backgroundY = 0;
var backgroundWidth = 640;
var backgroundHeight = 480;
ctx.fillStyle = '#000000';
ctx.fillRect(backgroundX, backgroundY, backgroundWidth, backgroundHeight);
<pre><code> // Player Variables
var playerX = 10;
var playerY = 10;
var playerWidth = 20;
var playerHeight = 20;
var playerSpeed = 5;
ctx.fillStyle = '#FF0000';
ctx.fillRect(playerX, playerY, playerWidth, playerHeight);
// Platform Variables
var platformX = 150;
var platformY = 350;
var platformWidth = 250;
var platformHeight = 30;
ctx.fillStyle = '#00FF00';
ctx.fillRect(platformX, platformY, platformWidth, platformHeight);
//Movement
function movePlayer(){
if (Key.isDown(Key.UP)) {
playerY -= playerSpeed;
}
if (Key.isDown(Key.DOWN)) {
playerY += playerSpeed;
}
if (Key.isDown(Key.LEFT)) {
playerX -= playerSpeed;
}
if (Key.isDown(Key.RIGHT)) {
playerX += playerSpeed;
}
//Collision detection
if (playerX < 0) {
playerX = 0;
}
if (playerX > backgroundWidth - playerWidth) {
playerX = backgroundWidth - playerWidth;
}
if (playerY < 0) {
playerY = 0;
}
if (playerY > backgroundHeight - playerHeight) {
playerY = backgroundHeight - playerHeight;
}
if (playerY + playerHeight > platformY && playerX + playerWidth > platformX && playerX < platformX + platformWidth) {
playerY = platformY - playerHeight;
}
}
//Draw
function draw(){
ctx.fillStyle = '#000000';
ctx.fillRect(backgroundX, backgroundY, backgroundWidth, backgroundHeight);
//Draw Player
ctx.fillStyle = '#FF0000';
ctx.fillRect(playerX, playerY, playerWidth, playerHeight);
//Draw Platform
ctx.fillStyle = '#00FF00';
ctx.fillRect(platformX, platformY, platformWidth, platformHeight);
}
function loop(){
movePlayer();
draw();
}
//Keyboard
var Key = {
_pressed: {},
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40,
isDown: function(keyCode) {
return this._pressed[keyCode];
},
onKeydown: function(event) {
this._pressed[event.keyCode] = true;
},
onKeyup: function(event) {
delete this._pressed[event.keyCode];
}
};
window.addEventListener('keyup', function(event) { Key.onKeyup(event); }, false);
window.addEventListener('keydown', function(event) { Key.onKeydown(event); }, false);
setInterval(loop, 20);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnR6 著作权归作者所有。请勿转载和采集!