打造经典游戏：HTML5与CSS3实现俄罗斯方块

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

🤖 洛可可白：个人主页

🔥 个人专栏：✅前端技术 ✅后端技术

🏠 个人博客：洛可可白博客

🐱 代码获取：bestwishes0203

📷 封面壁纸：洛可可白wallpaper

在这里插入图片描述

文章目录

打造经典游戏：HTML5与CSS3实现俄罗斯方块
- 摘要
- 1. 体验地址
- 2. 创建游戏界面
- 3. 初始化游戏
- 4. 绘制游戏板
- 5. 游戏逻辑
- 6. 开始游戏
- 7.全部代码
- 🎉 结语

打造经典游戏：HTML5与CSS3实现俄罗斯方块

摘要

俄罗斯方块是一款经典的电子游戏，它不仅考验玩家的反应速度，还能锻炼逻辑思维能力。本文将指导你如何使用HTML5、CSS3和JavaScript来创建一个简单的俄罗斯方块游戏。我们将从游戏的基本结构开始，逐步构建游戏逻辑，并在最后提供一个完整的代码示例。

1. 体验地址

PC端体验地址：洛可可白⚡️俄罗斯方块

（暂时只支持键盘输入操作）

在这里插入图片描述

2. 创建游戏界面

首先，我们需要创建一个HTML页面，用于展示游戏的界面。这包括游戏板、得分显示以及游戏控制区域。

 <!DOCTYPE html>
<html lang="en">
<head>
  <!-- ... 其他头部代码 ... -->
  <style>
    /* ... 样式代码 ... */
  </style>
</head>
<body>
  <h2>俄罗斯方块</h2>
  <div id="tetris">
    <div id="game-board"></div>
    <div id="score">Score: <span id="score-value">0</span></div>
  </div>
  <!-- ... 脚本代码 ... -->
</body>
</html>复制

3. 初始化游戏

在JavaScript中，我们首先初始化游戏状态，包括游戏板、得分、当前形状等。我们还需要创建一个函数来生成随机的形状。

 // ... 其他代码 ...
 
function createShape() {
  // ... 生成随机形状的代码 ...
}
 
// 初始化游戏状态
const boardGrid = initializeBoard();
let score = 0;
let currentShape = createShape();
let currentRow = 0;
let currentCol = Math.floor(cols / 2) - Math.floor(currentShape[0].length / 2);
 
// ... 其他代码 ...复制

4. 绘制游戏板

我们需要编写函数来绘制游戏板和当前形状。这些函数将在游戏开始时和每次形状移动时调用。

 // ... 其他代码 ...
 
function drawBoard() {
  // ... 绘制游戏板的代码 ...
}
 
function drawCurrentShape() {
  // ... 绘制当前形状的代码 ...
}
 
// ... 其他代码 ...复制

5. 游戏逻辑

游戏的核心逻辑包括移动形状、检查碰撞、合并形状、清除行和更新得分。我们还需要处理键盘事件，以便玩家可以控制形状的移动和旋转。

 // ... 其他代码 ...
 
function checkCollision() {
  // ... 检查碰撞的代码 ...
}
 
function mergeShape() {
  // ... 合并形状的代码 ...
}
 
function clearRows() {
  // ... 清除行的代码 ...
}
 
function updateScore() {
  // ... 更新得分的代码 ...
}
 
// ... 其他代码 ...复制

6. 开始游戏

最后，我们设置一个定时器来自动下落形状，并添加键盘事件监听器来处理玩家的输入。

 // ... 其他代码 ...
 
function startGame() {
  // ... 初始化游戏的代码 ...
  setInterval(() => {
    moveDown();
    drawBoard();
    drawCurrentShape();
  }, 500);
  document.addEventListener("keydown", handleKeyPress);
}
 
startGame();
 
// ... 其他代码 ...复制

