菜单 搜索
首页 前端知识 HTML实现俄罗斯方块

HTML实现俄罗斯方块

2024-09-06 00:09:23 前端知识 前端哥 757 600 我要收藏

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

使用工具

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

传送门：363Ai工具箱

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实现。

初始化
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表示游戏是否暂停。

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

解释：

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

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

解释：

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

方块移动与旋转
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()：旋转方块的矩阵。

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

解释：

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

游戏循环 

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()函数，使方块立即下降一格。

 

用户交互
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();
    }
});
  • 使用键盘箭头键控制方块的移动、旋转和加速下落。

运行界面：

 

 以下是完整代码：

<!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来做助手，减少出错性和重复性代码的时间。

感谢阅读！！！

转载请注明出处或者链接地址：https://www.qianduange.cn//article/17771.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

web前端期末项目——HTML CSS JavaScript jQuery Bootstrap 瑞鹏宠物医院

2024-09-27 09:09:59

jquery video视频轮播播放

2024-09-27 09:09:58

掌握jQuery实现Tab组件的完整指南

2024-09-27 09:09:55

大学生网页制作期末作业——html css javascript jquery旅游官网6页 html大学生网站开发实践作业 web网页设计实例作业 (2)

2024-09-27 09:09:46

重拾经典：jQuery 3.4.1 下载与应用指南

2024-09-27 09:09:45

【油猴脚本】00018 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。继续优化UI界面，Jquery爬虫，JavaScript爬虫，HTML Css JavaScript编写

2024-09-27 09:09:42

【echarts】自定义dataZoom样式

2024-09-27 09:09:40

Rollup failed to resolve import “tslib“ from “node_modules/echarts/lib/core/echarts.js“.

2024-09-27 09:09:38

Vue Computed 和 Watch 的区别与运用场景

2024-09-27 09:09:38

flex：弹性盒子布局多行，最后一行左对齐

2024-09-27 09:09:33

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
3

vue使用datav echarts

2024-09-06 00:09:381000
4

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
5

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
6

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
7

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
8

npm的使用

2024-08-18 00:08:131000
9

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
10

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！