【源码】基于Vue和Vuex的俄罗斯方块游戏

项目简介

本项目基于Vue和Vuex框架开发俄罗斯方块游戏，受react - tetris启发，因开发者更青睐Vue，故采用Vue和Vuex实现。该游戏不仅具备基本玩法，还在体验和功能上做了优化，支持响应式操作、数据持久化，运用Web Audio Api提供丰富音效。

项目的主要特性和功能

特性

1. 响应式设计：支持屏幕自适应，能根据平台改变输入方式，PC 端用键盘，手机端用触摸操作。
2. 数据持久化：通过订阅store.subscribe，将游戏状态存于localStorage，重新打开可继续游戏。
3. 多语言支持：可在i18n.json中配置多语言环境，通过 URL 参数lan切换语言。
4. 音效丰富：借助 Web Audio Api，能精确、高频率播放音效，一个音效文件可实现多种效果。

功能

1. 游戏体验优化
   • 可自定义方向键触发频率。
   • 左右移动时能调节方块掉落速度，撞墙移动延迟稍小。
   • 按钮同时注册touchstart和mousedown事件，满足不同设备操作需求。
   • 监听visibilitychange事件，页面隐藏或切换时游戏暂停，切换回来继续。
   • 刷新网页可还原当前游戏状态。
   • 兼容性好，支持 Chrome、Firefox、IE9 +、Edge 等浏览器。
2. 游戏规则设定
   • 游戏开始前可指定初始棋盘（十个级别）和速度（六个级别）。
   • 消除不同行数对应不同分数，1 行 100 分、2 行 300 分、3 行 700 分、4 行 1500 分。
   • 方块掉落速度随消除行数增加而加快（每 20 行增加一个级别）。

安装使用步骤

安装依赖

在项目根目录下，打开终端并执行以下命令： npm install

运行项目

安装完成后，执行以下命令启动开发服务器： npm run dev 浏览器将自动打开 http://localhost:8080，即可开始游戏。

切换语言

在访问游戏页面时，可通过 URL 参数lan切换语言，例如： - 中文：http://localhost:8080/?lan=zh - 英文：http://localhost:8080/?lan=en

打包项目

若要将项目打包部署，执行以下命令： npm run build 打包后的文件将生成在dist文件夹中。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】