7.全部代码

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>洛可可白⚡️俄罗斯方块</title>
    <style>
      h2 {
        font-size: 19px;
        text-align: center;
      }
 
      #tetris {
        width: 240px;
        margin: 0 auto;
        background-color: #d5d5d5;
        border-radius: 10px;
        padding: 25px;
      }
 
      #game-board {
        width: 200px;
        height: 400px;
        border: 4px solid #4b6014;
        position: relative;
        border-radius: 10px;
        background-color: #f4f126;
        margin: 0 auto;
      }
 
      #score {
        text-align: center;
        margin-top: 10px;
      }
 
      .block {
        width: 20px;
        height: 20px;
        position: absolute;
        background-color: #000;
        border: 1px solid #3a3a3a;
        box-sizing: border-box;
      }
    </style>
  </head>
 
  <body>
    <h2>俄罗斯方块</h2>
    <div id="tetris">
      <div id="game-board"></div>
      <div id="score">Score: <span id="score-value">0</span></div>
    </div>
  </body>
 
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const board = document.getElementById("game-board");
      const scoreValue = document.getElementById("score-value");
      const blockSize = 20;
      const rows = 20;
      const cols = 10;
      let score = 0;
      let boardGrid = Array.from(Array(rows), () => new Array(cols).fill(0));
      let currentShape;
      let currentRow;
      let currentCol;
 
      function createShape() {
        const shapes = [
          [[1, 1, 1, 1]],
          [
            [1, 1],
            [1, 1],
          ],
          [
            [1, 1, 0],
            [0, 1, 1],
          ],
          [
            [0, 1, 1],
            [1, 1, 0],
          ],
          [
            [1, 1, 1],
            [0, 1, 0],
          ],
          [
            [1, 1, 1],
            [1, 0, 0],
          ],
          [
            [1, 1, 1],
            [0, 0, 1],
          ],
        ];
        const randomIndex = Math.floor(Math.random() * shapes.length);
        const shape = shapes[randomIndex];
        currentShape = shape;
        currentRow = 0;
        currentCol = Math.floor(cols / 2) - Math.floor(shape[0].length / 2);
      }
 
      function drawBoard() {
        board.innerHTML = "";
        for (let row = 0; row < rows; row++) {
          for (let col = 0; col < cols; col++) {
            if (boardGrid[row][col]) {
              const block = document.createElement("div");
              block.className = "block";
              block.style.top = row * blockSize + "px";
              block.style.left = col * blockSize + "px";
              board.appendChild(block);
            }
          }
        }
      }
 
      function drawCurrentShape() {
        for (let row = 0; row < currentShape.length; row++) {
          for (let col = 0; col < currentShape[row].length; col++) {
            if (currentShape[row][col]) {
              const block = document.createElement("div");
              block.className = "block";
              block.style.top = (currentRow + row) * blockSize + "px";
              block.style.left = (currentCol + col) * blockSize + "px";
              board.appendChild(block);
            }
          }
        }
      }
 
      function checkCollision() {
        for (let row = 0; row < currentShape.length; row++) {
          for (let col = 0; col < currentShape[row].length; col++) {
            if (currentShape[row][col]) {
              const newRow = currentRow + row;
              const newCol = currentCol + col;
              if (
                newRow >= rows ||
                newCol < 0 ||
                newCol >= cols ||
                boardGrid[newRow][newCol]
              ) {
                return true;
              }
            }
          }
        }
        return false;
      }
 
      function mergeShape() {
        for (let row = 0; row < currentShape.length; row++) {
          for (let col = 0; col < currentShape[row].length; col++) {
            if (currentShape[row][col]) {
              const newRow = currentRow + row;
              const newCol = currentCol + col;
              boardGrid[newRow][newCol] = 1;
            }
          }
        }
      }
 
      function clearRows() {
        for (let row = rows - 1; row >= 0; row--) {
          if (boardGrid[row].every((cell) => cell)) {
            boardGrid.splice(row, 1);
            boardGrid.unshift(new Array(cols).fill(0));
            score++;
          }
        }
      }
 
      function updateScore() {
        scoreValue.textContent = score;
      }
 
      function moveDown() {
        currentRow++;
        if (checkCollision()) {
          currentRow--;
          mergeShape();
          clearRows();
          updateScore();
          createShape();
          if (checkCollision()) {
            gameOver();
          }
        }
      }
 
      function moveLeft() {
        currentCol--;
        if (checkCollision()) {
          currentCol++;
        }
      }
 
      function moveRight() {
        currentCol++;
        if (checkCollision()) {
          currentCol--;
        }
      }
 
      function rotateShape() {
        const rotatedShape = currentShape[0].map((_, colIndex) =>
          currentShape.map((row) => row[colIndex]).reverse()
        );
        const prevShape = currentShape;
        currentShape = rotatedShape;
        if (checkCollision()) {
          currentShape = prevShape;
        }
      }
 
      function gameOver() {
        alert("Game Over");
        resetGame();
      }
 
      function resetGame() {
        score = 0;
        boardGrid = Array.from(Array(rows), () => new Array(cols).fill(0));
        updateScore();
        createShape();
      }
 
      function handleKeyPress(event) {
        switch (event.key) {
          case "ArrowDown":
            moveDown();
            break;
          case "ArrowLeft":
            moveLeft();
            break;
          case "ArrowRight":
            moveRight();
            break;
          case "ArrowUp":
            rotateShape();
            break;
        }
        drawBoard();
        drawCurrentShape();
      }
 
      function startGame() {
        createShape();
        setInterval(() => {
          moveDown();
          drawBoard();
          drawCurrentShape();
        }, 500);
        document.addEventListener("keydown", handleKeyPress);
      }
 
      startGame();
    });
  </script>
