网页版的俄罗斯方块
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的功能、使用方法以及在实际开发中的应…...
网络编程（Modbus进阶）
思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明：假设每台服务器已…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节，供应链协同管理在供应链上下游企业之间建立紧密的合作关系，通过信息共享、资源整合、业务协同等方式，实现供应链的全面管理和优化，提高供应链的效率和透明度，降低供应链的成…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题： 指定音频引擎与设备；播放音频文件 本文所使用的环境： Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。 在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路：将增量判…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...