<commit_before># vue-tetris

通过开发一款俄罗斯方块的小游戏，来了解webpack和vue的使用。

## 开发环境

1. 下载源代码
2. 安装依赖库，`npm i`
3. 安装Webpack，`npm i -g webpack`
4. 启动构建工具，`webpack --watch`

## 在线DEMO

https://ideatry.github.io/vue-tetris/build/index.html

## 运行游戏

直接用浏览器打开 /build/index.html 即可

## 游戏控制

*键盘操作*
```
左移：方向键`左`
右移：方向键`右`
变形：方向键`上`
加速：方向键`下`
```

*按钮操作*
```
左移：按钮`左`
右移：按钮`右`
变形：按钮`上`
加速：按钮`下`
```

*手势操作*
```
左移：左划
右移：右划
变形：上划
加速：下划
```


## 模块划分

1. tetris.vue      主界面
2. chessboard.vue  棋盘界面
3. handles.vue     按钮界面
4. score.vue       分数界面
5. shape.js        积木
6. shape.rotator   旋转工具

![ui-components](./doc/images/ui-compnents.png)

## 代码规范

a. 界面由Vue组件组合而成
```html
<template>
    <!-- 容器 -->
    <div class="game">
        
        <!-- 主界面 -->
        <chessboard class="main" v-ref:chessboard<commit_msg>修复图片路径错误<commit_after># vue-tetris

通过开发一款俄罗斯方块的小游戏，来了解webpack和vue的使用。

## 开发环境

1. 下载源代码
2. 安装依赖库，`npm i`
3. 安装Webpack，`npm i -g webpack`
4. 启动构建工具，`webpack --watch`

## 在线DEMO

https://ideatry.github.io/vue-tetris/build/index.html

## 运行游戏

直接用浏览器打开 /build/index.html 即可

## 游戏控制

*键盘操作*
```
左移：方向键`左`
右移：方向键`右`
变形：方向键`上`
加速：方向键`下`
```

*按钮操作*
```
左移：按钮`左`
右移：按钮`右`
变形：按钮`上`
加速：按钮`下`
```

*手势操作*
```
左移：左划
右移：右划
变形：上划
加速：下划
```


## 模块划分

1. tetris.vue      主界面
2. chessboard.vue  棋盘界面
3. handles.vue     按钮界面
4. score.vue       分数界面
5. shape.js        积木
6. shape.rotator   旋转工具

![ui-components](./doc/images/ui-components.png)

## 代码规范

a. 界面由Vue组件组合而成
```html
<template>
    <!-- 容器 -->
    <div class="game">
        
        <!-- 主界面 -->
        <chessboard class="main" v-ref:chessboard
{'fraction_non_alphanumeric': 0.1944792973651192, 'fraction_numerical': 0.012547051442910916, 'mean_word_length': 2.7885985748218527, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 11, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2418572', 'n_tokens_mistral': 990, 'n_tokens_neox': 1157, 'n_words': 141}