前言：
现时我们对“js打砖块”都比较着重，朋友们都需要了解一些“js打砖块”的相关资讯。那么小编在网上收集了一些有关“js打砖块””的相关内容，希望姐妹们能喜欢，你们快快来学习一下吧！大家好，我是魏大帅，今天教大家一个装[啤酒]的方法。你说你不懂前端，没关系我教你。打开你的电脑，新建一个txt文档，把我文章最后面的完整代码复制到文档里面，然后把txt文档的后缀名改成.html 就ok啦，你可以直接把这个html文件发给你朋友，说这是哥们我做的，[给力]不！
哈哈，前面这段纯属开玩笑的，主要还是给各位前端开发，或者想从事前端开发的帅哥美女们，一个可以借鉴的案例。有大神觉得自己有更厉害的案例，也可以告诉我，我也学习学习，咱们互相学习互相进步。话不多说，上干货！
这是俄罗斯方块的效果图：
一、游戏界面与布局
我们最先借助 HTML 和 CSS 来打造游戏的界面。这页面主要涵盖了一个游戏区域，也就是 （<canvas>元素），还有一个包含“开始游戏”按钮以及得分展示的区域。
<!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 { background-color: #e0e0e0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } #game-container { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: center; } #game-board { border: 3px solid #333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); width: 350px; height: 700px; } #startButtonAndScore { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 15px; } #startButton { padding: 12px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; } #startButton:hover { background-color: #45a049; } #scoreContainer { font-size: 18px; font-weight: bold; color: #555; } </style></head><body> <div id="game-container"> <canvas id="game-board" width="350" height="700"></canvas> <div id="startButtonAndScore"> <button id="startButton">开始游戏</button> <div id="scoreContainer">得分：0</div> </div> </div> <script> // 以下是 JavaScript 代码部分 </script></body></html>二、游戏逻辑实现1. 定义方块形状和颜色我们先把各种各样可能会出现的方块形状和相对应的颜色给定义好了。
const shapes = [ [ [1, 1], [1, 1] ], [ [0, 1, 0], [1, 1, 1] ], [ [1, 0], [1, 0], [1, 1] ], [ [0, 1], [0, 1], [1, 1] ], [ [1, 1, 1], [0, 1, 0] ], [ [1, 1, 0], [0, 1, 1] ], [ [0, 1, 1], [1, 1, 0] ]];// 不同形状对应的颜色数组const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple', 'cyan'];2. 游戏状态变量
设置了一连串的游戏状态变量，用来追踪游戏板的状况、当下正在下落的方块、所在位置、得分情况，还有游戏是不是结束了之类的信息。
let board = []; // 游戏板状态，二维数组表示游戏区域的方块分布let currentShape = null; // 当前正在下落的形状let currentShapeColor = null; // 当前形状的颜色let currentX = 0; // 当前形状在游戏板上的横坐标let currentY = 0; // 当前形状在游戏板上的纵坐标let intervalId = null; // 游戏循环的定时器 IDlet score = 0; // 玩家得分let gameOver = false; // 游戏是否结束的标志3. 创建游戏板
用一个函数来把游戏板初始化，把每个格子都初始化成 0 ，意思就是都为空。
function createBoard() { // 遍历每一行 for (let i = 0; i < 20; i++) { board[i] = []; // 遍历每一列，将每个格子初始化为 0 for (let j = 0; j < 10; j++) { board[i][j] = 0; } }}4. 绘制游戏板这个函数负责在<canvas>上面画游戏板和当下正在掉落的方块。要是格子里有方块，那就依据方块的颜色把对应的区域填满。
function drawBoard() { const canvas = document.getElementById('game-board'); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); // 遍历游戏板的每一行和每一列 for (let i = 0; i < 20; i++) { for (let j = 0; j < 10; j++) { if (board[i][j] > 0) { // 根据格子中的值确定颜色并填充方块 ctx.fillStyle = colors[board[i][j] - 1]; ctx.fillRect(j * (canvas.width / 10), i * (canvas.height / 20), canvas.width / 10, canvas.height / 20); } } } // 如果有正在下落的方块且游戏未结束，绘制该方块 if (currentShape &&!gameOver) { for (let i = 0; i < currentShape.length; i++) { for (let j = 0; j < currentShape[i].length; j++) { if (currentShape[i][j]) { ctx.fillStyle = currentShapeColor; ctx.fillRect((currentX + j) * (canvas.width / 10), (currentY + i) * (canvas.height / 20), canvas.width / 10, canvas.height / 20); } } } }}5. 生成新的形状随便挑一个方块的形状和颜色，把它的初始位置定在游戏板中央靠上的地方。
function newShape() { const randomShapeIndex = Math.floor(Math.random() * shapes.length); // 随机选择一个形状并设置为当前形状 currentShape = shapes[randomShapeIndex]; // 选择对应的颜色 currentShapeColor = colors[randomShapeIndex]; // 计算初始横坐标使其在游戏板中央 currentX = Math.floor(10 / 2 - currentShape[0].length / 2); currentY = 0;}6. 检查是否可以移动判断一下当前的方块能不能在给定的那个方向上移动，如果移动后的位置超过了游戏板的边界，或者已经有别的方块占着了，那就不能移动。
function canMove(x, y) { for (let i = 0; i < currentShape.length; i++) { for (let j = 0; j < currentShape[i].length; j++) { if (currentShape[i][j]) { const newX = currentX + j + x; const newY = currentY + i + y; // 检查新位置是否合法 if (newX < 0 || newX >= 10 || newY >= 20 || (newY >= 0 && board[newY][newX])) { return false; } } } } return true;}7. 移动形状要是能移动，那就把方块的位置更新一下。
function moveShape(x, y) { if (canMove(x, y)) { for (let i = 0; i < currentShape.length; i++) { for (let j = 0; j < currentShape[i].length; j++) { if (currentShape[i][j]) { // 将当前位置在游戏板上的值设置为 0，表示该位置不再有方块 board[currentY + i][currentX + j] = 0; } } } // 更新横坐标和纵坐标 currentX += x; currentY += y; }}8. 旋转形状用转换矩阵的办法来让方块旋转。先弄出一个新的形状的数组，然后看看旋转后的形状能不能放在游戏板上，如果能，就把当前的形状更新成旋转后的形状。
function rotateShape() { const newShape = []; for (let i = 0; i < currentShape[0].length; i++) { newShape[i] = []; for (let j = 0; j < currentShape.length; j++) { // 实现形状的旋转 newShape[i][j] = currentShape[currentShape.length - 1 - j][i]; } } if (canMove(0, 0)) { for (let i = 0; i < currentShape.length; i++) { for (let j = 0; j < currentShape[i].length; j++) { if (currentShape[i][j]) { board[currentY + i][currentX + j] = 0; } } } // 更新当前形状为旋转后的形状 currentShape = newShape; }}9. 固定形状到游戏板判断一下方块是不是该停止往下落了，如果是，那就把方块固定在游戏板上，再检查检查有没有完整的行能消除掉。要是有，就把这些行删掉，得分也增加，然后生成新的方块。要是方块还能往下落，那就接着往下落。
function fixShape() { let shouldStop = false; for (let i = 0; i < currentShape.length; i++) { for (let j = 0; j < currentShape[i].length; j++) { if (currentShape[i][j]) { const newY = currentY + i; if (newY + 1 >= 20 || (newY + 1 >= 0 && board[newY + 1][currentX + j])) { shouldStop = true; break; } } } if (shouldStop) break; } if (shouldStop) { for (let i = 0; i < currentShape.length; i++) { for (let j = 0; j < currentShape[i].length; j++) { if (currentShape[i][j]) { if (currentY + i < 20 && currentX + j >= 0 && currentX + j < 10 && board[currentY + i][currentX + j] === 0) { board[currentY + i][currentX + j] = colors.indexOf(currentShapeColor) + 1; } } } } removeFullLines(); newShape(); checkGameOver(); } else { moveShape(0, 1); }}10. 检查是否有满行并删除把游戏板的每一行都走一遍，检查检查有没有完整的行。要是有，就把那行删掉，在顶部加上一行空的，同时得分也增加。
function removeFullLines() { let linesRemoved = 0; for (let i = board.length - 1; i >= 0; i--) { if (board[i].every(cell => cell > 0)) { board.splice(i, 1); board.unshift(new Array(10).fill(0)); linesRemoved++; } } if (linesRemoved > 0) { score += linesRemoved * 10; document.getElementById('scoreContainer').innerText = '得分：' + score; }}11. 检查游戏是否结束检查游戏板的第一行有没有方块，要是有，那游戏就结束啦
function checkGameOver() { for (let j = 0; j < 10; j++) { if (board[0][j] > 0) { gameOver = true; clearInterval(intervalId); alert('游戏结束！你的得分是：' + score); break; } }}12. 游戏循环游戏循环的那个函数不停地查看方块能不能下落，要是不能下落或者游戏已经结束了，那就调用 fixShape 函数把方块给定住；要是能下落，就让方块接着往下落，并且把游戏板给画出来。
function gameLoop() { if (!canMove(0, 1) || gameOver) { fixShape(); } else { moveShape(0, 1); } drawBoard();}13. 开始游戏要是点击“开始游戏”这个按钮，就调用这个函数。要是已经有游戏正在进行当中，那就先把旧游戏停下，接着把游戏状态重置了，创建一个新的游戏板，生成新的方块，启动游戏循环，然后把得分显示也更新一下。
function startGame() { if (intervalId) { clearInterval(intervalId); } board = []; currentShape = null; currentShapeColor = null; currentX = 0; currentY = 0; score = 0; gameOver = false; createBoard(); newShape(); intervalId = setInterval(gameLoop, 1000); document.getElementById('scoreContainer').innerText = '得分：' + score;}14. 按键事件处理咱们监听键盘事件，要是按了左、右、下、上箭头键，那就分别对应着方块的左移、右移、下落和旋转这些操作。要是游戏已经结束了，那就不响应按键事件。
document.addEventListener('keydown', event => { if (gameOver) return; switch (event.keyCode) { case 37: // 左箭头 moveShape(-1, 0); break; case 39: // 右箭头 moveShape(1, 0); break; case 40: // 下箭头 moveShape(0, 1); break; case 38: // 上箭头 rotateShape(); break; } drawBoard();});三、完整代码<!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 { background-color: #e0e0e0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } #game-container { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: center; } #game-board { border: 3px solid #333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); width: 350px; height: 700px; } #startButtonAndScore { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 15px; } #startButton { padding: 12px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease; } #startButton:hover { background-color: #45a049; } #scoreContainer { font-size: 18px; font-weight: bold; color: #555; } </style></head><body> <div id="game-container"> <canvas id="game-board" width="350" height="700"></canvas> <div id="startButtonAndScore"> <button id="startButton">开始游戏</button> <div id="scoreContainer">得分：0</div> </div> </div> <script> // 定义方块形状和颜色数组 const shapes = [ [ [1, 1], [1, 1] ], [ [0, 1, 0], [1, 1, 1] ], [ [1, 0], [1, 0], [1, 1] ], [ [0, 1], [0, 1], [1, 1] ], [ [1, 1, 1], [0, 1, 0] ], [ [1, 1, 0], [0, 1, 1] ], [ [0, 1, 1], [1, 1, 0] ] ]; const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple', 'cyan']; // 游戏状态变量 let board = []; // 游戏板状态 let currentShape = null; // 当前正在下落的形状 let currentShapeColor = null; // 当前形状的颜色 let currentX = 0; // 当前形状的横坐标 let currentY = 0; // 当前形状的纵坐标 let intervalId = null; // 游戏循环的定时器 ID let score = 0; // 得分 let gameOver = false; // 游戏是否结束标志 // 创建游戏板 function createBoard() { for (let i = 0; i < 20; i++) { board[i] = []; for (let j = 0; j < 10; j++) { board[i][j] = 0; } } } // 绘制游戏板 function drawBoard() { const canvas = document.getElementById('game-board'); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < 20; i++) { for (let j = 0; j < 10; j++) { if (board[i][j] > 0) { ctx.fillStyle = colors[board[i][j] - 1]; ctx.fillRect(j * (canvas.width / 10), i * (canvas.height / 20), canvas.width / 10, canvas.height / 20); } } } if (currentShape &&!gameOver) { for (let i = 0; i < currentShape.length; i++) { for (let j = 0; j < currentShape[i].length; j++) { if (currentShape[i][j]) { ctx.fillStyle = currentShapeColor; ctx.fillRect((currentX + j) * (canvas.width / 10), (currentY + i) * (canvas.height / 20), canvas.width / 10, canvas.height / 20); } } } } } // 生成新的形状 function newShape() { const randomShapeIndex = Math.floor(Math.random() * shapes.length); currentShape = shapes[randomShapeIndex]; currentShapeColor = colors[randomShapeIndex]; currentX = Math.floor(10 / 2 - currentShape[0].length / 2); currentY = 0; } // 检查是否可以移动 function canMove(x, y) { for (let i = 0; i < currentShape.length; i++) { for (let j = 0; j < currentShape[i].length; j++) { if (currentShape[i][j]) { const newX = currentX + j + x; const newY = currentY + i + y; if (newX < 0 || newX >= 10 || newY >= 20 || (newY >= 0 && board[newY][newX])) { return false; } } } } return true; } // 移动形状 function moveShape(x, y) { if (canMove(x, y)) { for (let i = 0; i < currentShape.length; i++) { for (let j = 0; j < currentShape[i].length; j++) { if (currentShape[i][j]) { board[currentY + i][currentX + j] = 0; } } } currentX += x; currentY += y; } } // 旋转形状 function rotateShape() { const newShape = []; for (let i = 0; i < currentShape[0].length; i++) { newShape[i] = []; for (let j = 0; j < currentShape.length; j++) { newShape[i][j] = currentShape[currentShape.length - 1 - j][i]; } } if (canMove(0, 0)) { for (let i = 0; i < currentShape.length; i++) { for (let j = 0; j < currentShape[i].length; j++) { if (currentShape[i][j]) { board[currentY + i][currentX + j] = 0; } } } currentShape = newShape; } } // 固定形状到游戏板 function fixShape() { let shouldStop = false; for (let i = 0; i < currentShape.length; i++) { for (let j = 0; j < currentShape[i].length; j++) { if (currentShape[i][j]) { const newY = currentY + i; if (newY + 1 >= 20 || (newY + 1 >= 0 && board[newY + 1][currentX + j])) { shouldStop = true; break; } } } if (shouldStop) break; } if (shouldStop) { for (let i = 0; i < currentShape.length; i++) { for (let j = 0; j < currentShape[i].length; j++) { if (currentShape[i][j]) { if (currentY + i < 20 && currentX + j >= 0 && currentX + j < 10 && board[currentY + i][currentX + j] === 0) { board[currentY + i][currentX + j] = colors.indexOf(currentShapeColor) + 1; } } } } removeFullLines(); newShape(); checkGameOver(); } else { moveShape(0, 1); } } // 检查是否有满行并删除 function removeFullLines() { let linesRemoved = 0; for (let i = board.length - 1; i >= 0; i--) { if (board[i].every(cell => cell > 0)) { board.splice(i, 1); board.unshift(new Array(10).fill(0)); linesRemoved++; } } if (linesRemoved > 0) { score += linesRemoved * 10; document.getElementById('scoreContainer').innerText = '得分：' + score; } } // 检查游戏是否结束 function checkGameOver() { for (let j = 0; j < 10; j++) { if (board[0][j] > 0) { gameOver = true; clearInterval(intervalId); alert('游戏结束！你的得分是：' + score); break; } } } // 游戏循环 function gameLoop() { if (!canMove(0, 1) || gameOver) { fixShape(); } else { moveShape(0, 1); } drawBoard(); } // 开始游戏 function startGame() { if (intervalId) { // 如果已经有游戏在进行，先停止旧的游戏 clearInterval(intervalId); } // 重置游戏状态 board = []; currentShape = null; currentShapeColor = null; currentX = 0; currentY = 0; score = 0; gameOver = false; createBoard(); newShape(); intervalId = setInterval(gameLoop, 1000); document.getElementById('scoreContainer').innerText = '得分：' + score; } document.getElementById('startButton').addEventListener('click', startGame); // 按键事件处理 document.addEventListener('keydown', event => { if (gameOver) return; switch (event.keyCode) { case 37: // 左箭头 moveShape(-1, 0); break; case 39: // 右箭头 moveShape(1, 0); break; case 40: // 下箭头 moveShape(0, 1); break; case 38: // 上箭头 rotateShape(); break; } drawBoard(); }); </script></body></html>凭借上面这些代码，咱们顺利做成了一个挺简单的俄罗斯方块游戏。
希望这篇文章能对你有所帮助！[赞][比心]
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
