Use html to write a plane war game, shoot in space, move left and right. Put in the txt file and change the suffix to html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>飞机大战</title>
<style>
/*设置画布大小和背景*/
canvas {
background-color: #000;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
// 获取canvas元素和上下文
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 定义游戏相关变量
var score = 0;
var lives = 3;
var player = {
x: canvas.width / 2,
y: canvas.height - 50,
speed: 5,
width: 50,
height: 50,
shootSpeed: 10
};
var bullets = [];
var enemies = [];
// 创建玩家飞机
function drawPlayer() {
ctx.fillStyle = "#fff";
ctx.fillRect(player.x, player.y, player.width, player.height);
}
// 移动玩家飞机
function movePlayer(direction) {
if (direction === "left" && player.x > 0) {
player.x -= player.speed;
} else if (direction === "right" && player.x < canvas.width - player.width) {
player.x += player.speed;
}
}
// 发射子弹
function shoot() {
bullets.push({
x: player.x + player.width / 2,
y: player.y,
radius: 5,
speed: player.shootSpeed
});
}
// 创建敌人飞机
function createEnemy() {
enemies.push({
x: Math.random() * (canvas.width - 50),
y: -50,
width: 50,
height: 50,
speed: Math.random() * 2 + 1
});
}
// 绘制敌人飞机
function drawEnemies() {
ctx.fillStyle = "#f00";
for (var i = 0; i < enemies.length; i++) {
ctx.fillRect(enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height);
}
}
// 移动敌人飞机
function moveEnemies() {
for (var i = 0; i < enemies.length; i++) {
enemies[i].y += enemies[i].speed;
}
}
// 碰撞检测
function checkCollisions() {
for (var i = 0; i < enemies.length; i++) {
for (var j = 0; j < bullets.length; j++) {
if (bullets[j].x + bullets[j].radius > enemies[i].x &&
bullets[j].x - bullets[j].radius < enemies[i].x + enemies[i].
width &&
bullets[j].y + bullets[j].radius > enemies[i].y &&
bullets[j].y - bullets[j].radius < enemies[i].y + enemies[i].height) {
enemies.splice(i, 1);
bullets.splice(j, 1);
score += 10;
}
}
if (player.x + player.width > enemies[i].x &&
player.x < enemies[i].x + enemies[i].width &&
player.y + player.height > enemies[i].y &&
player.y < enemies[i].y + enemies[i].height) {
enemies.splice(i, 1);
lives--;
if (lives === 0) {
endGame();
}
}
}
}
// 绘制得分和生命值
function drawHUD() {
ctx.fillStyle = "#fff";
ctx.font = "24px Arial";
ctx.fillText("Score: " + score, 10, 30);
ctx.fillText("Lives: " + lives, canvas.width - 100, 30);
}
// 游戏结束
function endGame() {
clearInterval(gameLoop);
alert("Game Over");
}
// 游戏循环
var gameLoop = setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 移动玩家飞机
drawPlayer();
moveEnemies();
drawEnemies();
movePlayer();
checkCollisions();
drawHUD();
// 创建敌人飞机
if (Math.random() < 0.05) {
createEnemy();
}
// 移动子弹
for (var i = 0; i < bullets.length; i++) {
bullets[i].y -= bullets[i].speed;
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.arc(bullets[i].x, bullets[i].y, bullets[i].radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
}, 30);
// 键盘事件监听
document.addEventListener("keydown", function(event) {
if (event.keyCode === 37) {
movePlayer("left");
} else if (event.keyCode === 39) {
movePlayer("right");
} else if (event.keyCode === 32) {
shoot();
}
});
</script>
</body>
</html>