HTML Platformer Game: Build a Fun Side-Scrolling Game
<!DOCTYPE html>
<html>
<head>
<title>HTML Platformer Game</title>
</head>
<body>
<canvas id='gameCanvas' width='600' height='600'></canvas>
<script>
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');
// Draw the background
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = 'images/background.png';
// Draw the Player
var playerReady = false;
var playerImage = new Image();
playerImage.onload = function () {
playerReady = true;
};
playerImage.src = 'images/player.png';
// Game objects
var player = {
speed: 256, // Movement in pixels per second
x: 0,
y: 0
};
var enemy = {
x: 0,
y: 0
};
var enemiesCaught = 0;
// Handle keyboard controls
var keysDown = {};
addEventListener('keydown', function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener('keyup', function (e) {
delete keysDown[e.keyCode];
}, false);
// Reset the game when the player catches a enemy
var reset = function () {
// Throw the enemy somewhere on the screen randomly
enemy.x = 32 + (Math.random() * (canvas.width - 64));
enemy.y = 32 + (Math.random() * (canvas.height - 64));
};
// Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up
player.y -= player.speed * modifier;
}
if (40 in keysDown) { // Player holding down
player.y += player.speed * modifier;
}
if (37 in keysDown) { // Player holding left
player.x -= player.speed * modifier;
}
if (39 in keysDown) { // Player holding right
player.x += player.speed * modifier;
}
// Are they touching?
if (
player.x <= (enemy.x + 32)
&& enemy.x <= (player.x + 32)
&& player.y <= (enemy.y + 32)
&& enemy.y <= (player.y + 32)
) {
++enemiesCaught;
reset();
}
};
// Draw everything
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (playerReady) {
ctx.drawImage(playerImage, player.x, player.y);
}
if (enemyReady) {
ctx.drawImage(enemyImage, enemy.x, enemy.y);
}
// Score
ctx.fillStyle = 'rgb(250, 250, 250)';
ctx.font = '24px Helvetica';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText('Enemies caught: ' + enemiesCaught, 32, 32);
};
// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
};
// Let's play this game!
reset();
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnR8 著作权归作者所有。请勿转载和采集!