回归前端学习第22天-实现俄罗斯方块小游戏5（实现单机版1——结合HTML、CSS、JS来搭建界面）

本文链接：https://blog.youkuaiyun.com/weixin_44584059/article/details/108015515

本文详细介绍了一款单机版俄罗斯方块小游戏的前端开发过程，包括HTML、CSS和JavaScript的使用，以及如何通过这些技术搭建游戏的基础界面，实现游戏元素的动态显示。

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

实现单机版俄罗斯方块小游戏，搭建页面

实现静态基础页面

实现静态基础页面

HTML：

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>俄罗斯方块5</title>
  <link rel="stylesheet" href="./css/css.css">
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script> -->
</head>

<body>
  <div class="game" id="game"></div>
  <div class="next" id="next"></div>
  <div class="info">
    <div>已用时：<span id="time">0</span>s</div>
    <div>已得分：<span id="score">0</span>分</div>
  </div>
  <script src="./js/script.js"></script>
</body>

</html>

CSS：

/* 20行10列，20*20的小块 */
.game {
    width: 200px;
    height: 400px;
    background-color: #F2FAFF;
    border-left: 1px solid blue;
    border-right: 1px solid blue;
    border-bottom: 1px solid blue;
    position: absolute;
    top: 10px;
    left: 10px;
}

.next {
    width: 80px;
    height: 80px;
    background-color: F2FAFF;
    position: absolute;
    top: 10px;
    left: 250px;
    border: 1px solid blue;
}

.info {
    position: absolute;
    top: 100px;
    left: 250px;
}

在这里插入图片描述
加入JS，实现页面显示（开始前设置成背景色，正在落下来的时候是粉色，落地后是灰色）

var nextData = [
  [2, 2, 0, 0],
  [0, 2, 2, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0]
];

var gameData = [
  [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],
  [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, 2, 1, 0, 0, 0],
  [0, 0, 0, 2, 2, 2, 1, 0, 0, 0],
  [0, 0, 1, 1, 1, 1, 1, 0, 0, 0],
];

var nextDivs = [];
var gameDivs = [];
// initGame（）创建div，并将其保存的givDiv里面
var initGame = function () {
  for (var i = 0; i < gameData.length; i++) {
    var gameDiv = [];
    for (var j = 0; j < gameData[0].length; j++) {
      var newNode = document.createElement('div');
      newNode.className = 'none';
      newNode.style.top = (i * 20) + 'px';
      newNode.style.left = (j * 20) + 'px';
      // 建立一维数组
      document.getElementById('game').appendChild(newNode);
      gameDiv.push(newNode);
    }
    // 把一维数组放到多维数组中
    gameDivs.push(gameDiv);
  }
}
var initNext = function () {
  for (var i = 0; i < nextData.length; i++) {
    var nextDiv = [];
    for (var j = 0; j < nextData[0].length; j++) {
      var newNode = document.createElement('div');
      newNode.className = 'none';
      newNode.style.top = (i * 20) + 'px';
      newNode.style.left = (j * 20) + 'px';
      // 建立一维数组
      document.getElementById('next').appendChild(newNode);
      // 把一维数组放到多维数组中
      nextDiv.push(newNode);
    }
    nextDivs.push(nextDiv);
  }
}

var refreshGame = function () {
  for (var i = 0; i < gameData.length; i++) {
    for (var j = 0; j < gameData[0].length; j++) {
      if (gameData[i][j] == 0) {
        gameDivs[i][j].className = 'none';
      } else if (gameData[i][j] == 1) {
        gameDivs[i][j].className = 'done';
      } else if (gameData[i][j] == 2) {
        gameDivs[i][j].className = 'current';
      }
    }
  }
}

var refreshNext = function () {
  for (var i = 0; i < nextData.length; i++) {
    for (var j = 0; j < nextData[0].length; j++) {
      if (nextData[i][j] == 0) {
        nextDivs[i][j].className = 'none';
      } else if (nextData[i][j] == 1) {
        nextDivs[i][j].className = 'done';
      } else if (nextData[i][j] == 2) {
        nextDivs[i][j].className = 'current';
      }
    }
  }
}

initGame();
initNext();
refreshGame();
refreshNext();

并在CSS中添加样式

/* 开始前 */
.none {
    width: 20px;
    height: 20px;
    position: absolute;
    box-sizing: border-box;
    background-color: #F2FAFF;
}

/* 用户显示 */
.current {
    width: 20px;
    height: 20px;
    position: absolute;
    box-sizing: border-box;
    background-color: pink;
    border: 1px solid red;
}

/* 落下来后 */
.done {
    width: 20px;
    height: 20px;
    position: absolute;
    box-sizing: border-box;
    background-color: gray;
    border: 1px solid black;
}

在这里插入图片描述