</html>
 复制

🎉 结语

通过本文的教程，你已经学会了如何使用HTML5、CSS3和JavaScript来创建一个基本的俄罗斯方块游戏。这个项目不仅能够帮助你巩固前端开发的技能，还能让你对游戏开发有一个初步的了解。你可以在此基础上添加更多功能，比如增加难度级别、添加音效或者实现多人游戏模式，来提升游戏体验。

感谢你的访问，期待与你在技术的道路上相遇！👋🌟🚀

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- ... 其他头部代码 ... -->
	<style>
	/* ... 样式代码 ... */
	</style>
	</head>
	<body>
	<h2>俄罗斯方块</h2>
	<div id="tetris">
	<div id="game-board"></div>
	<div id="score">Score: <span id="score-value">0</span></div>
	</div>
	<!-- ... 脚本代码 ... -->
	</body>
	</html>

	// ... 其他代码 ...

	function createShape() {
	// ... 生成随机形状的代码 ...
	}

	// 初始化游戏状态
	const boardGrid = initializeBoard();
	let score = 0;
	let currentShape = createShape();
	let currentRow = 0;
	let currentCol = Math.floor(cols / 2) - Math.floor(currentShape[0].length / 2);

	// ... 其他代码 ...

	// ... 其他代码 ...

	function drawBoard() {
	// ... 绘制游戏板的代码 ...
	}

	function drawCurrentShape() {
	// ... 绘制当前形状的代码 ...
	}

	// ... 其他代码 ...

	// ... 其他代码 ...

	function checkCollision() {
	// ... 检查碰撞的代码 ...
	}

	function mergeShape() {
	// ... 合并形状的代码 ...
	}

	function clearRows() {
	// ... 清除行的代码 ...
	}

	function updateScore() {
	// ... 更新得分的代码 ...
	}

	// ... 其他代码 ...

	// ... 其他代码 ...

	function startGame() {
	// ... 初始化游戏的代码 ...
	setInterval(() => {
	moveDown();
	drawBoard();
	drawCurrentShape();
	}, 500);
	document.addEventListener("keydown", handleKeyPress);
	}

	startGame();

	// ... 其他代码 ...

打造经典游戏：HTML5与CSS3实现俄罗斯方块

文章目录

打造经典游戏：HTML5与CSS3实现俄罗斯方块

摘要

1. 体验地址

2. 创建游戏界面

3. 初始化游戏

4. 绘制游戏板

5. 游戏逻辑

6. 开始游戏

7.全部代码

🎉 结语

微信扫一扫：分享