HTML实现俄罗斯方块

embedded/2024/9/24 21:17:28/
htmledit_views">

本篇文章主要讲使用HTML、CSS和JavaScript实现一个简单的俄罗斯方块游戏，包含基本的游戏逻辑、行消除功能以及暂停和继续游戏的控制。

使用工具

本篇文章有用到ChatGPT-4o代码纠错，国内免翻且稳定，感兴趣的大佬试试。

传送门：363Ai工具箱

HTML部分
html"><div id="game"></div>
<div id="message"></div>
<div id="controls"><button onclick="startGame()">继续游戏</button><button onclick="pauseGame()">暂停游戏</button>
</div>

 

解释：

  • <div id="game">：游戏界面，使用CSS Grid布局。
  • <div id="message">：显示游戏失败信息。
  • 按钮：用于控制游戏的继续和暂停。

 

CSS部分
body {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;
}
#game {display: grid;grid-template-columns: repeat(10, 30px);grid-template-rows: repeat(20, 30px);gap: 1px;background-color: #333;
}
.cell {width: 30px;height: 30px;background-color: #fff;
}

解释：

  • 布局：使用Flexbox和Grid布局设计游戏界面。
  • 方块样式：不同形状的方块用不同的颜色表示。

JavaScript部分

游戏逻辑主要使用JavaScript实现。

初始化
javascript">const rows = 20;
const cols = 10;
let board = Array.from({ length: rows }, () => Array(cols).fill(''));
let gameInterval;
let isPaused = false;
let dropInterval = 1000;

解释：

  • 游戏板：一个二维数组表示20行和10列的游戏区域。
  • 游戏状态：gameInterval用于控制方块下落的定时器，isPaused表示游戏是否暂停。

方块定义
javascript">const tetrominoes = {I: [[1, 1, 1, 1]],J: [[1, 0, 0], [1, 1, 1]],// 其他形状...
};

解释：

  • 定义了所有俄罗斯方块的形状。

绘制函数
javascript">function drawBoard() {game.innerHTML = '';board.forEach(row => {row.forEach(cell => {const div = document.createElement('div');div.className = `cell ${cell}`;game.appendChild(div);});});
}

解释：

  • drawBoard()：根据board数组更新游戏界面。

方块移动与旋转
javascript">function canMove(position, shape) {return shape.every((row, i) =>row.every((cell, j) =>!cell || (board[position.y + i] && board[position.y + i][position.x + j] === '')));
}function rotate(shape) {return shape[0].map((_, index) => shape.map(row => row[index]).reverse());
}

解释：

  • canMove()：检查方块是否可以移动到指定位置。
  • rotate()：旋转方块的矩阵。

行消除功能
javascript">function clearFullRows() {board = board.reduce((acc, row) => {if (row.every(cell => cell !== '')) {acc.unshift(Array(cols).fill(''));} else {acc.push(row);}return acc;}, []);
}

解释：

  • clearFullRows()函数：遍历游戏板，检查是否有行被填满。
  • 若有，则移除该行，并在顶部添加一行空行。

游戏循环 

javascript">function drop() {if (isPaused) return;clearTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);currentTetromino.position.y++;if (!canMove(currentTetromino.position, currentTetromino.shape)) {currentTetromino.position.y--;drawTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);if (currentTetromino.position.y === 0) {message.textContent = '你失败啦';clearInterval(gameInterval);} else {clearFullRows();currentTetromino = {type: Object.keys(tetrominoes)[Math.floor(Math.random() * 7)],position: { x: 3, y: 0 },shape: tetrominoes[Object.keys(tetrominoes)[Math.floor(Math.random() * 7)]]};}}drawTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);drawBoard();
}

加速下降功能
  • 按键事件：在keydown事件中，添加对ArrowDown的监听。
  • 加速下降实现：当按下下箭头键时，调用drop()函数，使方块立即下降一格。

 

用户交互
javascript">document.addEventListener('keydown', (e) => {if (e.key === 'ArrowUp') {rotateTetromino();} else if (e.key === 'ArrowLeft') {moveLeft();} else if (e.key === 'ArrowRight') {moveRight();} else if (e.key === 'ArrowDown') {drop();}
});
  • 使用键盘箭头键控制方块的移动、旋转和加速下落。

运行界面：

 

 以下是完整代码：

