返回

用HTML、CSS和JS快速搭建俄罗斯方块小游戏：一步步教你用前端技术重现经典游戏！

前端

俄罗斯方块：重温童年经典

介绍

俄罗斯方块，这款经典游戏曾风靡全球，给我们带来了无数欢乐时光。如果你也想重温这款经典，本教程将向你展示如何使用 HTML、CSS 和 JavaScript 构建一个属于你自己的俄罗斯方块小游戏。

搭建游戏界面

第一步是搭建游戏界面。首先，创建一个 HTML 文件并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="script.js"></script>
</body>
</html>

接下来，创建一个 CSS 文件并添加以下代码：

canvas {
  width: 300px;
  height: 600px;
  border: 1px solid black;
}

最后，创建一个 JavaScript 文件并添加以下代码：

// 游戏变量
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var board = [[]];
var fallingPiece = null;
var gameOver = false;

// 游戏函数
function initGame() {
  // 初始化游戏变量
  board = [[]];
  fallingPiece = null;
  gameOver = false;

  // 创建游戏板
  for (var i = 0; i < 20; i++) {
    board.push([]);
    for (var j = 0; j < 10; j++) {
      board[i][j] = 0;
    }
  }

  // 创建一个随机的方块
  fallingPiece = createPiece();
}

function createPiece() {
  // 创建一个随机的方块
  var pieces = [
    [
      [0, 1, 0],
      [1, 1, 1],
      [0, 0, 0]
    ],
    [
      [0, 0, 1],
      [1, 1, 1],
      [0, 0, 0]
    ],
    [
      [1, 1],
      [1, 1]
    ],
    [
      [0, 1, 0],
      [0, 1, 0],
      [0, 1, 0]
    ],
    [
      [1, 0, 0],
      [1, 1, 1],
      [0, 0, 0]
    ],
    [
      [0, 0, 0],
      [1, 1, 1],
      [0, 1, 0]
    ],
    [
      [0, 1, 0],
      [1, 1, 0],
      [0, 1, 0]
    ]
  ];

  return pieces[Math.floor(Math.random() * pieces.length)];
}

function drawBoard() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制游戏板
  for (var i = 0; i < 20; i++) {
    for (var j = 0; j < 10; j++) {
      if (board[i][j] === 1) {
        ctx.fillStyle = "#000000";
        ctx.fillRect(j * 30, i * 30, 30, 30);
      }
    }
  }

  // 绘制正在下落的方块
  if (fallingPiece !== null) {
    for (var i = 0; i < fallingPiece.length; i++) {
      for (var j = 0; j < fallingPiece[i].length; j++) {
        if (fallingPiece[i][j] === 1) {
          ctx.fillStyle = "#ffffff";
          ctx.fillRect((fallingPiece.length + j - 1) * 30, (i + fallingPiece.length - 1) * 30, 30, 30);
        }
      }
    }
  }
}

function updateGame() {
  // 如果游戏结束，则停止游戏
  if (gameOver) {
    return;
  }

  // 让正在下落的方块下落
  fallingPiece = movePiece(fallingPiece, 1, 0);

  // 检查是否游戏结束
  if (checkGameOver(fallingPiece)) {
    gameOver = true;
  }

  // 绘制游戏板
  drawBoard();

  // 循环更新游戏
  requestAnimationFrame(updateGame);
}

function movePiece(piece, x, y) {
  // 创建一个新的方块，并将其位置移动x和y
  var newPiece = [];
  for (var i = 0; i < piece.length; i++) {
    newPiece.push([]);
    for (var j = 0; j < piece[i].length; j++) {
      newPiece[i][j] = piece[i][j];
    }
  }

  for (var i = 0; i < newPiece.length; i++) {
    for (var j = 0; j < newPiece[i].length; j++) {
      if (newPiece[i][j] === 1) {
        newPiece[i][j + x] = 1;
        newPiece[i][j] = 0;
      }
    }
  }

  for (var i = 0; i < newPiece.length; i++) {
    for (var j = 0; j < newPiece[i].length; j++) {
      if (newPiece[i][j] === 1) {
        newPiece[i + y][j] = 1;
        newPiece[i][j] = 0;
      }
    }
  }

  // 检查新的方块是否超出游戏板
  for (var i = 0; i < newPiece.length; i++) {
    for (var j = 0; j < newPiece[i].length; j++) {
      if (newPiece[i][j] === 1 && (i < 0 || i >= 20 || j < 0 || j >= 10)) {
        return piece;
      }
    }
  }

  // 检查新的方块是否与其他方块发生碰撞
  for (var i = 0; i < newPiece.length; i++) {
    for (var j = 0; j < newPiece[i].length; j++) {
      if (newPiece[i][j] === 1 && board[i][j] === 1) {
        return piece;
      }
    }
  }

  // 返回新的方块
  return newPiece;
}

function checkGameOver(piece) {
  // 检查新的方块是否已经到达游戏板的顶部
  for (var i = 0; i < piece.length; i++) {
    for (var j = 0; j < piece[i].length; j++) {
      if (piece[i][j] === 1 && i === 0) {
        return true;
      }
    }
  }

  // 返回false
  return false;
}

window.onload = function() {
  initGame();
  updateGame();
};

游戏控制

要控制俄罗斯方块，你可以使用键盘上的以下按键：

  • 向下箭头 ：让方块下落
  • 向左箭头 ：让方块向左移动
  • 向右箭头 ：让方块向右移动
  • 空格键 ：让方块旋转

常见问题解答

  1. 如何更改方块下落的速度？
    你可以通过修改 updateGame() 函数中的 requestAnimationFrame(updateGame) 函数的调用频率来更改方块下落的速度。
  2. 如何添加分数系统？
    你可以通过在每次消除一行方块时增加一个分数变量来实现分数系统。
  3. 如何实现不同的难度等级？
    你可以通过增加方块下落速度或减少下落时间来实现不同的难度等级。
  4. 如何添加排行榜功能？
    你可以通过使用 localStorage 或数据库来实现排行榜功能。
  5. 如何让游戏适合移动设备？
    你可以通过使用触控事件来让游戏适合移动设备。