#Qwen3 Coder挑战赛#

最近写代码跟喝水一样简单,特别是有了qwen-coder之后。

每天有2000次的请求机会根本用不完

安装命令

npm install -g @qwen-code/qwen-code@latest

登录就用github就行了

下面是我用qwen-code做的一个飞机大战的 小游戏,还是蛮完善的。

大概是这样做的,我先定技术栈框架,让qwen帮我生成一个框架,然后让他生成资源,资源其实就是svg来做的也就是他自己帮我画出来的。然后再具体写逻辑跟调节bug。

下面是源码地址:

yuandeshoulian/phaser-vue-game-plane: phaser+vue框架实现的一个飞机大战的小游戏

操作界面如图

# Qwen 代码分析 - phaser-vue-game

## 项目概述

这是一个名为"飞机大战"的网页游戏项目,使用 Phaser 3 进行游戏逻辑和渲染,配合 Vue 3 作为前端框架。游戏设计为纵向射击游戏,玩家控制飞机与敌人战斗,包含多个场景:加载界面、主游戏界面、商店、战斗和设置。

### 关键技术:
- **Vue 3** 配合 TypeScript
- **Phaser 3** 游戏引擎
- **Vite** 作为构建工具
- **TypeScript** 用于类型安全
- **ESLint** 用于代码检查

## 项目架构

项目遵循模块化架构,为不同游戏状态设置独立场景:
- **LoadingScene**: 处理游戏资源预加载,带进度条
- **MainScene**: 主游戏场景,包含玩家控制、敌人和子弹
- **ShopScene**: 虚拟商店,用于购买新飞机和升级
- **BattleScene**: 游戏战斗屏幕
- **SettingsScene**: 游戏设置和选项

游戏使用动态生成的 SVG 资源,在运行时转换为 PNG,实现高效资源管理,无需外部图像文件。

## 构建和运行

### 前置条件
- Node.js (推荐最新LTS版本)

### 设置命令
```bash
# 安装依赖
npm install

# 运行开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

# 运行 ESLint 检查代码错误
npm run lint

# 自动修复代码检查错误
npm run lint -- --fix
```

### 开发工作流
1. 游戏通过 Vite 的开发服务器提供服务
2. 源文件更改触发热重载
3. 所有游戏资源在加载场景中加载后才开始游戏
4. SVG 资源在加载时动态生成并转换为 PNG

## 开发规范

### 代码风格
- 严格使用 TypeScript,启用 `strict`、`noUnusedLocals` 和 `noUnusedParameters` 标志
- 使用 Vue 插件的 ESLint 强制代码质量
- 组件遵循 Vue 3 的组合式 API,使用 `<script setup>` 语法
- 所有游戏场景继承 Phaser.Scene 类

### 文件结构
- `/src` - 源代码目录
  - `/assets` - 游戏资源(如果添加了任何静态资源)
  - `/components` - Vue 组件
  - `/phaser` - Phaser 游戏场景和相关工具
    - `svgAssets.ts` - SVG 资源生成函数
    - `LoadingScene.ts` - 加载界面实现
    - `MainScene.ts` - 主游戏逻辑
    - `ShopScene.ts` - 商店功能
    - `BattleScene.ts` - 战斗场景
    - `SettingsScene.ts` - 设置场景

### 游戏资产管理
- 所有游戏资源(飞机、敌人、子弹、背景等)都从 SVG 代码动态生成
- SVG 资源在加载游戏时转换为 PNG 纹理
- 为不同游戏场景创建不同纹理(例如,商店飞机与游戏飞机)

## 主要特性

1. **动态资源生成** - 游戏资源从 SVG 代码生成,实现高效加载
2. **多游戏场景** - 加载、主游戏、商店、战斗和设置场景
3. **模块化架构** - 将游戏逻辑分离到单独的场景类中
4. **渐进式加载** - 带进度条的加载场景以改善用户体验
5. **响应式 UI** - 设计为在移动设备上运行,分辨率为 360x640
6. **类型安全** - 为所有游戏逻辑提供完整的 TypeScript 支持

## 重要文件

- `src/main.ts` - 应用入口点,初始化 Vue 和 Phaser
- `src/App.vue` - 主 Vue 组件,包含 Phaser 游戏容器
- `src/phaser/LoadingScene.ts` - 处理所有资产加载和准备
- `src/phaser/svgAssets.ts` - 包含所有 SVG 资源生成函数
- `vite.config.ts` - Vite 构建配置
- `package.json` - 项目依赖和脚本

## 游戏机制

该游戏是一个飞机射击游戏,具有以下功能:
- 玩家控制的飞机具有射击机制
- 敌人生成和 AI
- 增益道具以增强玩家能力
- 多场景游戏(加载、主游戏、商店等)
- 敌人被击败时的爆炸效果
- 用于购买新飞机和升级的商店系统

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