html"><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>俄罗斯方块</title><style>body {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}#game {display: grid;grid-template-columns: repeat(10, 30px);grid-template-rows: repeat(20, 30px);gap: 1px;background-color: #333;}.cell {width: 30px;height: 30px;background-color: #fff;}.I { background-color: #00f0f0; }.J { background-color: #0000f0; }.L { background-color: #f0a000; }.O { background-color: #f0f000; }.S { background-color: #00f000; }.T { background-color: #a000f0; }.Z { background-color: #f00000; }#message, #score {margin-top: 20px;font-size: 24px;}#message {color: red;}#controls {margin-top: 10px;}button {padding: 10px;font-size: 16px;margin: 5px;}</style>
</head>
<body><div id="game"></div><div id="message"></div><div id="score"></div><div id="controls"><button onclick="startGame()">开始游戏</button><button onclick="pauseGame()">暂停游戏</button><button onclick="restartGame()">重新开始</button></div><script>const game = document.getElementById('game');const message = document.getElementById('message');const scoreDisplay = document.getElementById('score');const rows = 20;const cols = 10;let board, gameInterval, isPaused, dropInterval, score, level, currentTetromino;const tetrominoes = {I: [[1, 1, 1, 1]],J: [[1, 0, 0], [1, 1, 1]],L: [[0, 0, 1], [1, 1, 1]],O: [[1, 1], [1, 1]],S: [[0, 1, 1], [1, 1, 0]],T: [[0, 1, 0], [1, 1, 1]],Z: [[1, 1, 0], [0, 1, 1]]};function initGame() {board = Array.from({ length: rows }, () => Array(cols).fill(''));currentTetromino = {type: Object.keys(tetrominoes)[Math.floor(Math.random() * 7)],position: { x: 3, y: 0 },shape: tetrominoes[Object.keys(tetrominoes)[Math.floor(Math.random() * 7)]]};message.textContent = '';score = 0;level = 1;dropInterval = 1000;updateScore();drawBoard();}function drawBoard() {game.innerHTML = '';board.forEach(row => {row.forEach(cell => {const div = document.createElement('div');div.className = `cell ${cell}`;game.appendChild(div);});});}function drawTetromino(type, position, shape) {shape.forEach((row, i) => {row.forEach((cell, j) => {if (cell) {board[position.y + i][position.x + j] = type;}});});}function clearTetromino(type, position, shape) {shape.forEach((row, i) => {row.forEach((cell, j) => {if (cell) {board[position.y + i][position.x + j] = '';}});});}function canMove(position, shape) {return shape.every((row, i) =>row.every((cell, j) =>!cell || (board[position.y + i] && board[position.y + i][position.x + j] === '')));}function rotate(shape) {return shape[0].map((_, index) => shape.map(row => row[index]).reverse());}function clearFullRows() {let linesCleared = 0;board = board.reduce((acc, row) => {if (row.every(cell => cell !== '')) {acc.unshift(Array(cols).fill(''));linesCleared++;} else {acc.push(row);}return acc;}, []);if (linesCleared > 0) {score += linesCleared * 100;if (score >= level * 1000) {level++;dropInterval = Math.max(100, dropInterval - 100);clearInterval(gameInterval);startGame();}updateScore();}}function updateScore() {scoreDisplay.textContent = `得分: ${score} 级别: ${level}`;}function drop() {if (isPaused) return;clearTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);currentTetromino.position.y++;if (!canMove(currentTetromino.position, currentTetromino.shape)) {currentTetromino.position.y--;drawTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);if (currentTetromino.position.y === 0) {message.textContent = '你失败啦';setTimeout(restartGame, 2000);clearInterval(gameInterval);} else {clearFullRows();currentTetromino = {type: Object.keys(tetrominoes)[Math.floor(Math.random() * 7)],position: { x: 3, y: 0 },shape: tetrominoes[Object.keys(tetrominoes)[Math.floor(Math.random() * 7)]]};}}drawTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);drawBoard();}function rotateTetromino() {if (isPaused) return;clearTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);const rotatedShape = rotate(currentTetromino.shape);if (canMove(currentTetromino.position, rotatedShape)) {currentTetromino.shape = rotatedShape;}drawTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);drawBoard();}function moveLeft() {if (isPaused) return;clearTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);currentTetromino.position.x--;if (!canMove(currentTetromino.position, currentTetromino.shape)) {currentTetromino.position.x++;}drawTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);drawBoard();}function moveRight() {if (isPaused) return;clearTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);currentTetromino.position.x++;if (!canMove(currentTetromino.position, currentTetromino.shape)) {currentTetromino.position.x--;}drawTetromino(currentTetromino.type, currentTetromino.position, currentTetromino.shape);drawBoard();}function startGame() {isPaused = false;clearInterval(gameInterval);gameInterval = setInterval(drop, dropInterval);}function pauseGame() {isPaused = true;clearInterval(gameInterval);}function restartGame() {initGame();clearInterval(gameInterval);}document.addEventListener('keydown', (e) => {if (e.key === 'ArrowUp') {rotateTetromino();} else if (e.key === 'ArrowLeft') {moveLeft();} else if (e.key === 'ArrowRight') {moveRight();} else if (e.key === 'ArrowDown') {drop();}});initGame();</script>
</body>
</html>

