网页版的俄罗斯方块
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>俄…...
创建虚拟环境以及配置对应的项目依赖
文章目录 首先创建一个虚拟环境，创建一个名字为myenv,并且版本为xxx的虚拟环境 conda create --name myenv pythonxxx激活虚拟环境 conda activate myenv下载所需的依赖，如果有requirements.txt文件 pip install -r requirements.txt容易出现的错误&a…...
网络安全第三次练习
一、实验拓扑 二、实验要求 配置真实DNS服务信息，创建虚拟服务，配置DNS透明代理功能 三、需求分析 1.创建用户并配置认证策略 2.安全策略划分接口 3.ip与策略配置 四、实验步骤 1.划分安全策略接口 2.创建用户并进行策略认证 3.配置安全策略 4.NAT配…...
写大论文的word版本格式整理，实现自动生成目录、参考文献序号、公式序号、图表序号
前情提要：最近开始写大论文，发现由于内容很多导致用老方法一个一个改的话超级麻烦，需要批量自动化处理，尤其是序号，在不断有增添删减的情况时序号手动调整很慢也容易出错，所以搞一个格式总结，记…...
STM32——HAL库开发笔记22（定时器3—呼吸灯实验）（参考来源：b站铁头山羊）
本文利用前几节所学知识来实现一个呼吸灯实验：两颗led灯交替呼吸。 一、STM32CubeMX配置 step1：配置调试接口 step2：配置定时器 定时器1位于APB2总线上，如上图所示。 step3：配置时基单元 按照下图配置 时钟来源配置…...
GPU和FPGA的区别
GPU（Graphics Processing Unit，图形处理器）和 FPGA（Field-Programmable Gate Array，现场可编程门阵列）不是同一种硬件。 我的理解是，虽然都可以用于并行计算，但是GPU是纯计算的硬件…...
vue3页面显示tiff图片
浏览器网页一般不直接支持tiff图片的显示，需要用到tiff.js这个库，首先安装tiff.js，使用命令 npm install tiff.js安装。 首先，引入相关库 import axios from axios; import { ref } from vue; import {TIFF } from tiff.js 在v…...
玩转 Java 与 Python 交互，JEP 库来助力
文章目录 玩转 Java 与 Python 交互，JEP 库来助力一、背景介绍二、JEP 库是什么？三、如何安装 JEP 库？四、JEP 库的简单使用方法五、JEP 库的实际应用场景场景 1：数据处理场景 2：机器学习场景 3：科学计算场…...
【单片机毕业设计14-基于stm32c8t6的智能宠物养护舱系统设计】
【单片机毕业设计14-基于stm32c8t6的智能宠物养护舱系统设计】 前言一、功能介绍二、硬件部分三、软件部分总结 前言 🔥这里是小殷学长，单片机毕业设计篇14-基于stm32c8t6的智能宠物养护舱系统设计 🧿创作不易，拒绝白嫖可私 一、功…...
ASUS/华硕天选4 Plus 锐龙版 FA507X FA707X 原厂Win11 22H2专业版系统 工厂文件 带ASUS Recovery恢复
华硕工厂文件恢复系统 ，安装结束后带隐藏分区，带一键恢复，以及机器所有的驱动和软件。 支持型号：FA507XU FA507XV FA507XQ FA507XJ FA507XI, FA707XV, FA707XU, FA707XQ, FA707XJ, FA707XI, FA707XIN 系统版本：Windo…...
从头再来！社招找工作——算法题复习九：动态规划
从头再来！社招找工作——算法题复习九：动态规划 动态规划斐波那数列跳台阶跳台阶/爬楼梯最小花费跳台阶 最长公共子序列矩阵矩阵路线总数矩阵路线总数有障碍物矩阵的最小路径和三角形的最小路径和 买卖股票的最佳时机（T1天 / 当日不可卖&…...
检测服务端口是否开放的常用方法
检测服务端口是否开放的常用方法 文章目录 检测服务端口是否开放的常用方法背景使用nc命令使用 telnet 命令使用 curl 命令使用 openssl 命令使用 Python 脚本,socket连接使用 bash 内建命令:使用 nmap:总结 背景 有时候需要测试网络是否连通，端口是否开放…...
23贪心算法
分发饼干 class Solution { public:int findContentChildren(vector<int>& g, vector<int>& s) {int i0,j0;int count0;sort(s.begin(),s.end());sort(g.begin(),g.end());while(i<g.size()&&j<s.size()){if(g[i]<s[j]){i;j;count;}else…...
网站快速收录：如何优化网站404页面？
优化网站404页面是提升用户体验和SEO效果的重要一环。以下是一些优化404页面的建议： 一、设计友好的404页面 简洁明了的提示信息：使用清晰的语言告诉用户该页面不存在或已被删除，避免使用过于技术化的术语。 提供导航链接：在40…...
DevEco Studio常用快捷键以及如何跟AndroidStudio的保持同步
DevEco Studio快捷键 DevEco Studio是华为推出的用于开发HarmonyOS应用的集成开发环境，它提供了丰富的快捷键以提高开发效率，以下为你详细介绍不同操作场景下的常用快捷键： 通用操作快捷键 操作描述Windows/Linux 快捷键Mac 快捷键打开设置窗…...
Ubuntu服务器 /data 盘需要手动挂载的解决方案
服务器 /data 盘需要手动挂载的解决方案 如果重启服务器后，发现 /data 盘 没有自动挂载，通常是因为： /etc/fstab 配置文件 没有正确设置 自动挂载。该磁盘 没有被正确识别，需要手动挂载。文件系统错误 导致挂载失败。 下面是解…...
[Windows] 全国油价实时查询，可具体到城市
[Windows] 全国油价实时查询，可具体到城市 链接：https://pan.xunlei.com/s/VOJnS3aOPeBwGaSvS0O0E1hwA1?pwdx83j# 出于代码练习的目的，调用公共免费api做的py程序，已经一键打包，双击启动即可 使用：选择…...
香橙派/树莓派 利用Wiring库 使用GPIO模拟PWM
香橙派或者树莓派 等开发板，本身带有硬件PWM,比如香橙派3 lts版，但是这个引脚不符合我的项目需求，我需要外接一个电机，在检测到人脸的时候 转动，但是这个硬件引脚，只要上电就开始输出pwm 信号，导…...
【CSS】---- CSS 变量，实现样式和动画函数复用
1. 前言 本文介绍 CSS 的自定义属性（变量）来实现样式、动画等 CSS 的复用。都是知道在 CSS 和 JS 复用一个很重要的事情，比如 JS 的函数封装，各个设计模式的使用等等，CSS 中样式的复用，同样重要。MDN 使用 CSS 自定义属性（变量）：自定义属性（有时候也被称作CSS 变量或…...
C#实现Modbus TCP 通讯测试软件
C#实现Modbus TCP 通讯测试软件，源码，包括读写功能。 文件列表 WindowsFormsApplication6/WindowsFormsApplication6.sln , 1041 WindowsFormsApplication6/WindowsFormsApplication6.v12.suo , 39936 WindowsFormsApplication6/WindowsFormsApplicati…...
装修流程图： 装修前准备 → 设计阶段 → 施工阶段 → 安装阶段 → 收尾阶段 → 入住
文章目录 引言I 毛坯房装修的全流程**1. 装修前准备****1.1 确定装修预算****1.2 选择装修方式****1.3 选择装修公司****1.4 办理装修手续****2. 设计阶段****2.1 量房****2.2 设计方案****2.3 确认方案****3. 施工阶段****3.1 主体拆改****3.2 水电改造****3.3 防水工程****3.…...
Windows逆向工程入门之串流操作指令解析与拓展
公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页 目录 1. 串流操作指令简介 2. 串流指令及其操作解析 2.1 DF（方向标志） 设置和清除 2.2 STOS（存储串操作） 指令格式 操作过程 应用场景 …...
【论文解读】《Training Large Language Models to Reason in a Continuous Latent Space》
论文链接 1. 背景与动机 语言空间与推理的矛盾 目前大多数大语言模型（LLMs）在解决复杂问题时采用链式思维（Chain-of-Thought, CoT）方法，即利用自然语言逐步推导出答案。然而，论文指出： 自然语言…...
topN 相似度 torch实现
目录 优化版，去重相似度 topN 欧式距离版 没有去重复， 优化版，去重相似度 import torch import torch.nn.functional as F torch.manual_seed(42) # 假设 10 条数据，每条数据的特征维度是 128 data = torch.randn(10, 128)# 计算所有数据对之间的余弦相似度 cosine_simi…...
深度剖析 C 语言函数递归：原理、应用与优化
在 C 语言的函数世界里，递归是一个独特且强大的概念。它不仅仅是函数调用自身这么简单，背后还蕴含着丰富的思想和广泛的应用。今天，让我们跟随这份课件，深入探索函数递归的奥秘。 一、递归基础：概念与思想 递归是一种…...
goredis常见基础命令
基本操作 //删除键 exists,err: rdb.Exists(ctx,"key").Result() if err!nil{panic(err) } if exists>0{err rdb.Del(ctx,"key").Err()if err!nil{panic(err)} }string类型 //设置一个键值对 //0表示没有过期时间 err:rdb.Set(ctx,"key1",…...
【Linux网络】序列化、守护进程、应用层协议HTTP、Cookie和Session
⭐️个人主页：小羊 ⭐️所属专栏：Linux 很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录 1、序列化和反序列化2、守护进程2.1 什么是进程组？2.2 什么是会话？ 3、应用层协议HTTP3.1 HTTP协议3.2 HT…...
JavaScript函数-arguments的使用
在JavaScript编程语言中，函数是构建复杂逻辑和实现代码复用的关键组件。虽然现代JavaScript（尤其是ES6及之后版本）提供了更多灵活的方式来处理函数参数（如剩余参数、默认参数等），但arguments对象仍然是一个…...
Hadoop常用操作命令
在NameNode节点格式化集群 初始化集群 hdfs namenode -format启动HDFS sbin/start-dfs.sh启动yarn sbin/start-yarn.sh启动NodeManager yarn-daemon.sh start nodemanager启动DataNode hadoop-daemon.sh start datanode启动SecondaryNameNode hadoop-daemon.sh start se…...
system verilog的流操作符
流操作符，有分为操作对象是一整个数组和单独的数据两种，例如bit [7:0] a[4]和bit [31:0] b，前者操作对象是数组，后者是单独一个较大位宽的数。 流操作符有<<和>>，代表从右向左打包和从左向右打包。 打包的…...