网页版的俄罗斯方块
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的功能、使用方法以及在实际开发中的应…...
MMaDA: Multimodal Large Diffusion Language Models
CODE ： https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA，它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如 中文，英文，日语），语音情感（如 开心，悲伤）&#x…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...
LOOI机器人的技术实现解析：从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品，通过将智能手机转变为具有情感交互能力的桌面机器人，展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家，我将全面解析LOOI的技术实现架构，特别是其手势识别、物体识别和环境…...
go 里面的指针
指针 在 Go 中，指针（pointer）是一个变量的内存地址，就像 C 语言那样： a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10，通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...
Neko虚拟浏览器远程协作方案：Docker+内网穿透技术部署实践
前言：本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中，跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南，你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案，并结合内网…...
ui框架-文件列表展示
ui框架-文件列表展示 介绍 UI框架的文件列表展示组件，可以展示文件夹，支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项，适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...
小智AI+MCP
什么是小智AI和MCP 如果还不清楚的先看往期文章 手搓小智AI聊天机器人 MCP 深度解析：AI 的USB接口 如何使用小智MCP 1.刷支持mcp的小智固件 2.下载官方MCP的示例代码 Github：https://github.com/78/mcp-calculator 安这个步骤执行 其中MCP_ENDPOI…...
Django RBAC项目后端实战 - 03 DRF权限控制实现
项目背景 在上一篇文章中，我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统，为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...