这段代码展示了如何用JavaScript实现一个基础的俄罗斯方块游戏，支持基本的方块操作、行消除和游戏状态控制。可以在此基础上添加更多功能，比如计分系统、关卡设计等。

对于编程新手或正在学习新知识的程序员，可以使用ChatGPT来做助手，减少出错性和重复性代码的时间。

感谢阅读！！！


http://www.ppmy.cn/embedded/103844.html

相关文章

XR-Frame 实现 始终朝向屏幕（相机）的面片与模型

XR-Frame 实现 始终朝向屏幕（相机）的面片与模型

wxml&#xff0c;xr-frame中plane平面默认是趴在场景中的&#xff0c;需要先绕x轴渲染90度&#xff0c; // 面片 <xr-node id"l" position"-3.0 0 0.0"><xr-mesh rotation"90 0 0" geometry"plane" uniforms"u_base…
阅读更多...
VIVO 相机HDR拍照流程拆解

VIVO 相机HDR拍照流程拆解

和你一起终身学习&#xff0c;这里是程序员Android 经典好文推荐&#xff0c;通过阅读本文&#xff0c;您将收获以下知识点: HDR 场景下发 3 帧拍照请求HDR 3帧拍照请求帧&#xff08;478,479 480&#xff09;HDR 3帧 result callback帧HDR 算法处理5.算法编解码处理HDR 拍照lo…
阅读更多...
5G SPS配置

5G SPS配置

‌SPS配置‌是一种技术&#xff0c;用于管理和优化数据传输&#xff0c;特别是在无线通信领域。它涉及到为特定的数据传输需求确定最佳的参数配置&#xff0c;以满足不同的传输需求。SPS配置的参数包括时域资源分配、调制编码方式、频域资源分配、虚拟资源块到物理资源块的映射…
阅读更多...
使用 streamlink 把 m3u8 转为 mp4

使用 streamlink 把 m3u8 转为 mp4

问题描述&#xff0c; 背景&#xff0c; 来源&#xff1a; 下载 m3u8 ts —> 转为mp4, 按照以往的做法&#xff0c; 就是使用 python requests 一步一步地下载 m3u8, ts&#xff0c; 然后转换。 但是个人写的东西&#xff0c;毕竟问题比较多。 而且&#xff0c; 但是&…
阅读更多...
Python知识点：如何使用Elasticsearch与Elasticsearch-py进行全文检索

Python知识点：如何使用Elasticsearch与Elasticsearch-py进行全文检索

使用Elasticsearch与elasticsearch-py库进行全文检索可以分为以下几个步骤&#xff1a; 1. 安装elasticsearch-py 首先&#xff0c;确保你已经安装了elasticsearch-py库。你可以使用pip来安装它&#xff1a; pip install elasticsearch2. 连接到Elasticsearch实例 使用elas…
阅读更多...
2 Python开发工具：PyCharm的安装和使用

2 Python开发工具：PyCharm的安装和使用

本文是 Python 系列教程第 2 篇&#xff0c;完整系列请查看 Python 专栏。 1 安装 官网下载地址https://www.jetbrains.com.cn/pycharm/&#xff0c;文件比较大&#xff08;约861MB&#xff09;请耐心等待 双击exe安装 安装成功后会有一个30天的试用期。。。本来想放鸡火教程&…
阅读更多...
React滚动加载（无限滚动）功能实现

React滚动加载（无限滚动）功能实现

在用户滚动到接近页面底部时自动加载更多内容 &#xff1a;可以将事件绑定在antd的Table组件中的onScroll中 &#xff1a;也可以将事件绑定在外层的div的onScroll中 const handleScroll (e) > {const { scrollTop, scrollHeight, clientHeight } e.target;if (scrollTo…
阅读更多...
l_whence 的可能值及其含义

l_whence 的可能值及其含义

在 fcntl 函数中使用 struct flock 结构体进行文件锁定时&#xff0c;l_whence 成员用于指定文件锁操作的起始位置。它定义了文件锁的偏移量是相对于哪个位置的。l_whence 有以下几种可能的值&#xff0c;每种值的含义如下&#xff1a; l_whence 的可能值及其含义 SEEK_SET: 含…
阅读更多...
最新文章

Copyright @ 2022~2023