【js小游戏&案例】纯前端实现飞机大战，附带源码
发布人：shili8
发布时间：2025-02-25 23:25
阅读次数：0
**纯前端实现飞机大战**
在本文中，我们将使用JavaScript和HTML/CSS来实现一个简单的飞机大战游戏。这个游戏将包括两个玩家，分别控制着一架飞机，每个玩家都有自己的生命值和分数。
### 游戏规则* 玩家1（蓝色飞机）和玩家2（红色飞机）都会从左边和右边的起点出发。
* 每个玩家都有一个生命值，初始为100。
* 当两个玩家的飞机相撞时，会导致对方的生命值减少10。
* 玩家可以通过点击鼠标来控制自己的飞机上下移动。
* 游戏结束条件是其中一方的生命值降至0。
### HTML结构
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飞机大战</title>
<style>
/* CSS样式 */
canvas {
border:1px solid black;
}
.player1 {
position: absolute;
top:50%;
left:10px;
transform: translateY(-50%);
}
.player2 {
position: absolute;
top:50%;
right:10px;
transform: translateY(-50%);
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div class="player1">
<img src="blue-plane.png" alt="蓝色飞机">
</div>
<div class="player2">
<img src="red-plane.png" alt="红色飞机">
</div>
<script src="game.js"></script>
</body>
</html>
### JavaScript代码
javascript// 获取画布元素const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 设置画布的背景颜色和尺寸canvas.style.background = 'lightgray';
canvas.width =800;
canvas.height =600;
// 定义玩家1和玩家2的初始位置、速度和生命值let player1X =50, player1Y = canvas.height /2 -25;
let player2X = canvas.width -50, player2Y = canvas.height /2 -25;
let player1Speed =5, player2Speed =5;
let player1Life =100, player2Life =100;
// 定义碰撞检测函数function checkCollision(player1X, player1Y, player2X, player2Y) {
// 检查两个玩家的飞机是否相撞 if (Math.abs(player1X - player2X) < 50 && Math.abs(player1Y - player2Y) < 50) {
return true;
}
return false;
}
// 定义游戏循环函数function gameLoop() {
// 清除画布 ctx.clearRect(0,0, canvas.width, canvas.height);
// 绘制玩家1和玩家2的飞机 ctx.drawImage(document.querySelector('.player1 img'), player1X -25, player1Y -25);
ctx.drawImage(document.querySelector('.player2 img'), player2X -25, player2Y -25);
// 检查碰撞并更新生命值 if (checkCollision(player1X, player1Y, player2X, player2Y)) {
player1Life -=10;
player2Life -=10;
}
// 绘制玩家1和玩家2的生命值 ctx.font = '24px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.fillText(`玩家1生命值:${player1Life}`,10,30);
ctx.textAlign = 'right';
ctx.fillText(`玩家2生命值:${player2Life}`, canvas.width -10,30);
// 检查游戏结束条件 if (player1Life <=0 || player2Life <=0) {
alert('游戏结束!');
return false;
}
// 更新玩家1和玩家2的位置 player1X += player1Speed;
player2X -= player2Speed;
// 检查玩家是否超出画布边界 if (player1X < 0 || player1X > canvas.width) {
player1Speed = -player1Speed;
}
if (player2X < 0 || player2X > canvas.width) {
player2Speed = -player2Speed;
}
// 请求下一帧 requestAnimationFrame(gameLoop);
}
// 开始游戏循环gameLoop();
### 总结在本文中，我们使用JavaScript和HTML/CSS来实现了一个简单的飞机大战游戏。玩家可以通过点击鼠标来控制自己的飞机上下移动，游戏结束条件是其中一方的生命值降至0。这个游戏循环函数每帧都会清除画布、绘制玩家1和玩家2的飞机、检查碰撞并更新生命值、绘制玩家1和玩家2的生命值，并请求下一帧。
### 附注* 这个游戏循环函数每帧都会清除画布，这可能会导致性能问题。如果需要优化，可以考虑使用缓存来减少重绘次数。
* 检查碰撞并更新生命值的逻辑可以进一步优化，例如使用位图或其他高效算法来实现。
* 绘制玩家1和玩家2的生命值时，可以使用更好的字体和颜色来提高可读性。
粤公网安备 44011102002787号