# tetris

**Repository Path**: wjh4dev/tetris

## Basic Information

- **Project Name**: tetris
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 12
- **Created**: 2016-09-21
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# jsTetris - 网页 JavaScript 版俄罗斯方块

> jamesfancy (jamesfancy@126.com)

---


## 采用技术

- HTML5
- LESS
- JavaScript (ES2015) 

## 源码结构

| 目录/文件 | 说明 |
| -- | -- |
| `index.html` | 页面（唯一的页面） |
| `lib` | 第三方脚本库，通过 bower 管理 |
| `js` | 页面中引入的脚本，从 `app/src` 生成 |
| `css` | 页面中引入的样式表，从 `app/ess` 生成 |
| `app/` | 前端脚本和样式表源码 |
| `+ app/less` | 样式表源码 |
| `+ app/src` | 脚本源码 |

## 构建

虽然是前端，仍然采用了项目构建的思想，目标脚本和样式表通过构建生成。

所有前端源码都在 `app` 目录下，通过 gulp 工具构建，其中脚本部分使用了 webpack 和 babel，样式表使用 lessc。

页面中需要引入 jQuery 库。页面中引入的第三方库由 bower 管理，在 `lib` 目录下。

构建之前需要安装 [NodeJs 5+][nodejs]，之后需要通过 `npm` 安装 [gulp][gulp]、[webpack][webpack]、[less][less] 和 [bower][bower] 等工具

```bash
npm install -g gulp webpack less bower

cd lib
bower install

cd ..
cd app
gulp webpack
gulp less
```

## 运行

构建完成之后通过浏览器打开 `index.html`

## 操作

| 快捷键 | 功能 |
| --: | -- |
| `[UP]` | 方块旋转（顺时针） |
| `[LEFT]` | 向左移动 |
| `[RIGHT]` | 向右移动 |
| `[DOWN]` | 向下移动 |



[nodejs]: http://nodejs.org/
[gulp]: http://gulpjs.com/
[webpack]: https://webpack.github.io/
[less]: http://lesscss.org/
[bower]: https://bower.io/