飞机大战小游戏

1.视觉设计:

        采用柔和的蓝紫色渐变背景,营造梦幻感

        飞机、敌机和子弹使用柔和的糖果色调

        添加了粒子爆炸效果,增强视觉反馈

        星星收集物增加游戏趣味性

2.游戏机制:

        玩家使用左右方向键控制飞机移动

        空格键发射子弹

        P键暂停游戏

        击落敌机获得10分

        收集星星增加生命值

        碰撞敌机减少生命值

3.游戏元素:

        玩家飞机:三角形设计,带有尾焰效果

        敌机:随机大小和颜色的三角形

        子弹:圆形子弹带有尾迹

        星星:五角星形状,发光效果

        粒子:爆炸和收集时的粒子效果

4.UI界面:

        开始界面:游戏标题、操作说明和开始按钮

        游戏界面:顶部显示分数和生命值

        结束界面:显示最终得分和重新开始按钮

5.操作说明:

        使用键盘左右方向键(← →)控制飞机移动

        按空格键发射子弹

        收集星星可以增加生命值

        避免与敌机碰撞

        按P键可以暂停/继续游戏

6.截图展示:

7.代码重现:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>梦幻飞机大战</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: linear-gradient(135deg, #6e8efb, #a777e3);min-height: 100vh;display: flex;justify-content: center;align-items: center;overflow: hidden;color: #fff;}.game-container {position: relative;width: 800px;height: 600px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);border-radius: 15px;overflow: hidden;}#gameCanvas {background: linear-gradient(160deg, #1a2980, #26d0ce);width: 100%;height: 100%;display: block;}.game-ui {position: absolute;top: 0;left: 0;width: 100%;padding: 20px;display: flex;justify-content: space-between;}.ui-panel {background: rgba(255, 255, 255, 0.15);backdrop-filter: blur(10px);padding: 12px 25px;border-radius: 50px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);font-size: 1.2em;font-weight: 600;}.game-screen {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;background: rgba(26, 41, 128, 0.8);backdrop-filter: blur(5px);z-index: 10;transition: opacity 0.5s;}.start-screen {text-align: center;}.game-title {font-size: 4rem;margin-bottom: 20px;background: linear-gradient(45deg, #ff9a9e, #fad0c4);-webkit-background-clip: text;background-clip: text;color: transparent;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.game-instructions {max-width: 600px;margin: 25px auto;background: rgba(255, 255, 255, 0.1);padding: 20px;border-radius: 15px;line-height: 1.6;}.btn {background: linear-gradient(45deg, #ff9a9e, #fad0c4);border: none;color: #fff;padding: 15px 40px;font-size: 1.2rem;border-radius: 50px;margin-top: 20px;cursor: pointer;transition: all 0.3s;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}.btn:hover {transform: translateY(-3px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);}.game-over {display: none;}.final-score {font-size: 3rem;margin: 20px 0;color: #ff9a9e;}.particle {position: absolute;border-radius: 50%;background: rgba(255, 255, 255, 0.5);pointer-events: none;}.controls-info {display: flex;gap: 30px;margin: 20px 0;}.control-item {text-align: center;background: rgba(255, 255, 255, 0.1);padding: 15px;border-radius: 15px;width: 120px;}.key {display: inline-block;background: rgba(255, 255, 255, 0.2);padding: 8px 15px;border-radius: 8px;margin: 5px 0;font-weight: bold;}</style>
</head>
<body><div class="game-container"><canvas id="gameCanvas" width="800" height="600"></canvas><div class="game-ui"><div class="ui-panel">得分: <span id="score">0</span></div><div class="ui-panel">生命: <span id="lives">3</span></div></div><div class="game-screen start-screen" id="startScreen"><h1 class="game-title">梦幻飞机大战</h1><div class="game-instructions"><p>驾驶你的飞机,躲避敌机并消灭它们!</p><p>收集星星可以增加你的生命值,每击落一架敌机得10分!</p><div class="controls-info"><div class="control-item"><div class="key">←</div><div class="key">→</div><div>左右移动</div></div><div class="control-item"><div class="key">空格</div><div>发射子弹</div></div><div class="control-item"><div class="key">P</div><div>暂停游戏</div></div></div></div><button class="btn" id="startBtn">开始游戏</button></div><div class="game-screen game-over" id="gameOverScreen"><h1 class="game-title">游戏结束</h1><div class="final-score">得分: <span id="finalScore">0</span></div><button class="btn" id="restartBtn">再玩一次</button></div></div><script>// 获取Canvas和上下文const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');// 游戏状态const gameState = {score: 0,lives: 3,gameOver: false,paused: false};// 玩家飞机const player = {x: canvas.width / 2 - 25,y: canvas.height - 80,width: 50,height: 40,speed: 6,color: '#FFD166'};// 子弹数组let bullets = [];// 敌机数组let enemies = [];// 星星数组let stars = [];// 粒子数组let particles = [];// 按键状态const keys = {};// 初始化游戏function init() {gameState.score = 0;gameState.lives = 3;gameState.gameOver = false;bullets = [];enemies = [];stars = [];particles = [];updateUI();}// 更新UI显示function updateUI() {document.getElementById('score').textContent = gameState.score;document.getElementById('lives').textContent = gameState.lives;}// 绘制玩家飞机function drawPlayer() {ctx.save();// 飞机主体ctx.fillStyle = player.color;ctx.beginPath();ctx.moveTo(player.x + player.width/2, player.y);ctx.lineTo(player.x + player.width, player.y + player.height);ctx.lineTo(player.x, player.y + player.height);ctx.closePath();ctx.fill();// 飞机细节ctx.fillStyle = '#EF476F';ctx.fillRect(player.x + player.width/2 - 5, player.y + player.height/2, 10, 15);// 飞机机翼ctx.fillStyle = '#06D6A0';ctx.fillRect(player.x - 10, player.y + player.height - 15, 20, 10);ctx.fillRect(player.x + player.width - 10, player.y + player.height - 15, 20, 10);// 飞机火焰ctx.fillStyle = '#FF9A9E';ctx.beginPath();ctx.moveTo(player.x + player.width/2 - 10, player.y + player.height);ctx.lineTo(player.x + player.width/2 + 10, player.y + player.height);ctx.lineTo(player.x + player.width/2, player.y + player.height + 15);ctx.closePath();ctx.fill();ctx.restore();}// 绘制子弹function drawBullets() {for (let i = 0; i < bullets.length; i++) {const bullet = bullets[i];ctx.fillStyle = '#FFD166';ctx.beginPath();ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);ctx.fill();// 添加子弹尾迹ctx.fillStyle = 'rgba(255, 209, 102, 0.3)';ctx.beginPath();ctx.arc(bullet.x, bullet.y + 8, bullet.radius + 2, 0, Math.PI * 2);ctx.fill();}}// 绘制敌机function drawEnemies() {for (let i = 0; i < enemies.length; i++) {const enemy = enemies[i];// 敌机主体ctx.fillStyle = enemy.color;ctx.beginPath();ctx.moveTo(enemy.x, enemy.y);ctx.lineTo(enemy.x + enemy.width, enemy.y);ctx.lineTo(enemy.x + enemy.width/2, enemy.y + enemy.height);ctx.closePath();ctx.fill();// 敌机细节ctx.fillStyle = '#073B4C';ctx.fillRect(enemy.x + enemy.width/2 - 8, enemy.y + 5, 16, 10);}}// 绘制星星function drawStars() {for (let i = 0; i < stars.length; i++) {const star = stars[i];ctx.fillStyle = '#FFD166';ctx.beginPath();// 绘制五角星const spikes = 5;const outerRadius = star.radius;const innerRadius = star.radius / 2;let rotation = Math.PI / 2 * 3;let x = star.x;let y = star.y;let step = Math.PI / spikes;ctx.beginPath();ctx.moveTo(star.x, star.y - outerRadius);for (let i = 0; i < spikes; i++) {x = star.x + Math.cos(rotation) * outerRadius;y = star.y + Math.sin(rotation) * outerRadius;ctx.lineTo(x, y);rotation += step;x = star.x + Math.cos(rotation) * innerRadius;y = star.y + Math.sin(rotation) * innerRadius;ctx.lineTo(x, y);rotation += step;}ctx.lineTo(star.x, star.y - outerRadius);ctx.closePath();ctx.fill();// 添加星星发光效果ctx.fillStyle = 'rgba(255, 209, 102, 0.3)';ctx.beginPath();ctx.arc(star.x, star.y, star.radius + 3, 0, Math.PI * 2);ctx.fill();}}// 绘制粒子function drawParticles() {for (let i = 0; i < particles.length; i++) {const p = particles[i];ctx.globalAlpha = p.alpha;ctx.fillStyle = p.color;ctx.beginPath();ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);ctx.fill();ctx.globalAlpha = 1;}}// 创建粒子效果function createParticles(x, y, color, count) {for (let i = 0; i < count; i++) {particles.push({x: x,y: y,size: Math.random() * 3 + 1,speedX: Math.random() * 6 - 3,speedY: Math.random() * 6 - 3,color: color,alpha: Math.random() * 0.5 + 0.5,life: Math.random() * 30 + 20});}}// 更新粒子function updateParticles() {for (let i = 0; i < particles.length; i++) {const p = particles[i];p.x += p.speedX;p.y += p.speedY;p.life--;p.alpha = p.life / 50;if (p.life <= 0) {particles.splice(i, 1);i--;}}}// 生成敌机function spawnEnemy() {const width = Math.random() * 40 + 30;const enemy = {x: Math.random() * (canvas.width - width),y: -40,width: width,height: 30,speed: Math.random() * 2 + 1,color: `hsl(${Math.random() * 60 + 180}, 70%, 60%)`};enemies.push(enemy);}// 生成星星function spawnStar() {if (Math.random() < 0.01) {const star = {x: Math.random() * canvas.width,y: -20,radius: Math.random() * 8 + 5,speed: Math.random() * 2 + 1};stars.push(star);}}// 发射子弹function shoot() {bullets.push({x: player.x + player.width / 2,y: player.y,radius: 4,speed: 8});// 添加射击粒子效果createParticles(player.x + player.width/2, player.y, '#FF9A9E', 10);}// 更新子弹位置function updateBullets() {for (let i = 0; i < bullets.length; i++) {bullets[i].y -= bullets[i].speed;// 移除超出屏幕的子弹if (bullets[i].y < 0) {bullets.splice(i, 1);i--;}}}// 更新敌机位置function updateEnemies() {for (let i = 0; i < enemies.length; i++) {enemies[i].y += enemies[i].speed;// 移除超出屏幕的敌机if (enemies[i].y > canvas.height) {enemies.splice(i, 1);i--;gameState.lives--;updateUI();if (gameState.lives <= 0) {endGame();}}}}// 更新星星位置function updateStars() {for (let i = 0; i < stars.length; i++) {stars[i].y += stars[i].speed;// 移除超出屏幕的星星if (stars[i].y > canvas.height) {stars.splice(i, 1);i--;}}}// 碰撞检测function checkCollisions() {// 子弹与敌机碰撞for (let i = 0; i < bullets.length; i++) {for (let j = 0; j < enemies.length; j++) {const bullet = bullets[i];const enemy = enemies[j];if (bullet.x > enemy.x &&bullet.x < enemy.x + enemy.width &&bullet.y > enemy.y &&bullet.y < enemy.y + enemy.height) {// 添加爆炸粒子效果createParticles(enemy.x + enemy.width/2, enemy.y + enemy.height/2,enemy.color,30);bullets.splice(i, 1);enemies.splice(j, 1);i--;j--;gameState.score += 10;updateUI();break;}}}// 玩家与敌机碰撞for (let i = 0; i < enemies.length; i++) {const enemy = enemies[i];if (player.x < enemy.x + enemy.width &&player.x + player.width > enemy.x &&player.y < enemy.y + enemy.height &&player.y + player.height > enemy.y) {// 添加爆炸粒子效果createParticles(enemy.x + enemy.width/2, enemy.y + enemy.height/2,enemy.color,50);enemies.splice(i, 1);i--;gameState.lives--;updateUI();if (gameState.lives <= 0) {endGame();}}}// 玩家与星星碰撞for (let i = 0; i < stars.length; i++) {const star = stars[i];const dx = player.x + player.width/2 - star.x;const dy = player.y + player.height/2 - star.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < player.width/2 + star.radius) {// 添加收集粒子效果createParticles(star.x, star.y,'#FFD166',20);stars.splice(i, 1);i--;gameState.lives++;updateUI();}}}// 结束游戏function endGame() {gameState.gameOver = true;document.getElementById('finalScore').textContent = gameState.score;document.getElementById('gameOverScreen').style.display = 'flex';}// 绘制背景function drawBackground() {// 绘制渐变背景const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);gradient.addColorStop(0, '#1a2980');gradient.addColorStop(1, '#26d0ce');ctx.fillStyle = gradient;ctx.fillRect(0, 0, canvas.width, canvas.height);// 绘制星空效果ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';for (let i = 0; i < 50; i++) {const x = Math.random() * canvas.width;const y = Math.random() * canvas.height;const radius = Math.random() * 1.5;ctx.beginPath();ctx.arc(x, y, radius, 0, Math.PI * 2);ctx.fill();}}// 游戏循环function gameLoop() {if (gameState.gameOver || gameState.paused) return;// 清除画布drawBackground();// 更新游戏对象updateBullets();updateEnemies();updateStars();updateParticles();// 生成新敌机和星星if (Math.random() < 0.02) spawnEnemy();spawnStar();// 检测碰撞checkCollisions();// 绘制游戏对象drawStars();drawEnemies();drawBullets();drawPlayer();drawParticles();// 玩家移动if (keys['ArrowLeft'] && player.x > 0) {player.x -= player.speed;}if (keys['ArrowRight'] && player.x < canvas.width - player.width) {player.x += player.speed;}requestAnimationFrame(gameLoop);}// 事件监听document.getElementById('startBtn').addEventListener('click', () => {document.getElementById('startScreen').style.display = 'none';init();gameLoop();});document.getElementById('restartBtn').addEventListener('click', () => {document.getElementById('gameOverScreen').style.display = 'none';init();gameLoop();});window.addEventListener('keydown', (e) => {keys[e.key] = true;// 空格键射击if (e.key === ' ' && !gameState.gameOver && !gameState.paused) {shoot();}// P键暂停if (e.key === 'p' || e.key === 'P') {gameState.paused = !gameState.paused;if (!gameState.paused && !gameState.gameOver) {gameLoop();}}});window.addEventListener('keyup', (e) => {keys[e.key] = false;});// 初始化UIupdateUI();</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/web/91591.shtml
繁体地址,请注明出处:http://hk.pswp.cn/web/91591.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 启动服务脚本

1. 创建命令文件# 创建可执行文件 touch 文件名称 例&#xff1a; touch stopServer.sh2. 命令文件授权# 授权文件可执行权限 chmod 777 文件名称 例&#xff1a; chmod 777 stopServer.sh3. 停止服务命令编写#!/bin/bash# 获取进程号 pidps -ef | grep -- /mnt/apache-tomcat-…

【华为机试】34. 在排序数组中查找元素的第一个和最后一个位置

文章目录34. 在排序数组中查找元素的第一个和最后一个位置描述示例 1&#xff1a;示例 2&#xff1a;示例 3&#xff1a;提示&#xff1a;解题思路算法分析问题本质分析双重二分查找详解左边界查找过程右边界查找过程算法流程图边界情况分析各种解法对比二分查找变种详解时间复…

【网络编程】WebSocket 实现简易Web多人聊天室

一、实现思路 Web端就是使用html JavaScript来实现页面&#xff0c;通过WebSocket长连接和服务器保持通讯&#xff0c;协议的payload使用JSON格式封装 服务端使用C配合第三方库WebSocket和nlonlohmann库来实现 二、Web端 2.1 界面显示 首先&#xff0c;使用html来设计一个…

AI 驱动、设施扩展、验证器强化、上线 EVM 测试网,Injective 近期动态全更新!

作为一个专注于金融应用、且具有高度可互操作性的高性能 Layer-1 区块链&#xff0c;Injective 自诞生以来便为开发者提供有即插即用的技术模块&#xff0c;以便开发者能够更好地搭建新一代 Web3 金融类应用。谈及项目发展的愿景和基本定位&#xff0c;创始团队曾提到希望 Inje…

Qt-----初识

1. 什么是Qt定义&#xff1a;Qt是一个跨平台的应用程序和用户界面框架&#xff0c;主要用于开发具有图形用户界面的应用程序&#xff0c;同时也支持非GUI程序的开发。 编程语言&#xff1a;主要使用C&#xff0c;但也提供了对Python&#xff08;PyQt&#xff09;、JavaScript&a…

理解微信体系中的 AppID、OpenID 和 UnionID

前言: 在开发微信相关的服务(如小程序,公众号,微信开放平台等)时,很多人都会接触到几个看起来相似但实际用途不同的额ID: AppiD, OpenID,UnionID. 搞清楚这三者的区别,是微信生态开发中的基本功,本文将从开发者视角触发,深入浅出地解释它们的关系,区别以及实际应用场景一.什么是…

FFmpeg,如何插入SEI自定义数据

FFmpeg&#xff0c;如何插入SEI自定义数据 一、什么是SEI&#xff1f; SEI&#xff08;Supplemental Enhancement Information&#xff0c;补充增强信息&#xff09;是H.264/H.265视频编码标准中的一种元数据载体&#xff0c;它允许在视频流中嵌入额外的信息&#xff0c;如时…

为什么分类任务偏爱交叉熵?MSE 为何折戟?

在机器学习的世界里&#xff0c;损失函数是模型的“指南针”——它定义了模型“好坏”的标准&#xff0c;直接决定了参数优化的方向。对于分类任务&#xff08;比如判断一张图片是猫还是狗&#xff09;&#xff0c;我们通常会选择交叉熵作为损失函数&#xff1b;而在回归任务&a…

[echarts]横向柱状图

前言 接到一个需求&#xff0c;需要展示一个横向的柱状图&#xff0c;按数量从大到小排序&#xff0c;并定时刷新 使用react配合echarts进行实现。 react引入echarts import React, { useEffect, useRef } from react; import * as echarts from echarts; import DeviceApi fro…

【开源项目】轻量加速利器 HubProxy 自建 Docker、GitHub 下载加速服务

​​引言​​ 如果你经常被 Docker 镜像拉取、GitHub 文件下载的龟速折磨&#xff0c;又不想依赖第三方加速服务&#xff08;担心稳定性或隐私&#xff09;&#xff0c;今天分享的 ​​HubProxy​​ 可能正是你需要的。这个开源工具用一行命令就能部署&#xff0c;以极低资源消…

java web jsp jstl练习

JSP 的学习。 核心功能模块 1. 源代码层 &#xff08; src &#xff09; HelloWorld &#xff1a;主程序入口领域模型 &#xff1a; domain 包含User.java和ceshi.java控制器 &#xff1a; servlet 包含登录验证和验证码相关ServletWeb表现层 &#xff08; web &#xff09; JS…

VSCode 完全指南:释放你的编码潜能

零、简介 在当今的软件开发领域&#xff0c;代码编辑器的选择至关重要&#xff0c;它就像是工匠手中的工具&#xff0c;直接影响着工作效率和成果质量。Visual Studio Code&#xff08;简称 VSCode&#xff09;自问世以来&#xff0c;迅速在全球开发者社区中崭露头角&#xff…

《n8n基础教学》第一节:如何使用编辑器UI界面

在本课中&#xff0c;你将学习如何操作编辑器界面。我们将浏览画布&#xff0c;向您展示每个图标的含义&#xff0c;以及在 n8n 中构建工作流程时在哪里可以找到您需要的东西。本课程基于 n8n 最新版本 。在其他版本中&#xff0c;某些用户界面可能有所不同&#xff0c;但这不会…

gcc g++ makefile CMakeLists.txt cmake make 的关系

gcc&#xff1a;C语言编译器g&#xff1a;C编译器makefile&#xff1a;定义编译规则、依赖关系和构建目标。可以手动编写&#xff0c;也可以由CMakeLists.txt生成cmake&#xff1a;读取CMakeLists.txt文件&#xff0c;生成Makefilemake&#xff1a;构建工具&#xff0c;执行Mak…

SFT 训练器

SFT 训练器 “训练时间到!” 我们现在终于可以创建一个监督微调训练器的实例了: trainer = SFTTrainer( model=model, processing_class=tokenizer, args=sft_config, train_dataset=dataset, )SFTTrainer 已经对数据集进行了预处理,因此我们可以深入查看,了解每个小批次…

Android Material Components 全面解析:打造现代化 Material Design 应用

引言 在当今移动应用开发领域&#xff0c;用户体验(UX)已成为决定应用成功与否的关键因素之一。Google推出的Material Design设计语言为开发者提供了一套完整的视觉、交互和动效规范&#xff0c;而Material Components for Android(MDC-Android)则是将这些设计理念转化为可重用…

Windows使用Powershell自动安装SqlServer2025服务器与SSMS管理工具

安装结果: 安装前准备: 1.下载mssql server 2025安装器 2.下载iso镜像 3.下载好SSMS安装程序,并放到iso同目录下 4.执行脚本开始自动安装

09 RK3568 Debian11 ES8388 模拟音频输出

1、设备树配置 确认自己的i2c,使用sdk带的驱动es8323 /SDK/kernel/sound/soc/codecs/es8323.c es8388_sound: es8388-sound {status = "okay";compatible = "rockchip,multicodecs-card"; rockchip,card-name = "rockchip,es8388-codec"; …

力扣-199.二叉树的右视图

题目链接 199.二叉树的右视图 class Solution {public List<Integer> rightSideView(TreeNode root) {List<Integer> res new ArrayList<>();Queue<TreeNode> queue new LinkedList<>();if (root null)return res;queue.offer(root);while …

Android Bitmap 完全指南:从基础到高级优化

在 Android 开发中&#xff0c;图像处理是一个核心且复杂的领域&#xff0c;而 Bitmap 作为 Android 中表示图像的基本单位&#xff0c;贯穿了从简单图片显示到复杂图像编辑的各个场景。然而&#xff0c;Bitmap 处理不当往往会导致应用性能下降、内存溢出&#xff08;OOM&#…