更新记录

1.0.0（2026-02-04） 下载此版本

init

平台兼容性

uni-app x(4.84)

其他

高级射击游戏项目

这是一个基于Uniapp X框架开发的高级射击游戏组件项目，包含了丰富的游戏特性和现代化的游戏设计。

项目结构

game/
├── components/            # 组件目录
│   ├── advancedGame/      # 高级射击游戏组件
│   │   └── advancedGame.uvue # 高级射击游戏组件文件
├── pages/                # 页面目录
│   └── index/            # 首页
│       └── index.uvue    # 首页文件，使用了游戏组件
├── static/               # 静态资源目录
│   └── logo.png          # 项目Logo
├── unpackage/            # 打包输出目录
├── App.uvue              # 应用入口组件
├── index.html            # HTML入口文件
├── main.uts              # 应用入口脚本
├── manifest.json         # 项目配置文件
├── pages.json            # 页面配置文件
├── uni.scss              # 全局样式文件
└── README.md             # 项目说明文件

组件说明

高级射击游戏组件 (advancedGame)

功能特性

• 双模式控制：支持移动端触摸控制和PC键盘控制
• 动态场景滚动：角色移动时场景会自动滚动，模拟横版卷轴效果
• 多种敌人类型：包含基础敌人、快速敌人、坦克敌人和Boss敌人，每种敌人都有独特的AI行为
• 粒子效果系统：丰富的爆炸和击中效果，提升游戏视觉体验
• 道具系统：包含生命值、速度和火力三种道具，增强游戏策略性
• 完整的游戏UI：显示分数、生命值和最高分，提供直观的游戏状态反馈
• 游戏设置：支持自定义键盘控制、游戏难度、音效和粒子效果
• 本地存储：自动保存最高分和游戏设置
• 响应式设计：适配不同屏幕尺寸，在手机上可全屏展示

控制方式

触摸屏控制（移动设备）

• 使用左侧虚拟摇杆控制角色移动
• 点击右侧"射击"按钮发射子弹
• 游戏会自动适配屏幕尺寸，提供最佳游戏体验

键盘控制（电脑设备）

• 使用WASD键或方向键控制角色移动
• 按下空格键、K键或J键发射子弹（按住持续射击）
• 支持自定义键盘设置

游戏规则

• 消灭不同类型的敌人获得不同分数
• 角色与敌人碰撞会受到伤害，生命值为零时游戏结束
• 拾取道具可以获得生命值、速度提升或火力增强
• 游戏难度会影响敌人数量和生成频率
• 游戏会自动保存最高分记录

技术特点

• Uniapp X 框架：使用最新的Uniapp X技术栈，支持多平台部署
• UVue 组件：采用UVue语法，提升性能和开发效率
• TypeScript：使用TypeScript提供类型安全，减少开发错误
• Vue 3 Composition API：使用最新的Vue 3语法，代码结构清晰
• Canvas 渲染：使用Canvas API实现高性能游戏渲染
• 游戏引擎：自主实现的轻量级游戏引擎，包含游戏循环、碰撞检测等核心功能
• 敌人AI系统：实现了多种敌人行为模式，提升游戏趣味性
• 粒子效果系统：使用Canvas实现的粒子效果，提升游戏视觉体验
• 响应式设计：适配不同屏幕尺寸，在手机上可全屏展示
• 本地存储：使用localStorage存储游戏数据，支持跨会话持久化

快速开始

环境要求

• Node.js 14.0+
• npm 6.0+
• HBuilderX 3.7.0+（推荐使用最新版本）

安装依赖

npm install

运行项目

1. 在HBuilderX中运行

   • 打开HBuilderX
   • 导入项目
   • 点击运行按钮，选择运行到浏览器或模拟器

2. 命令行运行

# 运行开发服务器
npx uni-app dev

# 构建生产版本
npx uni-app build

组件使用方法

在页面中使用高级射击游戏组件

<template>
  <view class="page-container">
    <advanced-game />
  </view>
</template>

<script setup lang="uts">
  import advancedGame from '../../components/advancedGame/advancedGame.uvue';
</script>

<style scoped>
  .page-container {
    width: 100%;
    height: 100vh;
  }
</style>

游戏操作说明

高级射击游戏

1. 点击"开始游戏"按钮进入游戏
2. 使用虚拟摇杆或键盘控制角色移动
3. 点击射击按钮或按下对应键盘按键发射子弹
4. 消灭敌人获得分数
5. 拾取道具增强角色能力
6. 生命值为零时游戏结束
7. 点击"重新开始"按钮再次游戏
8. 点击"设置"按钮调整游戏参数

项目配置

manifest.json

• 配置了uni-app-x相关设置
• 配置了小程序平台的相关设置
• 配置了Vue版本为3

pages.json

• 配置了页面路由
• 配置了页面样式

开发说明

组件开发

• 组件采用Vue 3 Composition API编写
• 使用TypeScript提供类型安全
• 样式使用SCSS预处理器
• 组件支持响应式设计，适配不同屏幕尺寸

性能优化

• 使用requestAnimationFrame实现游戏循环，保证动画流畅度
• 合理使用Vue的响应式系统，避免不必要的重新渲染
• 实现对象池管理游戏对象，减少内存开销
• 在组件卸载时清理事件监听器和定时器，避免内存泄漏
• 优化Canvas渲染，减少绘制操作

浏览器兼容性

• 支持Chrome、Firefox、Safari、Edge等现代浏览器
• 支持移动设备的WebView
• 支持小程序平台（微信、支付宝、百度、头条等）

许可证

本项目采用MIT许可证，详见LICENSE文件。

贡献

欢迎提交Issue和Pull Request来改进这个项目！

联系方式

如果您有任何问题或建议，欢迎联系我们。

享受游戏的乐趣！ 🎮