开始
1. 创建一个宽为 200px
,高为 360px
的背景容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>俄罗斯方块</title>
<style>
.container {
position: relative;
width: 200px;
height: 360px;
background-color: #000;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
2. 在该容器上创建一个 20 * 20
的块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>俄罗斯方块</title>
<style>
.container {
position: relative;
width: 200px;
height: 360px;
background-color: #000;
}
.activity-model {
width: 20px;
height: 20px;
background-color: cadetblue;
border: 1px solid #eeeeee;
box-sizing: border-box;
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<div class="activity-model"></div>
</div>
</body>
</html>
3. 控制该元素的移动,每次移动 20px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>俄罗斯方块</title>
<style>
.container {
position: relative;
width: 200px;
height: 360px;
background-color: #000;
}
.activity-model {
width: 20px;
height: 20px;
background-color: cadetblue;
border: 1px solid #eeeeee;
box-sizing: border-box;
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<div class="activity-model"></div>
</div>
<script>
const STEP = 20
init()
function init() {
onKeyDown()
}
function onKeyDown() {
document.onkeydown = event => {
switch (event.keyCode) {
case 38:
move(0, -1)
break;
case 39:
move(1, 0)
break;
case 40:
move(0, 1)
break;
case 37:
move(-1, 0)
break;
default:
break;
}
}
}
function move(x, y) {
const activityModelEle = document.getElementsByClassName("activity-model")[0]
activityModelEle.style.top = parseInt(activityModelEle.style.top || 0) + y * STEP + "px"
activityModelEle.style.left = parseInt(activityModelEle.style.left || 0) + x * STEP + "px"
}
</script>
</body>
</html>
构建 L
形状的模型
1. 将容器进行分割,分割为 18
行,10
列。行高,列高均为20
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201221142302695.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdodWFuMTAyMA==,size_16,color_FFFFFF,t_70)
const STEP = 20
const ROW_COUNT = 18, COL_COUNT = 10
2. 以 16宫格
为基准,定义 L
形状的 4
个方块的位置
const ROW_COUNT = 18, COL_COUNT = 10
const MODELS = [
{
0: {
row: 2,
col: 0
},
1: {
row: 2,
col: 1
},
2: {
row: 2,
col: 2
},
3: {
row: 1,
col: 2
}
}]
3. 创建 L
型模型,根据 16
宫格中的数据将模型渲染到页面上
const ROW_COUNT = 18, COL_COUNT = 10
const MODELS = [
{
0: {
row: 2,
col: 0
},
1: {
row: 2,
col: 1
},
2: {
row: 2,
col: 2
},
3: {
row: 1,
col: 2
}
}]
let currentModel = {
}
init()
function init() {
createModel()
onKeyDown()
}
function createModel() {
currentModel = MODELS[0]
for (const key in currentModel) {
const divEle = document.createElement('div')
divEle.className = "activity-model"
document.getElementById("container").appendChild(divEle)
}
locationBlocks()
}
function locationBlocks() {
const eles = document.getElementsByClassName("activity-model")
for (let i = 0; i < eles.length; i++) {
const activityModelEle = eles[i]
const blockModel = currentModel[i]
activityModelEle.style.top = blockModel.row * STEP + "px"
activityModelEle.style.left = blockModel.col * STEP + "px"
}
}
控制该模型进行移动
function locationBlocks() {
const eles = document.getElementsByClassName("activity-model")
for (let i = 0; i < eles.length; i++) {
const activityModelEle = eles[i]
const blockModel = currentModel[i]
activityModelEle.style.top = (currentY + blockModel.row) * STEP + "px"
activityModelEle.style.left = (currentX + blockModel.col) * STEP + "px"
}
}
function move(x, y) {
currentX += x
currentY += y
locationBlocks()
}
控制模型旋转
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201221144605778.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdodWFuMTAyMA==,size_16,color_FFFFFF,t_70)
规律
- 以 16宫格 的中心点为基准进行旋转
- 观察上图中旋转后每个块元素发生的位置的变化
- 以第1,2个L模型为例,可以观察到:
- 块元素1的坐标(列, 行)变化:(0, 2) -> (1, 0)
- 块元素2的坐标(列, 行)变化:(1, 2) -> (1, 1)
- 块元素3的坐标(列, 行)变化:(2, 2) -> (1, 2)
- 块元素4的坐标(列, 行)变化:(2, 1) -> (2, 2)
- …
- 其基本变化规律是
移动后的行 = 移动前的列
移动后的列 = 3 - 移动前的行
旋转模型
function onKeyDown() {
document.onkeydown = event => {
switch (event.keyCode) {
case 38:
rotate()
break;
case 39:
move(1, 0)