DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

docs: update tutorial

This commit is contained in:
dntzhang 2019-08-15 10:01:47 +08:00
parent da226627e3
commit 58bccd798f
1 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
tutorial/kbone.md
View File

@ -327,6 +327,10 @@ export default TodoFooter
## 实战贪吃蛇
<img src="../assets/snake.jpg" width="400"/>
参考和使用了部分 [react-tetris](https://chvin.github.io/react-tetris/) 的样式。
### 领域模型设计
* 提取主要实体，比如（蛇、游戏）
@ -342,6 +346,12 @@ export default TodoFooter
* 蛇吃食物，游戏分数增加
* 食物消失，游戏负责再次生产食物
* 蛇撞墙或撞自身，游戏状态结束
* 核心循环设计
* 判断是否有食物，没有就生产一个(低帧率)
* 蛇与自身碰撞检测
* 蛇与障碍物碰撞检测
* 蛇与食物碰撞检测
* 蛇移动
### 使用代码描述蛇实体
@ -519,9 +529,29 @@ class Game {
}
```
<img src="../assets/snake.jpg" width="400"/>
可以看到上图使用了 16*16 的二维数组来存储蛇、食物、地图信息。蛇和食物占据的格子为 1，其余为 0。
```js
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]
```
参考和使用了部分 [react-tetris](https://chvin.github.io/react-tetris/) 的样式。
[→ 贪吃蛇源码](https://github.com/Tencent/omi/tree/master/packages/omi-kbone)