js实现简单的俄罗斯方块小游戏-猿圈-程序猿的知识社区

js实现简单的俄罗斯方块小游戏

开始

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`

// 常量
// 每次移动的距离 步长
const STEP = 20
// 分割容器
// 18行 10列
const ROW_COUNT = 18, COL_COUNT = 10

2. 以 `16宫格` 为基准，定义 `L` 形状的 `4` 个方块的位置

// 分割容器
// 18行 10列
const ROW_COUNT = 18, COL_COUNT = 10
// 创建每个模型的数据源
const MODELS = [
  // 第1个模型数据源(L型)
  {
    0: {
      row: 2,
      col: 0
    },
    1: {
      row: 2,
      col: 1
    },
    2: {
      row: 2,
      col: 2
    },
    3: {
      row: 1,
      col: 2
    }
  }]

3. 创建 `L` 型模型，根据 `16` 宫格中的数据将模型渲染到页面上

// 分割容器
// 18行 10列
const ROW_COUNT = 18, COL_COUNT = 10
// 创建每个模型的数据源
const MODELS = [
  // 第1个模型数据源(L型)
  {
    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() {
  // 1 拿到所有的块元素
  const eles = document.getElementsByClassName("activity-model")
  for (let i = 0; i < eles.length; i++) {
    // 单个块元素
    const activityModelEle = eles[i]
    // 2 找到每个块元素对应的数据 (行、列)
    const blockModel = currentModel[i]
    // 3 根据每个块元素对应的数据来指定块元素的位置
    activityModelEle.style.top = blockModel.row * STEP + "px"
    activityModelEle.style.left = blockModel.col * STEP + "px"
  }
}

控制该模型进行移动

本质是控制 16 宫格进行移动

// 根据数据源定位块元素的位置
function locationBlocks() {
  // 1 拿到所有的块元素
  const eles = document.getElementsByClassName("activity-model")
  for (let i = 0; i < eles.length; i++) {
    // 单个块元素
    const activityModelEle = eles[i]
    // 2 找到每个块元素对应的数据 (行、列)
    const blockModel = currentModel[i]
    // 3 根据每个块元素对应的数据来指定块元素的位置
    // 每个块元素的位置由2个值确定：
    //  a. 16 宫格所在的位置
    //  b. 块元素在 16 宫格中的位置 
    activityModelEle.style.top = (currentY + blockModel.row) * STEP + "px"
    activityModelEle.style.left = (currentX + blockModel.col) * STEP + "px"
  }
}

// 移动
function move(x, y) {
  // 控制16宫格元素进行移动
  currentX += x
  currentY += y
  // 根据16宫格的位置来重新定位块元素
  locationBlocks()
}

控制模型旋转

规律

以 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: // 上
        // move(0, -1)
        rotate()
        break;
      case 39: // 右
        move(1, 0)
        break;
      case 40: // 下
        move(0, 1)
        break;
      case 37: // 左
        move(-1, 0)
        break;
      default:
        break;
    }
  }
}

// 旋转模型
function rotate() {
  // 算法
  // 旋转后的行 = 旋转前的列
  // 旋转后的列 = 3 - 旋转前的行

  // 遍历模型数据源
  for (const key in currentModel) {
    // 块元素的数据
    const blockModel = currentModel[key]
    // 实现算法
    let temp = blockModel.row
    blockModel.row = blockModel.col
    blockModel.col = 3 - temp
  }
  locationBlocks()
}

控制模型只在容器中移动

// 根据数据源定位块元素的位置
function locationBlocks() {
  // 判断一下块元素的越界行为
  checkBound()
  // 1 拿到所有的块元素
  const eles = document.getElementsByClassName("activity-model")
  for (let i = 0; i < eles.length; i++) {
    // 单个块元素
    const activityModelEle = eles[i]
    // 2 找到每个块元素对应的数据 (行、列)
    const blockModel = currentModel[i]
    // 3 根据每个块元素对应的数据来指定块元素的位置
    // 每个块元素的位置由2个值确定：
    //  a. 16 宫格所在的位置
    //  b. 块元素在 16 宫格中的位置 
    activityModelEle.style.top = (currentY + blockModel.row) * STEP + "px"
    activityModelEle.style.left = (currentX + blockModel.col) * STEP + "px"
  }
}

// 控制模型只能在容器中
function checkBound() {
  // 定义模型可以活动的边界
  let leftBound = 0, rightBound = COL_COUNT, bottomBound = ROW_COUNT
  // 当块元素超出了边界之后，让 16 宫格后退1格
  for (const key in currentModel) {
    // 块元素的数据
    const blockModel = currentModel[key]
    // 左侧越界
    if ((blockModel.col + currentX) < 0) {
      currentX++
    }
    // 右侧越界
    if ((blockModel.col + currentX) >= rightBound) {
      currentX--
    }
    // 底部越界
    if ((blockModel.row + currentY) >= bottomBound) {
      currentY--
    }
  }
}

当模型触底时，将块元素变为`灰色`固定在底部，同时生成一个新的模型

声明样式类

.fixed-model {
  width: 20px;
  height: 20px;
  background-color: #fefefe;
  border: 1px solid #333333;
  box-sizing: border-box;
  position: absolute;
}

触底时固定，生成新模型

需要注意的是：当模型触底被固定后，我们需要重新再生成一个新的模型，再生成新模型的时候，需要重置 16宫格的位置，否则新创建的模型的位置会出现在底部，并将上一模型覆盖掉

// 根据模型使用的数据创建对应的块元素
function createModel() {
  // 确定当前使用哪一个模型
  currentModel = MODELS[0]
  // 重置16宫格的位置
  currentY = 0
  currentY = 0
  // 生成对应数量的块元素
  for (const key in currentModel) {
    const divEle = document.createElement('div')
    divEle.className = "activity-model"
    document.getElementById("container").appendChild(divEle)
  }
  // 定位块元素位置
  locationBlocks()
}

// 控制模型只能在容器中
function checkBound() {
  // 定义模型可以活动的边界
  let leftBound = 0, rightBound = COL_COUNT, bottomBound = ROW_COUNT
  // 当块元素超出了边界之后，让 16 宫格后退1格
  for (const key in currentModel) {
    // 块元素的数据
    const blockModel = currentModel[key]
    // 左侧越界
    if ((blockModel.col + currentX) < 0) {
      currentX++
    }
    // 右侧越界
    if ((blockModel.col + currentX) >= rightBound) {
      currentX--
    }
    // 底部越界
    if ((blockModel.row + currentY) >= bottomBound) {
      currentY--
      fixedBottomModel() // 把模型固定在底部
    }
  }
}

// 把模型固定在底部
function fixedBottomModel() {
  // 1 改变模型的样式
  // 2 禁止模型再进行移动
  const activityModelEles = document.getElementsByClassName('activity-model')
    ;[...activityModelEles].forEach((ele, i) => {
      // 更改块元素类名
      ele.className = "fixed-model"
      // 把该块元素放入变量中
      const blockModel = currentModel[i]
      fixedBlocks[`${currentY + blockModel.row}_${currentX + blockModel.col}`] = ele
    })
  // 3 创建新的模型
  createModel()
}

判断块元素与块元素之间的碰撞，分为`左右接触`和`底部接触`

记录所有块元素的位置

// 记录所有块元素的位置
// key=行_列 : V=块元素
const fixedBlocks = {}

当块元素被固定到底部的时候，将块元素存储在`fixedBlocks` 中

// 把模型固定在底部
function fixedBottomModel() {
  // 1 改变模型的样式
  // 2 禁止模型再进行移动
  const activityModelEles = document.getElementsByClassName('activity-model')
    ;[...activityModelEles].forEach((ele, i) => {
      // 更改块元素类名
      ele.className = "fixed-model"
      // 把该块元素放入变量中
      const blockModel = currentModel[i]
      fixedBlocks[`${currentY + blockModel.row}_${currentX + blockModel.col}`] = ele
    })
  // 3 创建新的模型
  createModel()
}

处理模型之间的碰撞(左右接触)

// 移动
function move(x, y) {
  // 16宫格移动
  if (isMeet(currentX + x, currentY + y, currentModel)) {
    return
  }
  currentX += x
  currentY += y
  // 根据16宫格的位置来重新定位块元素
  locationBlocks()
}

// 旋转模型
function rotate() {
  // 算法
  // 旋转后的行 = 旋转前的列
  // 旋转后的列 = 3 - 旋转前的行

  // 克隆一下 currentModel 深拷贝
  const cloneCurrentModel = JSON.parse(JSON.stringify(currentModel))

  // 遍历模型数据源
  for (const key in cloneCurrentModel) {
    // 块元素的数据
    const blockModel = cloneCurrentModel[key]
    // 实现算法
    let temp = blockModel.row
    blockModel.row = blockModel.col
    blockModel.col = 3 - temp
  }
  // 如果旋转之后会发生触碰，那么就不需要进行旋转了
  if (isMeet(currentX, currentY, cloneCurrentModel)) {
    return
  }
  // 接受了这次旋转
  currentModel = cloneCurrentModel
  locationBlocks()
}

// 判断模型之间的触碰问题
// x, y 表示16宫格《将要》移动的位置
// model 表示当前模型数据源《将要》完成的变化
function isMeet(x, y, model) {
  // 所谓模型之间的触碰，在一个固定的位置已经存在一个被固定的块元素时，那么
  // 活动中的模型不可以再占用该位置
  // 判断触碰，就是在判断活动中的模型《将要移动到的位置》是否已经存在被固定
  // 的块元素
  // 返回 true 表示将要移动到的位置会发生触碰 否则返回 false
  for (const key in model) {
    const blockModel = model[key]
    // 该位置是否已经存在块元素？
    if (fixedBlocks[`${y + blockModel.row}_${x + blockModel.col}`]) {
      return true
    }
  }
  return false
}

处理模型之间的碰撞(底部接触)

// 移动
function move(x, y) {
  if (isMeet(currentX + x, currentY + y, currentModel)) {
    // 底部的触碰发生在移动16宫格的时候，并且此次移动是因为 Y 轴的变化而引起的
    if (y != 0) {
      // 模型之间发生触碰了
      fixedBottomModel()
    }
    return
  }
  // 控制16宫格元素进行移动
  currentX += x
  currentY += y
  // 根据16宫格的位置来重新定位块元素
  locationBlocks()
}

处理被铺满的行

判断一行是否被铺满

// 把模型固定在底部
function fixedBottomModel() {
  // 1 改变模型的样式
  // 2 禁止模型再进行移动
  const activityModelEles = document.getElementsByClassName('activity-model')
    ;[...activityModelEles].forEach((ele, i) => {
      ele.className = "fixed-model"
      // 把该块元素放入变量中
      const blockModel = currentModel[i]
      fixedBlocks[`${currentY + blockModel.row}_${currentX + blockModel.col}`] = ele
    })
  // 判断某一行是否要清理
  isRemoveLine()
  // 3 创建新的模型
  createModel()
}

// 判断一行是否被铺满
function isRemoveLine() {
  // 在一行中，每一列都存在块元素，那么该行就需要被清理了
  // 遍历所有行中的所有列
  // 遍历所有行
  for (let i = 0; i < ROW_COUNT; i++) {
    // 标记符 假设当前行已经被铺满了
    let flag = true
    // 遍历当前行中的所有列
    for (let j = 0; j < COL_COUNT; j++) {
      // 如果当前行中有一列没有数据，那么就说明当前行没有被铺满
      if (!fixedBlocks[`${i}_${j}`]) {
        flag = false
        break
      }
    }
    if (flag) {
      //  该行已经被铺满了
      console.log("该行已经被铺满了")
    }
  }
}

清理被铺满的一行

function isRemoveLine() {
  // 在一行中，每一列都存在块元素，那么该行就需要被清理了
  // 遍历所有行中的所有列
  // 遍历所有行
  for (let i = 0; i < ROW_COUNT; i++) {
    // 标记符 假设当前行已经被铺满了
    let flag = true
    // 遍历当前行中的所有列
    for (let j = 0; j < COL_COUNT; j++) {
      // 如果当前行中有一列没有数据，那么就说明当前行没有被铺满
      if (!fixedBlocks[`${i}_${j}`]) {
        flag = false
        break
      }
    }
    if (flag) {
      //  该行已经被铺满了
      removeLine(i)
    }
  }
}

// 清理被铺满的这一行
function removeLine(line) {
  // 1 删除该行中所有的块元素
  // 2 删除该行所有块元素的数据源
  // 遍历该行中的所有列
  for (let i = 0; i < COL_COUNT; i++) {
    // 1 删除该行中所有的块元素
    document.getElementById("container").removeChild(fixedBlocks[`${line}_${i}`])
    // 2 删除该行所有块元素的数据源
    fixedBlocks[`${line}_${i}`] = null
  }
}

让被清理行之上的块元素下落

// 清理被铺满的这一行
function removeLine(line) {
  // 1 删除该行中所有的块元素
  // 2 删除该行所有块元素的数据源
  // 遍历该行中的所有列
  for (let i = 0; i < COL_COUNT; i++) {
    // 1 删除该行中所有的块元素
    document.getElementById("container").removeChild(fixedBlocks[`${line}_${i}`])
    // 2 删除该行所有块元素的数据源
    fixedBlocks[`${line}_${i}`] = null
  }
  downLine(line)
}

// 让被清理行之上的块元素下落
function downLine(line) {
  // 1 被清理行之上的所有块元素数据源所在行数 + 1
  // 2 让块元素在容器中的位置下落
  // 3 清理之前的块元素
  // 遍历被清理行之上的所有行
  for (let i = line - 1; i >= 0; i--) {
    // 该行中的所有列
    for (let j = 0; j < COL_COUNT; j++) {
      if (!fixedBlocks[`${i}_${j}`]) continue
      // 存在数据
      // 1 被清理行之上的所有块元素数据源所在行数 + 1
      fixedBlocks[`${i + 1}_${j}`] = fixedBlocks[`${i}_${j}`]
      // 2 让块元素在容器中的位置下落
      fixedBlocks[`${i + 1}_${j}`].style.top = (i + 1) * STEP + "px"
      // 3 清理之前的块元素
      fixedBlocks[`${i}_${j}`] = null
    }
  }
}

创建多种模型样式

定义模型样式

 // 创建每个模型的数据源
const MODELS = [
  // 第1个模型数据源(L型)
  {
    0: {
      row: 2,
      col: 0
    },
    1: {
      row: 2,
      col: 1
    },
    2: {
      row: 2,
      col: 2
    },
    3: {
      row: 1,
      col: 2
    }
  },
  // 第2个模型数据源(凸)
  {
    0: {
      row: 1,
      col: 1
    },
    1: {
      row: 0,
      col: 0
    },
    2: {
      row: 1,
      col: 0
    },
    3: {
      row: 2,
      col: 0
    }
  },
  // 第3个模型数据源(田)
  {
    0: {
      row: 1,
      col: 1
    },
    1: {
      row: 2,
      col: 1
    },
    2: {
      row: 1,
      col: 2
    },
    3: {
      row: 2,
      col: 2
    }
  },
  // 第4个模型数据源(一)
  {
    0: {
      row: 0,
      col: 0
    },
    1: {
      row: 0,
      col: 1
    },
    2: {
      row: 0,
      col: 2
    },
    3: {
      row: 0,
      col: 3
    }
  },
  // 第5个模型数据源(Z)
  {
    0: {
      row: 1,
      col: 1
    },
    1: {
      row: 1,
      col: 2
    },
    2: {
      row: 2,
      col: 2
    },
    3: {
      row: 2,
      col: 3
    }
  }
]

创建模型的时候随机选取不同的模型样式

// 根据模型使用的数据创建对应的块元素
function createModel() {
  // 确定当前使用哪一个模型
  const randow = Math.floor(Math.random() * MODELS.length) // 取0~4之间的随机数
  currentModel = MODELS[randow]
  // 重置16宫格的位置
  currentY = 0
  currentY = 0
  // 生成对应数量的块元素
  for (const key in currentModel) {
    const divEle = document.createElement('div')
    divEle.className = "activity-model"
    document.getElementById("container").appendChild(divEle)
  }
  // 定位块元素位置
  locationBlocks()
}

模型自动降落

// 定时器
let mInterval = null
    
// 根据模型使用的数据创建对应的块元素
function createModel() {
  // 确定当前使用哪一个模型
  // 确定当前使用哪一个模型
  const randow = Math.floor(Math.random() * MODELS.length) // 取0~4之间的随机数
  currentModel = MODELS[randow]
  // 重置16宫格的位置
  currentY = 0
  currentY = 0
  // 生成对应数量的块元素
  for (const key in currentModel) {
    const divEle = document.createElement('div')
    divEle.className = "activity-model"
    document.getElementById("container").appendChild(divEle)
  }
  // 定位块元素位置
  locationBlocks()
  // 模型自动下落
  autoDown()
}

// 让模型自动下落
function autoDown() {
  if (mInterval) {
    clearInterval(mInterval)
  }
  mInterval = setInterval(() => {
    move(0, 1)
  }, 600)
}

游戏结束

判断游戏结束

// 根据模型使用的数据创建对应的块元素
function createModel() {
  // 判断游戏是否结束
  if (isGameOver()) {
    console.log("游戏结束！")
    return
  }
  // 确定当前使用哪一个模型
  const randow = Math.floor(Math.random() * MODELS.length) // 取0~4之间的随机数
  currentModel = MODELS[randow]
  // 重置16宫格的位置
  currentY = 0
  currentY = 0
  // 生成对应数量的块元素
  for (const key in currentModel) {
    const divEle = document.createElement('div')
    divEle.className = "activity-model"
    document.getElementById("container").appendChild(divEle)
  }
  // 定位块元素位置
  locationBlocks()
  // 模型自动下落
  autoDown()
}

// 判断游戏结束
function isGameOver() {
  // 当第0行存在块元素的时候，表示游戏结束了
  for (let i = 0; i < COL_COUNT; i++) {
    if (fixedBlocks[`0_${i}`]) return true
  }
  return false
}

结束游戏

// 根据模型使用的数据创建对应的块元素
function createModel() {
  // 判断游戏是否结束
  if (isGameOver()) {
    gameOver() // 结束游戏
    return
  }
  // 确定当前使用哪一个模型
  const randow = Math.floor(Math.random() * MODELS.length) // 取0~4之间的随机数
  currentModel = MODELS[randow]
  // 重置16宫格的位置
  currentY = 0
  currentY = 0
  // 生成对应数量的块元素
  for (const key in currentModel) {
    const divEle = document.createElement('div')
    divEle.className = "activity-model"
    document.getElementById("container").appendChild(divEle)
  }
  // 定位块元素位置
  locationBlocks()
  // 模型自动下落
  autoDown()
}

// 结束掉游戏
function gameOver() {
  // 1 停止定时器
  if (mInterval) {
    clearInterval(mInterval)
  }
  // 2 弹出对话框
  alert("大吉大利，今晚吃鸡！")
}

扩展:计分 + 最高分 + 重新开始游戏

结构 + 样式

body {
  display: flex;
}
#scores {
  margin-left: 20px;
}

<!-- 背景容器 -->
<div id="container" class="container">
  <!-- 块元素 -->
  <!-- <div class="activity-model"></div> -->
</div>
<div id="scores">
  <p>最高分：<span id="max-score">0</span></p>
  <p>分数：<span id="current-score">0</span></p>
  <button onclick="reset()">重新开始</button>
</div>

逻辑

// 最高分
let maxScore = 0
// 当前分数
let score = 0

// 清理被铺满的这一行
function removeLine(line) {
  // 1 删除该行中所有的块元素
  // 2 删除该行所有块元素的数据源
  // 遍历该行中的所有列
  for (let i = 0; i < COL_COUNT; i++) {
    // 1 删除该行中所有的块元素
    document.getElementById("container").removeChild(fixedBlocks[`${line}_${i}`])
    // 2 删除该行所有块元素的数据源
    fixedBlocks[`${line}_${i}`] = null
  }
  // 更新当前分数
  score += COL_COUNT
  document.getElementById("current-score").innerHTML = score
  downLine(line)
}
    
// 结束掉游戏
function gameOver() {
  // 1 停止定时器
  if (mInterval) {
    clearInterval(mInterval)
  }
  //  重置最高分数
  maxScore = Math.max(maxScore, score)
  document.getElementById("max-score").innerHTML = maxScore
  // 2 弹出对话框
  alert("大吉大利，今晚吃鸡！")
}

// 重新开始
function reset() {
  const container = document.getElementById("container")
  const childs = container.childNodes;
  for (let i = childs.length - 1; i >= 0; i--) {
    container.removeChild(childs[i]);
  }
  fixedBlocks = {}
  score = 0
  document.getElementById("current-score").innerHTML = score
  init()
}

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>俄罗斯方块</title>
  <style>
    body {
      display: flex;
    }

    .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;
    }

    .fixed-model {
      width: 20px;
      height: 20px;
      background-color: #fefefe;
      border: 1px solid #333333;
      box-sizing: border-box;
      position: absolute;
    }

    #scores {
      margin-left: 20px;
    }
  </style>
</head>

<body>
  <!-- 背景容器 -->
  <div id="container" class="container">
    <!-- 块元素 -->
    <!-- <div class="activity-model"></div> -->
  </div>
  <div id="scores">
    <p>最高分：<span id="max-score">0</span></p>
    <p>分数：<span id="current-score">0</span></p>
    <button onclick="reset()">重新开始</button>
  </div>
  <script>
    // 常量
    // 每次移动的距离 步长
    const STEP = 20
    // 分割容器
    // 18行 10列
    const ROW_COUNT = 18, COL_COUNT = 10
    // 创建每个模型的数据源
    const MODELS = [
      // 第1个模型数据源(L型)
      {
        0: {
          row: 2,
          col: 0
        },
        1: {
          row: 2,
          col: 1
        },
        2: {
          row: 2,
          col: 2
        },
        3: {
          row: 1,
          col: 2
        }
      },
      // 第2个模型数据源(凸)
      {
        0: {
          row: 1,
          col: 1
        },
        1: {
          row: 0,
          col: 0
        },
        2: {
          row: 1,
          col: 0
        },
        3: {
          row: 2,
          col: 0
        }
      },
      // 第3个模型数据源(田)
      {
        0: {
          row: 1,
          col: 1
        },
        1: {
          row: 2,
          col: 1
        },
        2: {
          row: 1,
          col: 2
        },
        3: {
          row: 2,
          col: 2
        }
      },
      // 第4个模型数据源(一)
      {
        0: {
          row: 0,
          col: 0
        },
        1: {
          row: 0,
          col: 1
        },
        2: {
          row: 0,
          col: 2
        },
        3: {
          row: 0,
          col: 3
        }
      },
      // 第5个模型数据源(Z)
      {
        0: {
          row: 1,
          col: 1
        },
        1: {
          row: 1,
          col: 2
        },
        2: {
          row: 2,
          col: 2
        },
        3: {
          row: 2,
          col: 3
        }
      }
    ]
    // 变量
    // 当前使用的模型
    let currentModel = {}
    // 标记16宫格的位置
    let currentX = 0, currentY = 0
    // 记录所有块元素的位置
    // key=行_列 : V=块元素
    let fixedBlocks = {}
    // 定时器
    let mInterval = null
    // 最高分
    let maxScore = 0
    // 当前分数
    let score = 0
    // 入口方法
    function init() {
      createModel()
      onKeyDown()
    }

    init()

    // 根据模型使用的数据创建对应的块元素
    function createModel() {
      // 判断游戏是否结束
      if (isGameOver()) {
        gameOver()
        return
      }
      // 确定当前使用哪一个模型
      const randow = Math.floor(Math.random() * MODELS.length) // 取0~4之间的随机数
      currentModel = MODELS[randow]
      // 重置16宫格的位置
      currentY = 0
      currentY = 0
      // 生成对应数量的块元素
      for (const key in currentModel) {
        const divEle = document.createElement('div')
        divEle.className = "activity-model"
        document.getElementById("container").appendChild(divEle)
      }
      // 定位块元素位置
      locationBlocks()
      // 模型自动下落
      autoDown()
    }

    // 根据数据源定位块元素的位置
    function locationBlocks() {
      // 判断一些块元素的越界行为
      checkBound()
      // 1 拿到所有的块元素
      const eles = document.getElementsByClassName("activity-model")
      for (let i = 0; i < eles.length; i++) {
        // 单个块元素
        const activityModelEle = eles[i]
        // 2 找到每个块元素对应的数据 (行、列)
        const blockModel = currentModel[i]
        // 3 根据每个块元素对应的数据来指定块元素的位置
        // 每个块元素的位置由2个值确定：
        //  1 16 宫格所在的位置
        //  2 块元素在 16 宫格中的位置 
        activityModelEle.style.top = (currentY + blockModel.row) * STEP + "px"
        activityModelEle.style.left = (currentX + blockModel.col) * STEP + "px"
      }
    }

    // 监听用户键盘事件
    function onKeyDown() {
      document.onkeydown = event => {
        switch (event.keyCode) {
          case 38:
            // move(0, -1)
            rotate()
            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"
      // 16宫格移动
      if (isMeet(currentX + x, currentY + y, currentModel)) {
        // 底部的触碰发生在移动16宫格的时候，并且此次移动是因为 Y 轴的变化而引起的
        if (y != 0) {
          // 模型之间发生触碰了
          fixedBottomModel()
        }
        return
      }
      currentX += x
      currentY += y
      // 根据16宫格的位置来重新定位块元素
      locationBlocks()
    }
    // 旋转模型
    function rotate() {
      // 算法
      // 旋转后的行 = 旋转前的列
      // 旋转后的列 = 3 - 旋转前的行

      // 克隆一下 currentModel 深拷贝
      const cloneCurrentModel = JSON.parse(JSON.stringify(currentModel))

      // 遍历模型数据源
      for (const key in cloneCurrentModel) {
        // 块元素的数据
        const blockModel = cloneCurrentModel[key]
        // 实现算法
        let temp = blockModel.row
        blockModel.row = blockModel.col
        blockModel.col = 3 - temp
      }
      // 如果旋转之后会发生触碰，那么就不需要进行旋转了
      if (isMeet(currentX, currentY, cloneCurrentModel)) {
        return
      }
      // 接受了这次旋转
      currentModel = cloneCurrentModel
      locationBlocks()
    }

    // 控制模型只能在容器中
    function checkBound() {
      // 定义模型可以活动的边界
      let leftBound = 0, rightBound = COL_COUNT, bottomBound = ROW_COUNT
      // 当块元素超出了边界之后，让 16 宫格后退1格
      for (const key in currentModel) {
        // 块元素的数据
        const blockModel = currentModel[key]
        // 左侧越界
        if ((blockModel.col + currentX) < 0) {
          currentX++
        }
        // 右侧越界
        if ((blockModel.col + currentX) >= rightBound) {
          currentX--
        }
        // 下侧越界
        if ((blockModel.row + currentY) >= bottomBound) {
          currentY--
          fixedBottomModel()
        }
      }
    }

    // 把模型固定在底部
    function fixedBottomModel() {
      // 1 改变模型的样式
      // 2 禁止模型再进行移动
      const activityModelEles = document.getElementsByClassName('activity-model')
        ;[...activityModelEles].forEach((ele, i) => {
          ele.className = "fixed-model"
          // 把该块元素放入变量中
          const blockModel = currentModel[i]
          fixedBlocks[`${currentY + blockModel.row}_${currentX + blockModel.col}`] = ele
        })
      // for (let i = activityModelEles.length - 1; i >= 0; i--) {
      //   // 拿到每个块元素
      //   const activityModelEle = activityModelEles[i]
      //   // 更改块元素的类名
      //   activityModelEle.className = "fixed-model"
      // }
      // 判断某一行是否要清理
      isRemoveLine()
      // 3 创建新的模型
      createModel()
    }
    // 判断模型之间的触碰问题
    // x, y 表示16宫格《将要》移动的位置
    // model 表示当前模型数据源《将要》完成的变化
    function isMeet(x, y, model) {
      // 所谓模型之间的触碰，在一个固定的位置已经存在一个被固定的块元素时，那么
      // 活动中的模型不可以再占用该位置
      // 判断触碰，就是在判断活动中的模型《将要移动到的位置》是否已经存在被固定
      // 的块元素
      // 返回 true 表示将要移动到的位置会发生触碰 否则返回 false
      for (const key in model) {
        const blockModel = model[key]
        // 该位置是否已经存在块元素？
        if (fixedBlocks[`${y + blockModel.row}_${x + blockModel.col}`]) {
          return true
        }
      }
      return false
    }

    // 判断一行是否被铺满
    function isRemoveLine() {
      // 在一行中，每一列都存在块元素，那么该行就需要被清理了
      // 遍历所有行中的所有列
      // 遍历所有行
      for (let i = 0; i < ROW_COUNT; i++) {
        // 标记符 假设当前行已经被铺满了
        let flag = true
        // 遍历当前行中的所有列
        for (let j = 0; j < COL_COUNT; j++) {
          // 如果当前行中有一列没有数据，那么就说明当前行没有被铺满
          if (!fixedBlocks[`${i}_${j}`]) {
            flag = false
            break
          }
        }
        if (flag) {
          //  该行已经被铺满了
          removeLine(i)
        }
      }
    }

    // 清理被铺满的这一行
    function removeLine(line) {
      // 1 删除该行中所有的块元素
      // 2 删除该行所有块元素的数据源
      // 遍历该行中的所有列
      for (let i = 0; i < COL_COUNT; i++) {
        // 1 删除该行中所有的块元素
        document.getElementById("container").removeChild(fixedBlocks[`${line}_${i}`])
        // 2 删除该行所有块元素的数据源
        fixedBlocks[`${line}_${i}`] = null
      }
      // 更新当前分数
      score += COL_COUNT
      document.getElementById("current-score").innerHTML = score
      downLine(line)
    }

    // 让被清理行之上的块元素下落
    function downLine(line) {
      // 1 被清理行之上的所有块元素数据源所在行数 + 1
      // 2 让块元素在容器中的位置下落
      // 3 清理之前的块元素
      // 遍历被清理行之上的所有行
      for (let i = line - 1; i >= 0; i--) {
        // 该行中的所有列
        for (let j = 0; j < COL_COUNT; j++) {
          if (!fixedBlocks[`${i}_${j}`]) continue
          // 存在数据
          // 1 被清理行之上的所有块元素数据源所在行数 + 1
          fixedBlocks[`${i + 1}_${j}`] = fixedBlocks[`${i}_${j}`]
          // 2 让块元素在容器中的位置下落
          fixedBlocks[`${i + 1}_${j}`].style.top = (i + 1) * STEP + "px"
          // 3 清理之前的块元素
          fixedBlocks[`${i}_${j}`] = null
        }
      }
    }

    // 让模型自动下落
    function autoDown() {
      if (mInterval) {
        clearInterval(mInterval)
      }
      mInterval = setInterval(() => {
        move(0, 1)
      }, 600)
    }

    // 判断游戏结束
    function isGameOver() {
      // 当第0行存在块元素的时候，表示游戏结束了
      for (let i = 0; i < COL_COUNT; i++) {
        if (fixedBlocks[`0_${i}`]) return true
      }
      return false
    }

    // 结束掉游戏
    function gameOver() {
      // 1 停止定时器
      if (mInterval) {
        clearInterval(mInterval)
      }
      //  重置最高分数
      maxScore = Math.max(maxScore, score)
      document.getElementById("max-score").innerHTML = maxScore
      // 2 弹出对话框
      alert("大吉大利，今晚吃鸡！")
    }

    // 重新开始
    function reset() {
      const container = document.getElementById("container")
      const childs = container.childNodes;
      for (let i = childs.length - 1; i >= 0; i--) {
        container.removeChild(childs[i]);
      }
      fixedBlocks = {}
      score = 0
      document.getElementById("current-score").innerHTML = score
      init()
    }
  </script>
</body>

</html>

转载于：https://blog.csdn.net/wanghuan1020/article/details/111473709

菜单 学习猿地 - LMONKEY

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

Java开发工程师

何以解忧，唯有 Java！

Python开发工程师

人生苦短我要学Python！

PHP开发工程师

PHP是世界上最好的编程语言!

GO开发工程师

想优雅的写程序，赶紧GO!

大数据开发工程师

弄大数据，就是在搞革命!

前端开发工程师

不仅最好，而且最全!

UI开发工程师

这个世界从来不缺少美，缺少你来创造美!

Linux运维工程师

不只是说说而已！

WEB前端1+X

不仅为考证，轻松做开发

计算机二级（C语言）

一切只为考证！

猿工手册

各种工具精挑细选

猿材料

各种工具精挑细选

猿代码

各种工具精挑细选

猿著课件

各种工具精挑细选

知识题库

知识闯关节节高，刷题涨知识！

阶段练习

单元测试知识学习状况秒掌握！

期末考试

期末测试，学习情况即刻知道！

面试题库

最新的企业技术人员招聘真题练习！

Java专区

2948篇 ｜ 24.5万人浏览

Python专区

2593篇 ｜ 19.5万人浏览

大数据专区

2948篇 ｜ 18.5万人浏览

PHP专区

3953篇 ｜ 27.5万人浏览

Go专区

1382篇 ｜ 12.5万人浏览

Web前端专区

1453篇 ｜ 31.5万人浏览

Linux云计算

1230篇 ｜ 4.5万人浏览

其他专区

53232篇文章 ｜ 11.5万人浏览

搜索

历史记录 清除记录

近期热搜

项目开发全程实录（电商EW_Shop）

8676 人 1年前

轻松学会Laravel-项目篇（商城API）

2022 人 1年前

Python数据分析2.0-金融

325 人 1年前

Python办公自动化2.0

241 人 1年前

使用账号登录

启用更安全省心的  微信登录

Java开发工程师

何以解忧，唯有 Java！

Python开发工程师

菜单学习猿地 - LMONKEY

尊享10项VIP特权持续新增

2948篇｜ 24.5万人浏览

2593篇｜ 19.5万人浏览

2948篇｜ 18.5万人浏览

3953篇｜ 27.5万人浏览

1382篇｜ 12.5万人浏览

1453篇｜ 31.5万人浏览

1230篇｜ 4.5万人浏览

53232篇文章｜ 11.5万人浏览

历史记录清除记录

2948篇｜ 24.5万人浏览

2593篇｜ 19.5万人浏览

2948篇｜ 18.5万人浏览

3953篇｜ 27.5万人浏览

1382篇｜ 12.5万人浏览

1453篇｜ 31.5万人浏览

1230篇｜ 4.5万人浏览

53232篇文章｜ 11.5万人浏览

1. 创建一个宽为 `200px`，高为 `360px` 的背景容器

2. 在该容器上创建一个 `20 * 20` 的块元素

3. 控制该元素的移动，每次移动 `20px`

构建 `L` 形状的模型

1. 将容器进行分割，分割为 `18` 行，`10` 列。行高，列高均为`20`

2. 以 `16宫格` 为基准，定义 `L` 形状的 `4` 个方块的位置

3. 创建 `L` 型模型，根据 `16` 宫格中的数据将模型渲染到页面上

本质是控制 `16 宫格进行移动`

以 16宫格的中心点为基准进行旋转

当模型触底时，将块元素变为`灰色`固定在底部，同时生成一个新的模型