实现静态基础页面

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

在这里插入图片描述