HTML Platformer Game: Create a Classic Side-Scrolling Adventure
<!DOCTYPE html>
<html>
<head>
<title>Platformer Game</title>
</head>
<body>
<h1>Platformer Game</h1>
<div id='game'>
<canvas id='gameCanvas' width='640' height='480'></canvas>
</div>
<script>
// set up the canvas
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let framesPerSecond = 30;
// set up the player
const playerWidth = 20;
const playerHeight = 20;
let playerX = canvas.width/2;
let playerY = canvas.height - playerHeight;
// set up the keys
let rightPressed = false;
let leftPressed = false;
// set up the game
let gameStarted = false;
let score = 0;
let gameOver = false;
// set up the obstacles
let obstacleX = canvas.width;
let obstacleY = canvas.height - 20;
let obstacleWidth = 20;
let obstacleHeight = 20;
<pre><code> // draw the player
function drawPlayer() {
ctx.beginPath();
ctx.rect(playerX, playerY, playerWidth, playerHeight);
ctx.fillStyle = '#0095DD';
ctx.fill();
ctx.closePath();
}
// draw the obstacles
function drawObstacle() {
ctx.beginPath();
ctx.rect(obstacleX, obstacleY, obstacleWidth, obstacleHeight);
ctx.fillStyle = '#FF0000';
ctx.fill();
ctx.closePath();
}
// move the obstacles
function moveObstacles() {
obstacleX -= 5;
if (obstacleX < 0) {
obstacleX = canvas.width;
score++;
}
}
// check for collisions
function checkCollision() {
if (playerX < obstacleX + obstacleWidth &&
playerX + playerWidth > obstacleX &&
playerY < obstacleY + obstacleHeight &&
playerY + playerHeight > obstacleY) {
gameOver = true;
}
}
// draw the score
function drawScore() {
ctx.font = '16px Arial';
ctx.fillStyle = '#0095DD';
ctx.fillText('Score: ' + score, 8, 20);
}
// draw the game over message
function drawGameOver() {
if (gameOver) {
ctx.font = '32px Arial';
ctx.fillStyle = '#FF0000';
ctx.fillText('Game Over', canvas.width/2 - 75, canvas.height/2);
}
}
// draw the game
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawObstacle();
moveObstacles();
checkCollision();
drawScore();
drawGameOver();
if (!gameOver) {
requestAnimationFrame(draw);
}
}
// keydown event handler
function keyDownHandler(e) {
if (e.keyCode === 39) {
rightPressed = true;
}
else if (e.keyCode === 37) {
leftPressed = true;
}
}
// keyup event handler
function keyUpHandler(e) {
if (e.keyCode === 39) {
rightPressed = false;
}
else if (e.keyCode === 37) {
leftPressed = false;
}
}
// mouse event handler
function mouseMoveHandler(e) {
if (gameStarted) {
let relativeX = e.clientX - canvas.offsetLeft;
if (relativeX > 0 && relativeX < canvas.width) {
playerX = relativeX - playerWidth/2;
}
}
}
// click event handler
function mouseClickHandler(e) {
if (!gameStarted) {
gameStarted = true;
draw();
}
}
// add event listeners
document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);
document.addEventListener('mousemove', mouseMoveHandler, false);
document.addEventListener('click', mouseClickHandler, false);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnR9 著作权归作者所有。请勿转载和采集!