网页版的俄罗斯方块
1、新建一个txt文件
2、打开后将代码复制进去保存
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>俄罗斯方块</title><link rel="stylesheet" href="styles.css">
</head><body><div class="game-container"><div id="game-board"></div><div class="sidebar"><div class="score-board"><h2>得分: <span id="score">0</span></h2></div><div class="next-piece-board"><h2>下一个方块</h2><div id="next-piece"></div></div><div class="controls"><h2>操作说明</h2><p>左箭头: 左移</p><p>右箭头: 右移</p><p>下箭头: 下落</p><p>上箭头: 旋转</p><div class="control-buttons"><button id="left-btn">左移</button><button id="right-btn">右移</button><button id="down-btn">下落</button><button id="rotate-btn">旋转</button></div></div></div></div><script src="script.js"></script></body></html>
<style>
body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;
}.game-container {display: flex;gap: 20px;
}#game-board {display: grid;grid-template-columns: repeat(10, 20px);grid-template-rows: repeat(20, 20px);gap: 1px;background-color: #333;width: fit-content;
}.cell {width: 20px;height: 20px;background-color: #000;
}.cell.filled {background-color: #0f0;
}.sidebar {display: flex;flex-direction: column;gap: 20px;
}.score-board,
.next-piece-board,
.controls {background-color: #fff;padding: 10px;border-radius: 5px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}#next-piece {display: grid;grid-template-columns: repeat(4, 20px);grid-template-rows: repeat(4, 20px);gap: 1px;background-color: #333;width: fit-content;
}.control-buttons {display: flex;gap: 10px;
}.control-buttons button {padding: 5px 10px;cursor: pointer;
}</style>
<script>
// 游戏板尺寸
const ROWS = 20;
const COLS = 10;// 方块形状
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 gameBoard = document.getElementById('game-board');
const nextPieceBoard = document.getElementById('next-piece');
const scoreElement = document.getElementById('score');// 创建游戏板
function createBoard() {for (let row = 0; row < ROWS; row++) {for (let col = 0; col < COLS; col++) {const cell = document.createElement('div');cell.classList.add('cell');gameBoard.appendChild(cell);}}
}// 创建下一个方块显示区域
function createNextPieceBoard() {for (let row = 0; row < 4; row++) {for (let col = 0; col < 4; col++) {const cell = document.createElement('div');cell.classList.add('cell');nextPieceBoard.appendChild(cell);}}
}// 获取指定位置的单元格
function getCell(row, col, board) {return board.children[row * (board === gameBoard ? COLS : 4) + col];
}// 随机生成一个方块
function randomShape() {const shapeIndex = Math.floor(Math.random() * SHAPES.length);return SHAPES[shapeIndex];
}// 当前方块
let currentShape;
let currentX;
let currentY;
// 下一个方块
let nextShape;
// 得分
let score = 0;// 生成新方块
function newShape() {currentShape = nextShape || randomShape();nextShape = randomShape();drawNextPiece();currentX = Math.floor(COLS / 2) - Math.floor(currentShape[0].length / 2);currentY = 0;if (!canMove(currentShape, currentX, currentY)) {// 游戏结束alert('游戏结束！最终得分: ' + score);location.reload();}
}// 检查方块是否可以移动到指定位置
function canMove(shape, x, y) {for (let row = 0; row < shape.length; row++) {for (let col = 0; col < shape[row].length; col++) {if (shape[row][col]) {const newX = x + col;const newY = y + row;if (newX < 0 || newX >= COLS || newY >= ROWS || (newY >= 0 && getCell(newY, newX, gameBoard).classList.contains('filled'))) {return false;}}}}return true;
}// 绘制方块
function drawShape() {for (let row = 0; row < currentShape.length; row++) {for (let col = 0; col < currentShape[row].length; col++) {if (currentShape[row][col]) {const x = currentX + col;const y = currentY + row;if (y >= 0) {getCell(y, x, gameBoard).classList.add('filled');}}}}
}// 清除方块
function clearShape() {for (let row = 0; row < currentShape.length; row++) {for (let col = 0; col < currentShape[row].length; col++) {if (currentShape[row][col]) {const x = currentX + col;const y = currentY + row;if (y >= 0) {getCell(y, x, gameBoard).classList.remove('filled');}}}}
}// 绘制下一个方块
function drawNextPiece() {// 清除之前的显示for (let row = 0; row < 4; row++) {for (let col = 0; col < 4; col++) {getCell(row, col, nextPieceBoard).classList.remove('filled');}}// 绘制新的下一个方块for (let row = 0; row < nextShape.length; row++) {for (let col = 0; col < nextShape[row].length; col++) {if (nextShape[row][col]) {getCell(row, col, nextPieceBoard).classList.add('filled');}}}
}// 方块下落
function moveDown() {clearShape();if (canMove(currentShape, currentX, currentY + 1)) {currentY++;} else {// 方块落地，固定方块drawShape();checkLines();newShape();}drawShape();
}// 检查并清除满行
function checkLines() {let linesCleared = 0;for (let row = ROWS - 1; row >= 0; row--) {let isLineFull = true;for (let col = 0; col < COLS; col++) {if (!getCell(row, col, gameBoard).classList.contains('filled')) {isLineFull = false;break;}}if (isLineFull) {linesCleared++;// 清除满行for (let c = 0; c < COLS; c++) {getCell(row, c, gameBoard).classList.remove('filled');}// 上方方块下移for (let r = row; r > 0; r--) {for (let c = 0; c < COLS; c++) {const aboveCell = getCell(r - 1, c, gameBoard);const currentCell = getCell(r, c, gameBoard);if (aboveCell.classList.contains('filled')) {currentCell.classList.add('filled');} else {currentCell.classList.remove('filled');}}}row++; // 再次检查当前行}}// 根据清除的行数增加得分if (linesCleared > 0) {score += linesCleared * 100;scoreElement.textContent = score;}
}// 移动方块
function moveLeft() {clearShape();if (canMove(currentShape, currentX - 1, currentY)) {currentX--;}drawShape();
}function moveRight() {clearShape();if (canMove(currentShape, currentX + 1, currentY)) {currentX++;}drawShape();
}// 旋转方块
function rotateShape() {const rotatedShape = [];for (let col = 0; col < currentShape[0].length; col++) {const newRow = [];for (let row = currentShape.length - 1; row >= 0; row--) {newRow.push(currentShape[row][col]);}rotatedShape.push(newRow);}clearShape();if (canMove(rotatedShape, currentX, currentY)) {currentShape = rotatedShape;}drawShape();
}// 键盘事件处理
document.addEventListener('keydown', function (event) {switch (event.key) {case 'ArrowLeft':moveLeft();break;case 'ArrowRight':moveRight();break;case 'ArrowDown':moveDown();break;case 'ArrowUp':rotateShape();break;}
});// 按钮事件处理
document.getElementById('left-btn').addEventListener('click', moveLeft);
document.getElementById('right-btn').addEventListener('click', moveRight);
document.getElementById('down-btn').addEventListener('click', moveDown);
document.getElementById('rotate-btn').addEventListener('click', rotateShape);// 游戏主循环
function gameLoop() {moveDown();setTimeout(gameLoop, 500);
}// 初始化游戏
createBoard();
createNextPieceBoard();
newShape();
gameLoop();</script>
3、修改文件后缀名为，将txt修改为html
4、打开方式选择浏览器打开，或者打开浏览器直接拖动到里面即可。如果后缀名修改html后，图标显示的是浏览器的图标，直接双击打开即可。
5、效果如下：
相关文章：
网页版的俄罗斯方块
1、新建一个txt文件 2、打开后将代码复制进去保存 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>俄…...
Linux运维_Dockerfile_打包Moby-26.1.4编译dockerd环境
Linux运维_Dockerfile_打包Moby-26.1.4编译dockerd环境 Dockerfile 是一个文本文件, 包含了构建 Docker 镜像的所有指令。 Dockerfile 是一个用来构建镜像的文本文件, 文本内容包含了一条条构建镜像所需的指令和说明。 通过定义一系列命令和参数, Dockerfile 指导 Docker 构…...
数据中心储能蓄电池状态监测管理系统 组成架构介绍
安科瑞刘鸿鹏 摘要 随着数据中心对供电可靠性要求的提高，蓄电池储能系统成为关键的后备电源。本文探讨了蓄电池监测系统在数据中心储能系统中的重要性，分析了ABAT系列蓄电池在线监测系统的功能、技术特点及其应用优势。通过蓄电池监测系统的实施&#…...
layui.table.exportFile 导出数据并清除单元格中的空格
Layui在执行数据导出的时候，会出现部分数据单元格中有空格的情况,下面的方法可以去除掉单元格中的空格,供大家参考！！ function table_export(id,title) {//根据传入tableID获取表头var headers $("div[lay-id" id "] .layu…...
vue-指令
前端开发Vue的指令 Vue.js 提供了丰富的指令系统，用于扩展HTML的功能和行为。这些指令可以分为内置指令和自定义指令两大类。以下是对Vue.js中常见指令的详细解释和示例： 1. 内置指令 1.1 插值表达式 用法：{{ expression }}示例ÿ…...
跟着李沐老师学习深度学习（十三）
现代循环神经网络 循环神经网络中梯度异常在实践中的意义引发了一些问题： 早期观测值影响重大：早期观测值对预测所有未来观测值极为重要，如序列中第一个观测值包含校验和，需在序列末尾辨别其是否正确，若无特殊机制存…...
鸿蒙与跨端迁移的重要性
鸿蒙操作系统（HarmonyOS）是由华为公司开发的一款面向未来的全场景分布式操作系统。它旨在提供一个统一的平台，支持各种设备之间的无缝协作和数据共享，从而为用户提供更加连贯和高效的体验。在鸿蒙的生态系统中，跨端迁移…...
成员函数定义后面加const是什么功能：C++中const成员函数的作用
成员函数定义后面加const是什么功能：C中const成员函数的作用 前言C中const成员函数的作用总结 前言 在PX4的代码中的位置控制模块中，有这样一个成员函数 void getAttitudeSetpoint(vehicle_attitude_setpoint_s &attitude_setpoint) const;该函数的…...
QSNCTF-WEB做题记录
第一题，文章管理系统 来自 <天狩CTF竞赛平台> 描述：这是我们的文章管理系统，快来看看有什么漏洞可以拿到FLAG吧？注意：可能有个假FLAG哦 1，首先观察题目网站的结构和特征 这个一个文件管理系统&#x…...
UE引擎游戏加固方案解析
据VGinsights的报告，近年来UE引擎在过去几年中市场占比显著增长，其中亚洲市场增幅达到了30%，随着UE5的推出和技术的不断进步，UE引擎在独立开发者和移动游戏开发中的应用也在逐步增加。 UE引擎的优势在于强大的画面表现与视觉特效…...
统计函数运行时间的python脚本
这是一个统计函数运行时间的实用脚本，其中用到了函数的嵌套、链式传输参数，以及修饰器。 import time# 定义一个装饰器timer，用于计算被装饰函数的运行时间 def timer(func):print("执行了timer")def wrapper(*args, **kwargs):st…...
大模型WebUI：Gradio全解11——使用transformers.agents构建Gradio UI（3）
大模型WebUI：Gradio全解11——使用transformers.agents构建Gradio UI（3） 前言本篇摘要11. 使用transformers.agents构建Gradio UI11.3 创建和使用工具Tools11.3.1 默认工具箱与load_tool11.3.2 创建新工具11.3.3 管理代理的工具箱toolbox11.3…...
spring boot知识点5
1.如何你有俩套配置环境，运行时如何选择 如果有俩套配置环境，则需要三个yml application.yml 用于配置你用那个配置环境 application-dev.yml 用于开发配置环境 application-prod.yml 用于发布配置环境 spring:profiles:active: prod # 指定当前激…...
【C++】面向对象的三大特性
面向对象编程三大核心特性：封装、继承和多态。 1. 封装 封装指的是将数据和操作这些数据的方法绑定在一起，形成一个对象，并且隐藏对象的内部实现细节，只暴露必要的接口。封装的目的是保护数据，确保外部代码不能直接访…...
Docker构建时，设定默认进入的工作目录的方法
在 Docker 中，你可以通过不同的方式来设定容器默认进入的目录，以下针对不同场景分别介绍具体方法： 1. 使用 Dockerfile 设定工作目录 如果你是通过构建镜像的方式来运行容器，那么可以在 Dockerfile 中使用 WORKDIR 指令来设置容器启动时的默认工作目录。以下是具体步骤：…...
DeepSeek等大模型功能集成到WPS中的详细步骤
记录下将**DeepSeek功能集成到WPS中**的步骤，以备忘。 1. 下载并安装OfficeAI插件 访问OfficeAI插件下载地址：https://www.office-ai.cn/，下载插件（目前只支持windows系统）。 注意，有两个插件࿰…...
教学资料档案管理系统
本系统构建 JAVA 体系的后端系统，围绕以安全，可靠，高速，健壮，易于扩展为目标的方向进行开发，在阿里等开源库的基础上实现提供教学资料档案的管理系统的后端接口的微服务架构系统。 功能包含：系…...
linux core分析---TLS读取异常
文章目录 TLS概念core 线程调用栈查看堆栈： bt查看所有线程堆栈:core分析：锁分析代码修改：thread8 f 4 (第四层堆栈) jcallback.c:186**thread10 f4 SynStack.cpp:1175tl_send_message 加锁修改tls_table1 socket_tab加锁保护2 增加tls_table 中buse的使用3 tls_tl_read_mes…...
SpringBoot 排除一些包的注入
文章目录 需求一、使用 ComponentScan 需求 在系统迭代的过程中，有一些 Controller 大批量的不再使用，或者有一些接口我们不想再提供给外界 一、使用 ComponentScan SpringBootApplication(scanBasePackages "com.zrb.excludeSomePkg") Comp…...
PHP Composer：高效项目依赖管理工具详解
PHP Composer：高效项目依赖管理工具详解 引言 随着Web开发领域的不断扩展，项目的复杂性也在逐渐增加。为了提高开发效率，减少重复劳动，依赖管理工具应运而生。其中，PHP的Composer成为了开发者们的首选。本文将详细介绍PHP Composer的功能、使用方法以及在实际开发中的应…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
7.4.分块查找
一.分块查找的算法思想： 1.实例： 以上述图片的顺序表为例， 该顺序表的数据元素从整体来看是乱序的，但如果把这些数据元素分成一块一块的小区间， 第一个区间[0,1]索引上的数据元素都是小于等于10的， 第二…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
.Net框架，除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
YSYX学习记录（八）
C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？
Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步 不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...