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

于 2020-12-21 16:13:41 发布
阅读量1.2k 收藏 8
点赞数 3
分类专栏： JS进阶学习 文章标签： javascript css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanghuan1020/article/details/111473709
版权
本文介绍了如何使用JavaScript、CSS和HTML创建一个简单的俄罗斯方块小游戏。从创建背景容器和块元素开始，逐步讲解模型构建、移动、旋转、碰撞检测、行满消除以及游戏结束的判断等核心功能。最后还提到了计分系统和重新开始游戏的扩展实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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>
零基础入门JavaScript 1000例实战开发--实例2：俄罗斯方块游戏
xiaoheshang_123的博客
02-21 92
俄罗斯方块是一款经典的益智游戏，玩家需要操控不同形状的方块，使其在屏幕上排列成完整的行，从而消除这些行并获得分数。本教程将带你一步步实现这个经典游戏，使用HTML5和JavaScript来创建一个可以在网页上运行的俄罗斯方块游戏。通过本教程，你学会了如何使用HTML5和JavaScript创建一个经典的俄罗斯方块游戏。你可以进一步扩展这个游戏，添加更多功能，如不同的难度级别、更复杂的图形和动画效果等。希望你在编写游戏的过程中享受乐趣，并继续探索更多有趣的项目！
10分钟集成一个简单的银行卡识别Demo(华为HMS Core MLKit)
huangjinyong1994的博客
04-02 553
现在APP添加银行卡识别的需求越来越多，今天在GitHub上看到了card.io这一个开源银行卡识别，下载使用后发现不支持许多国内银行卡，然后发现华为的**HMS Core MLKit**机器学习服务银行卡识别SDK比较好用，于此，记录下集成步骤。 开发准备 1、新建个empty activity（操作略过） 2、在项目级的build.gradle中添加华为的maven. maven {url 'http://developer.huawei.com/repo/'} 3、在项目的应用级的bui
JS实现的简单俄罗斯方块
LOHAS的博客
09-16 483
写了个简单的俄罗斯方块儿游戏，算个笔记吧 关于在边界的图形转换还存在一些问题，待优化。 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>俄罗斯方块</title> <script type="text/javascri...
OpenCv NDK 银行卡/身份证号识别(4) 基于openCv SVM的机械学习模型训练识别
王项雨 的博客
07-27 1788
上一篇我们把银行卡号给分割提取出来，为我们本篇机械模型训练提供了素材，因为我们最终是要把分割出的字符图片给识别出他是具体的数字几，而不能就仅仅把截取到的图片展示出来，图片他仅仅还是图片，所以我们要知道具体的图片对应的数字，所以就用到了，机械学习中的SVM 支持向量积的分类器。 百度百科支持向量机（Support Vector Machine, SVM）是一类按监督学习（supervised ...
纯JS实现俄罗斯方块小游戏
被一个OIER遗弃的一堆烂代码
05-16 594
这次的代码有点长，就想玩的直接复制就行，如果想研究可以拆分成JS文件自己看看。不需要别的库。效果是这样 这次懒得弄到Github里头，很麻烦，就这么一个文件用不着 <规则> ←键：控制方块向左走一格 →键：控制方块向右走一格 ↓键：向下走一格（加速） ↑键：旋转 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2
使用js实现俄罗斯方块
sleeping_xixi的博客
05-24 1614
这几天有从网上学习了js的一些实例，做了一个俄罗斯方块的游戏。我觉得做实例的几点好处：1.能够把相关的知识串在一起，做出一个成品，从中获得一些学习的乐趣；2.在做一个实例的过程中会从整体的角度去考虑，把代码进一步的封装，最大化复用。以及使用到分层思想去将代码写得更符合规范，更有利于理解和维护；3.在做实例的过程中会遇到各种各样的问题，解决问题的过程就是一种能力的培养。这是相关代码的链接https:...
javascript+css实现俄罗斯方块小游戏
11-20
俄罗斯方块，一个很有趣的一个小游戏，此次基于html+css+javaScript实现，包含在一个方块落地后自动生成方块、操控方块的移动以及方块变形等。 部分代码： <!DOCTYPE html> <html> <head> <...
使用html + js 实现的 俄罗斯方块小游戏
03-04
实现俄罗斯方块小游戏不仅需要熟悉HTML和JavaScript，还需要对游戏逻辑有深刻的理解，并且需要具备一定的编程解决问题的能力。这是一个涉及前端开发、游戏设计和用户交互等多个方面的综合性项目。在项目实践过程中，...
js实现俄罗斯方块小游戏分享
10-26
以上是对“js实现俄罗斯方块小游戏分享”文件中内容的详细解析，涵盖了实现俄罗斯方块游戏的基本思路和技术要点。由于原内容中存在OCR识别错误，部分代码和文字可能存在些许误差，需理解后进行调整。
纯前端+javascript实现网页版俄罗斯方块小游戏
最新发布
04-08
原生 JavaScript：逻辑分层（游戏控制、状态管理、渲染分离） 复杂度适中：涵盖前端三件套核心知识，但不过度复杂 可视化成就感：实时交互反馈，调试过程更直观 经典玩法复用：逻辑清晰，适合举一反三（比如扩展为...
js 俄罗斯方块
wenwenlou的专栏
12-23 523
<!--//单元格宽度var cellwidth = 15;//单元格个数var cellcount_x = 18var cellcount_y = 30;//正在掉落的方块的IDvar currentDroper = new Array();//下个掉落的方块IDvar nextDorper = new Array();//预览的方块IDvar
JS 俄罗斯方块
01-31
JS 编写的俄罗斯方块，界面可以再美化下，可以扩展模型
俄罗斯方块 JS
11-20
原本是前苏联科学家阿列克谢·帕基特诺夫所开发的教育用软件，之后开始提供授权给各个游戏公司，造成各平台上软件大量发行的现象。 Game Boy版的俄罗斯方块在日本卖出424万套，是Game Boy史上卖最好的游戏。海湾战争时，也是前线美军最常拿消磨时间的游戏之一。 由于俄罗斯方块具有的数学性、动态性与知名度，也经常拿来作为游戏程序设计的练习题材。 俄罗斯方块曾经造成的轰动与带来的经济价值，可以说是世界游戏史上的一个奇迹。它看似简单却又变化无穷，令人上瘾。相信大多数用户都还记得为它痴迷得“茶不思饭不想”的那个俄罗斯方块时代。 俄罗斯方块上手极其简单，但是要熟练地掌握其中的操作与摆放技巧，难度却不低。作为家喻户晓老少皆宜的大众游戏，其普及程度可以说是史上任何一款游戏都无法相比的。
js版俄罗斯方块
03-17
俄罗斯方块，一个精典又好玩的游戏。这是一个javascript版本的俄罗斯方块。多浏览器支持（兼容IE，360，火狐等）。
JS代码版俄罗斯方块
11-19
俄罗斯方块 是一款风靡全球的电视游戏机和掌上游戏机游戏，它由俄罗斯人阿列克谢·帕基特诺夫发明，故得此名。俄罗斯方块的基本规则是移动、旋转和摆放游戏自动输出的各种方块，使之排列成完整的一行或多行并且消除得分。由于上手简单、老少皆宜，从而家喻户晓，风靡世界。 2014年2月22日，英国心理学家发现，减肥者通过玩俄罗斯方块，可以降低对富含脂肪的食物和零食的心理需求；尝试戒烟者的烟瘾也能得到遏制。
js实现俄罗斯方块
07-31
js实现俄罗斯方块，真心不错，原来JS也可以做这个，真是太棒了！
js俄罗斯方块
yangyabing2020的博客
09-03 242
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> body{ margin: 0; paddi.
基于深度学习的银行卡号识别
热门推荐
ShawnHu的博客
08-22 1万+
基于深度学习的银行卡号识别 原文与代码链接：https://github.com/ShawnHXH/BankCard-Recognizer 实现工具及平台 Windows 10， Python 3.6（Anaconda），TensorFlow-gpu， Keras 实现功能与方法 数据集增强（Cython，SciPy，OpenCV） 卡号识别（CNN-BLSTM-CTC） 卡号定位 （EAST）...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值