使用HTML、CSS和JavaScript来构建一个飞机大战游戏。 - 科学教育

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飞机大战游戏</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<script src="script.js"></script>
</body>
</html>

复制代码

/* styles.css */
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
}
canvas {
border: 1px solid #fff;
background-color: #333;
}

复制代码

// script.js
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const player = {
width: 50,
height: 50,
x: canvas.width / 2 - 25,
y: canvas.height - 60,
speed: 5,
dx: 0,
dy: 0
};
function drawPlayer() {
ctx.fillStyle = 'blue';
ctx.fillRect(player.x, player.y, player.width, player.height);
}
function clear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function newPos() {
player.x += player.dx;
player.y += player.dy;
// Boundary detection
if (player.x < 0) player.x = 0;
if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;
if (player.y < 0) player.y = 0;
if (player.y + player.height > canvas.height) player.y = canvas.height - player.height;
}
function update() {
clear();
drawPlayer();
newPos();
requestAnimationFrame(update);
}
function moveRight() {
player.dx = player.speed;
}
function moveLeft() {
player.dx = -player.speed;
}
function moveUp() {
player.dy = -player.speed;
}
function moveDown() {
player.dy = player.speed;
}
function keyDown(e) {
if (e.key === 'ArrowRight' || e.key === 'Right') {
moveRight();
} else if (e.key === 'ArrowLeft' || e.key === 'Left') {
moveLeft();
} else if (e.key === 'ArrowUp' || e.key === 'Up') {
moveUp();
} else if (e.key === 'ArrowDown' || e.key === 'Down') {
moveDown();
}
}
function keyUp(e) {
if (
e.key === 'ArrowRight' ||
e.key === 'Right' ||
e.key === 'ArrowLeft' ||
e.key === 'Left' ||
e.key === 'ArrowUp' ||
e.key === 'Up' ||
e.key === 'ArrowDown' ||
e.key === 'Down'
) {
player.dx = 0;
player.dy = 0;
}
}
document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);
update();

复制代码