Skip to content

About

Use React, Redux, Immutable to code Tetris. 🎮

Resources

Stars

0 stars

Watchers

0 watching

Forks

 
 

Repository files navigation

react-tetris

React 俄罗斯方块,移动端优先,全手势拖拽操作。


操作方式

全屏幕统一手势(游戏开始后在棋盘上操作):

手势 效果
水平滑动 左右移动方块
轻力下拉 加速下落(软降)
大力下拉(≥60px) 直落(硬降)
点击 旋转(160ms 冷却)

游戏前:点击顶部起始行/速度数字可调整参数,🎨 图标选择背景主题,⚙️ 图标打开设置面板。


Fork 新增功能

  1. 全手势操作 — 移除物理按键区,棋盘上拖拽控制移动/下落,点击旋转
  2. 幽灵方块开关 — 落点灰色预览,可在设置面板中开关
  3. 背景主题切换 — 5 套预设配色 + 自定义背景图(src/resource/bg/ 放入图片即可)
  4. Web Audio BGM — 方波合成 Korobeiniki 主题曲
  5. 设置面板 — 音效开关、影子方块开关统一管理
  6. 紧凑布局 — 500px 容器、40px 格子
  7. 暂停遮罩 — 半透明遮罩 + "继续"恢复
  8. 操作提示 — 开始按钮下方呼吸动画提示

开发

安装

npm install

运行

npm start

浏览打开 http://localhost:8080/

多语言

i18n.json 配置,/?lan=en 切换语言

打包

npm run build

产物在 docs/ 目录。

自定义背景图

将图片放入 src/resource/bg/,构建后自动出现在主题对话框中。

技术栈

  • React 18 + Redux 4
  • Immutable.js 3.x
  • Vite 6
  • Less 4 (CSS Modules)
  • Web Audio API
  • CSS transform: scale() 响应式缩放

About

Use React, Redux, Immutable to code Tetris. 🎮

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages