# JSGame

**Repository Path**: upupupy/jsgame

## Basic Information

- **Project Name**: JSGame
- **Description**: js小游戏学习记录
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-03
- **Last Updated**: 2021-09-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript

## README

### 俄罗斯方块

1. 创建一个宽为200px，高位360px的背景容器
2. 在该容器上创建一个20*20的块元素
3. 控制该元素进行移动，每次移动20px
4. 将容器进行分割，分割为18行，10列，行高，列高均为20
5. 以16宫格为基准，定义L形状模型的4个方块位置
6. 控制该模型进行移动==》控制16宫格进行移动
7. 控制该模型进行旋转
8. 控制该模型只能在容器内移动
9. 当模型触底时，将块元素变成灰色固定在底部，同时生成一个新的模型
10. 判断块元素与块元素之间的碰撞，分为左碰撞和底部接触
11. 处理左右接触时的场景
12. 处理底部接触时的场景
13. 判断一行是否被铺满
14. 清理被铺满的一行
15. 被清理行之上的块元素下落
16. 判断游戏是否结束
17. 游戏结束弹框

#### 难点：

1. 容器分割，构建16宫格的概念
2. 观察块元素的位置变化，找出其中的规律
3. 判断块元素与块元素之间的碰撞
4. 判断一行被铺满的情况

### DOM Array Methods

1. 数组的`sort,map,filter,reduce`方法
2. 元素节点的增删改查
3. 使用了promise封装`ajax`请求

### 视频播放自定义控制播放条
1. `video`  媒体监听事件`onpause`,`onplay`,`ontimeupdate`
2. `video` 本身自带的方法 `video.play()`,`video.pause()`
3. `video` 相关属性 `currentTime(读写)`,`duration(只读)`;
4. `input type=range` 自定义进度条 先关属性`value,max,man,step`
5. `input` 监听事件`onchange`