做淘宝用那些网站发货,小程序开发平台哪家产品好,it服务商,聚名网络科技大家好#xff01;今天我将分享如何使用 HTML 和 JavaScript 编写一个简单的飞机游戏。这个游戏的核心功能包括#xff1a;控制飞机移动、发射子弹、敌机生成、碰撞检测和得分统计。代码简洁易懂#xff0c;适合初学者学习和实践。
游戏功能概述 玩家控制#xff1a;使用键…大家好今天我将分享如何使用 HTML 和 JavaScript 编写一个简单的飞机游戏。这个游戏的核心功能包括控制飞机移动、发射子弹、敌机生成、碰撞检测和得分统计。代码简洁易懂适合初学者学习和实践。
游戏功能概述 玩家控制使用键盘的 ← 和 → 键控制飞机的左右移动按下 空格键 发射子弹。 敌机生成每隔 1 秒生成一个敌机敌机从屏幕顶部随机位置向下移动。 碰撞检测子弹击中敌机后敌机和子弹都会消失并增加 10 分如果玩家飞机与敌机碰撞游戏结束。 得分统计击中敌机后得分会显示在屏幕左上角。
实现步骤
1. HTML 结构
我们使用 canvas 元素作为游戏画布所有的游戏元素如飞机、子弹、敌机都将在画布上绘制。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title飞机游戏/titlestylebody {margin: 0;overflow: hidden;background-color: #000;}canvas {display: block;margin: 0 auto;background-color: #000;}/style
/head
bodycanvas idgameCanvas/canvasscript// JavaScript 代码将在下面实现/script
/body
/html
2. JavaScript 逻辑
JavaScript 部分负责实现游戏的核心逻辑包括玩家控制、敌机生成、碰撞检测和得分统计。
const canvas document.getElementById(gameCanvas);
const ctx canvas.getContext(2d);canvas.width 480;
canvas.height 640;// 飞机对象
const player {x: canvas.width / 2 - 25,y: canvas.height - 60,width: 50,height: 50,speed: 5,color: #00FF00,bullets: [],fire: function() {this.bullets.push({ x: this.x this.width / 2 - 2.5, y: this.y, width: 5, height: 10, color: #FF0000 });}
};// 敌机数组
const enemies [];// 得分
let score 0;// 监听键盘事件
document.addEventListener(keydown, (e) {if (e.code ArrowLeft player.x 0) {player.x - player.speed;}if (e.code ArrowRight player.x canvas.width - player.width) {player.x player.speed;}if (e.code Space) {player.fire();}
});// 生成敌机
function spawnEnemy() {const x Math.random() * (canvas.width - 50);enemies.push({ x: x, y: -50, width: 50, height: 50, color: #0000FF, speed: 2 });
}// 检测碰撞
function checkCollision(rect1, rect2) {return rect1.x rect2.x rect2.width rect1.x rect1.width rect2.x rect1.y rect2.y rect2.height rect1.y rect1.height rect2.y;
}// 更新游戏状态
function update() {// 移动子弹player.bullets.forEach((bullet, index) {bullet.y - 5;if (bullet.y 0) {player.bullets.splice(index, 1);}});// 移动敌机enemies.forEach((enemy, index) {enemy.y enemy.speed;if (enemy.y canvas.height) {enemies.splice(index, 1);}});// 检测子弹与敌机的碰撞player.bullets.forEach((bullet, bulletIndex) {enemies.forEach((enemy, enemyIndex) {if (checkCollision(bullet, enemy)) {player.bullets.splice(bulletIndex, 1);enemies.splice(enemyIndex, 1);score 10;}});});// 检测玩家与敌机的碰撞enemies.forEach((enemy, index) {if (checkCollision(player, enemy)) {alert(游戏结束得分 score);document.location.reload();}});
}// 绘制游戏元素
function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制玩家飞机ctx.fillStyle player.color;ctx.fillRect(player.x, player.y, player.width, player.height);// 绘制子弹ctx.fillStyle #FF0000;player.bullets.forEach(bullet {ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);});// 绘制敌机ctx.fillStyle #0000FF;enemies.forEach(enemy {ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);});// 绘制得分ctx.fillStyle #FFFFFF;ctx.font 20px Arial;ctx.fillText(得分: score, 10, 30);
}// 游戏主循环
function gameLoop() {update();draw();requestAnimationFrame(gameLoop);
}// 定时生成敌机
setInterval(spawnEnemy, 1000);// 启动游戏
gameLoop();
3. 运行游戏
将上述代码保存为一个 .html 文件然后在浏览器中打开即可运行游戏。你可以使用键盘控制飞机体验游戏的乐趣
扩展与优化
这个游戏是一个简单的示例你可以在此基础上进行扩展和优化例如 增加敌机类型添加不同速度和血量的敌机。 添加音效为子弹发射、击中敌机和游戏结束添加音效。 提升游戏难度随着时间推移逐渐增加敌机的生成速度和数量。 添加背景音乐为游戏增加背景音乐提升沉浸感。
总结
通过这个简单的飞机游戏项目你可以学习到如何使用 HTML 和 JavaScript 实现基本的游戏逻辑包括玩家控制、碰撞检测和动态生成游戏元素。希望这篇文章对你有所帮助也欢迎大家在评论区分享你的改进和优化建议
如果你对游戏开发感兴趣不妨尝试扩展这个项目或者基于此开发更多有趣的游戏 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title飞机游戏/titlestylebody {margin: 0;overflow: hidden;background-color: #000;}canvas {display: block;margin: 0 auto;background-color: #000;}/style
/head
bodycanvas idgameCanvas/canvasscriptconst canvas document.getElementById(gameCanvas);const ctx canvas.getContext(2d);canvas.width 480;canvas.height 640;// 飞机对象const player {x: canvas.width / 2 - 25,y: canvas.height - 60,width: 50,height: 50,speed: 5,color: #00FF00,bullets: [],fire: function() {this.bullets.push({ x: this.x this.width / 2 - 2.5, y: this.y, width: 5, height: 10, color: #FF0000 });}};// 敌机数组const enemies [];// 得分let score 0;// 监听键盘事件document.addEventListener(keydown, (e) {if (e.code ArrowLeft player.x 0) {player.x - player.speed;}if (e.code ArrowRight player.x canvas.width - player.width) {player.x player.speed;}if (e.code Space) {player.fire();}});// 生成敌机function spawnEnemy() {const x Math.random() * (canvas.width - 50);enemies.push({ x: x, y: -50, width: 50, height: 50, color: #0000FF, speed: 2 });}// 检测碰撞function checkCollision(rect1, rect2) {return rect1.x rect2.x rect2.width rect1.x rect1.width rect2.x rect1.y rect2.y rect2.height rect1.y rect1.height rect2.y;}// 更新游戏状态function update() {// 移动子弹player.bullets.forEach((bullet, index) {bullet.y - 5;if (bullet.y 0) {player.bullets.splice(index, 1);}});// 移动敌机enemies.forEach((enemy, index) {enemy.y enemy.speed;if (enemy.y canvas.height) {enemies.splice(index, 1);}});// 检测子弹与敌机的碰撞player.bullets.forEach((bullet, bulletIndex) {enemies.forEach((enemy, enemyIndex) {if (checkCollision(bullet, enemy)) {player.bullets.splice(bulletIndex, 1);enemies.splice(enemyIndex, 1);score 10;}});});// 检测玩家与敌机的碰撞enemies.forEach((enemy, index) {if (checkCollision(player, enemy)) {alert(游戏结束得分 score);document.location.reload();}});}// 绘制游戏元素function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制玩家飞机ctx.fillStyle player.color;ctx.fillRect(player.x, player.y, player.width, player.height);// 绘制子弹ctx.fillStyle #FF0000;player.bullets.forEach(bullet {ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);});// 绘制敌机ctx.fillStyle #0000FF;enemies.forEach(enemy {ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);});// 绘制得分ctx.fillStyle #FFFFFF;ctx.font 20px Arial;ctx.fillText(得分: score, 10, 30);}// 游戏主循环function gameLoop() {update();draw();requestAnimationFrame(gameLoop);}// 定时生成敌机setInterval(spawnEnemy, 1000);// 启动游戏gameLoop();/script
/body
/html
