Skip to content

wangwendong1024/tetris

Repository files navigation

Tetris Game - Vue3 实现

这是一个使用 Vue3 开发的经典俄罗斯方块游戏,作为个人技术探索项目,特别针对华为 MateX5 典藏版等折叠屏设备进行了优化,包括 iPad Pro 9.7 寸屏幕。

项目背景

本项目是在失业期间,为了验证以下技术栈和工作流程而开发:

  • 🎨 Figma:用于UI设计和原型制作
  • 💻 Cursor:作为主要开发IDE
  • 🤖 Claude3.7:辅助代码生成和优化
  • 🖥️ MCP-Github:自建服务器和本地大模型支持
  • 🛠️ Vue3:前端框架选择

作为一个后端开发人员,这是我首次尝试完整的前端项目开发,旨在探索现代前端开发流程和技术。

项目特点

  • 🎮 经典俄罗斯方块玩法
  • 📱 完美适配华为 MateX5 典藏版内屏
  • 🍎 优化 iPad Pro 9.7 寸屏幕 Safari 浏览器体验
  • 🖥️ 支持 PC 和移动设备
  • 🎨 现代化 UI 设计
  • ⚡ 高性能实现
  • 🔄 自动保存游戏进度

技术挑战与解决方案

  1. 前端零基础

    • 使用 Figma 进行 UI 设计
    • 借助 Claude3.7 辅助代码生成
    • 通过 Cursor IDE 的智能提示快速学习 Vue3
  2. 设备适配

    • 针对华为 MateX5 典藏版内屏进行特别优化
    • 实现响应式布局,支持多种设备
  3. 性能优化

    • 使用 Vue3 的 Composition API 进行状态管理
    • 实现高效的碰撞检测算法
  4. 开发环境

    • 自建 MCP 服务器支持开发
    • 本地大模型辅助代码优化

华为 MateX5 典藏版最佳体验指南

为了在华为 MateX5 典藏版内屏上获得最佳游戏体验,请按照以下步骤设置:

  1. 打开华为浏览器
  2. 点击右下角菜单按钮
  3. 选择"桌面版网站"选项
  4. 确保屏幕旋转锁定关闭
  5. 将手机展开至全屏模式
  6. 建议横屏游玩以获得最佳视野

iPad Pro 9.7 寸屏幕优化指南

为了在 iPad Pro 9.7 寸屏幕上获得最佳游戏体验,请按照以下步骤设置:

  1. 使用 Safari 浏览器
  2. 建议横屏游玩
  3. 确保启用"请求桌面网站"选项
  4. 控制区域已针对 9.7 寸屏幕优化布局

项目设置

安装依赖

npm install

开发模式

npm run serve

生产环境构建

npm run build

代码检查与修复

npm run lint

项目结构

Customize configuration

See Configuration Reference.

技术栈

  • Vue3
  • Composition API
  • CSS3
  • Flexbox 布局
  • 响应式设计

未来计划

  • 添加多语言支持
  • 实现在线排行榜功能
  • 优化移动端操作体验
  • 增加更多游戏模式

特别感谢

  • 华为 MateX5 典藏版测试支持
  • iPad Pro 9.7 寸屏幕测试支持
  • Vue.js 开发团队
  • 经典俄罗斯方块游戏设计者

许可证

MIT License

反馈与建议

如果您在使用过程中遇到任何问题或有改进建议,请通过以下方式联系我:

支持与鼓励

如果您觉得这个应用对您有帮助,并且愿意支持我的持续开发,可以通过微信支付码给予赞赏:

微信支付码

您的支持将帮助我:

  • 持续改进和优化应用
  • 开发更多实用功能
  • 探索新的技术领域

无论是否赞赏,您的使用和反馈都是对我最大的鼓励!

感谢您的支持!

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published