当前位置：首页 > news >正文

基于Canvas和和原生JS实现俄罗斯方块小游戏

news 来源：原创 2025/8/25 3:17:12

这里是一个完整的H5俄罗斯方块游戏，使用了 HTML + CSS + JavaScript (原生) 实现，支持基本的俄罗斯方块玩法，如：
✅ 方块自动下落
✅ 方向键控制移动、旋转、加速下落
✅ 方块堆叠、消行
✅ 计分系统
在这里插入图片描述

在 canvas 上绘制游戏，并使用 requestAnimationFrame 进行流畅的动画渲染。下面是完整的代码：


const canvas = document.getElementById("tetris");
const ctx = canvas.getContext("2d");
const ROWS = 20;
const COLS = 10;
const SIZE = 30; // 每个格子的大小// 定义俄罗斯方块的形状
const SHAPES = [[[1, 1, 1, 1]], // I[[1, 1], [1, 1]], // O[[0, 1, 0], [1, 1, 1]], // T[[1, 1, 0], [0, 1, 1]], // S[[0, 1, 1], [1, 1, 0]], // Z[[1, 0, 0], [1, 1, 1]], // J[[0, 0, 1], [1, 1, 1]], // L
];// 颜色数组
const COLORS = ["cyan", "yellow", "purple", "green", "red", "blue", "orange"];let board = Array.from({ length: ROWS }, () => Array(COLS).fill(0));
let currentPiece;
let gameOver = false;
let score = 0;// 生成新方块
function newPiece() {const index = Math.floor(Math.random() * SHAPES.length);currentPiece = {shape: SHAPES[index],color: COLORS[index],row: 0,col: Math.floor(COLS / 2) - 1,};
}
newPiece();// 画一个方块
function drawBlock(x, y, color) {ctx.fillStyle = color;ctx.fillRect(x * SIZE, y * SIZE, SIZE, SIZE);ctx.strokeStyle = "black";ctx.strokeRect(x * SIZE, y * SIZE, SIZE, SIZE);
}// 画游戏面板
function drawBoard() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (let r = 0; r < ROWS; r++) {for (let c = 0; c < COLS; c++) {if (board[r][c]) {drawBlock(c, r, board[r][c]);}}}drawPiece();
}// 画当前下落的方块
function drawPiece() {currentPiece.shape.forEach((row, r) => {row.forEach((cell, c) => {if (cell) {drawBlock(currentPiece.col + c, currentPiece.row + r, currentPiece.color);}});});
}// 碰撞检测
function isValidMove(offsetRow, offsetCol, shape) {return shape.every((row, r) =>row.every((cell, c) => {if (!cell) return true;let newRow = currentPiece.row + r + offsetRow;let newCol = currentPiece.col + c + offsetCol;return (newRow >= 0 &&newRow < ROWS &&newCol >= 0 &&newCol < COLS &&!board[newRow][newCol]);}));
}// 移动方块
function movePiece(offsetRow, offsetCol) {if (isValidMove(offsetRow, offsetCol, currentPiece.shape)) {currentPiece.row += offsetRow;currentPiece.col += offsetCol;}
}// 旋转方块
function rotatePiece() {const rotated = currentPiece.shape[0].map((_, c) =>currentPiece.shape.map(row => row[c]).reverse());if (isValidMove(0, 0, rotated)) {currentPiece.shape = rotated;}
}// 触底逻辑
function placePiece() {currentPiece.shape.forEach((row, r) => {row.forEach((cell, c) => {if (cell) {board[currentPiece.row + r][currentPiece.col + c] = currentPiece.color;}});});clearRows();newPiece();if (!isValidMove(0, 0, currentPiece.shape)) {gameOver = true;}
}// 消行逻辑
function clearRows() {board = board.filter(row => row.some(cell => !cell));while (board.length < ROWS) {board.unshift(Array(COLS).fill(0));score += 10;}
}// 游戏循环
function update() {if (!gameOver) {if (isValidMove(1, 0, currentPiece.shape)) {movePiece(1, 0);} else {placePiece();}drawBoard();document.getElementById("score").innerText = score;setTimeout(update, 500);} else {alert("游戏结束!");}
}
update();// 监听键盘事件
document.addEventListener("keydown", (event) => {if (gameOver) return;if (event.key === "ArrowLeft") movePiece(0, -1);if (event.key === "ArrowRight") movePiece(0, 1);if (event.key === "ArrowDown") movePiece(1, 0);if (event.key === "ArrowUp") rotatePiece();drawBoard();
});

说明：

使用 canvas 进行绘制
方块随机生成并自动下落
方向键：
- 左/右键 移动
- 下键加速下落
- 上键旋转
触底后自动消行并累加得分
游戏结束提示 alert("游戏结束!")

你可以直接将这段代码放入 index.html 页面，并配合 <canvas> 运行。

基于Canvas和和原生JS实现俄罗斯方块小游戏

这里是一个完整的H5俄罗斯方块游戏，使用了 HTML CSS JavaScript (原生) 实现，支持基本的俄罗斯方块玩法，如： ✅ 方块自动下落 ✅ 方向键控制移动、旋转、加速下落 ✅ 方块堆叠、消行 ✅ 计分系统在 canvas 上绘制游戏&#x…...

编程日记 2025/8/25 3:17:12

阿里云 QwQ-32B 模型调研文档

阿里云 QwQ-32B 模型调研文档 ——技术解析、部署实践与微调指南一、模型概述 QwQ-32B 是阿里云开源的轻量化大语言模型，以 320 亿参数实现与 DeepSeek-R1（6710 亿参数）相当的推理性能。其核心优势包括：参数效率：1/20 参数量达成竞品性能，显存需求降低 70%部署灵活性…...

编程日记 2025/8/24 4:49:12

【玩转23种Java设计模式】结构型模式篇：组合模式

软件设计模式（Design pattern），又称设计模式，是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。汇总目录链接&…...

编程日记 2025/8/25 2:59:54

Eolink：专为开发者设计的API协作平台

Eolink Apikit 是一款集 API 设计、管理、自动化测试、Mock 和异常监控于一体的全生命周期智能协作平台，旨在提升 API 研发和管理的效率。以下是对其功能和特点的详细介绍： 核心功能： API 设计与文档管理：Apikit 提供了强大的 API…...

编程日记 2025/8/24 11:58:51

【Python】为什么要写init.py

文章目录 PackageA(__init__特性)应该往__init__.py里放什么东西？1、包的初始化2、管理包的公共接口3、包的信息正常我们直接导入就可以执行，但是在package的时候，有一种__init__.py的特殊存在引入moduleA.py，执行main.py&…...

编程日记 2025/8/25 2:54:47

golang 从零单排 (一) 安装环境

1.下载安装打开网址The Go Programming Language 直接点击下载go1.24.1.windows-amd64.msi 下载完成直接双击下一步下一步安装完成环境变量自动设置不必配置 2.验证 win r 输入cmd 打开命令行输入go version...

编程日记 2025/8/25 2:52:03

30-判断子序列

给定字符串 s 和 t ，判断 s 是否为 t 的子序列。字符串的一个子序列是原始字符串删除一些（也可以不删除）字符而不改变剩余字符相对位置形成的新字符串。（例如，"ace"是"abcde"的一个子序列&#…...

编程日记 2025/8/25 2:54:45

AI 驱动的软件测试革命：从自动化到智能化的进阶之路

🚀引言：软件测试的智能化转型浪潮在数字化转型加速的今天，软件产品的迭代速度与复杂度呈指数级增长。传统软件测试依赖人工编写用例、执行测试的模式，已难以应对快速交付与高质量要求的双重挑战。人工智能技术的突破为测试领域注…...

编程日记 2025/8/25 2:54:46

深度相机进行目标物体的空间姿态（位姿）估计

利用深度相机（如Kinect、Intel Realsense、Zed相机等）进行目标物体的空间姿态（位姿）估计，通常结合了3D点云处理、目标识别和位姿优化算法。以下是完整的实现流程、算法选择及注意事项： 一、实现流程 1. 目…...

编程日记 2025/8/16 11:52:46

3月8日实验

拓扑： 需求： 1.学校内部的HTTP客户端可以正常通过域名www.baidu.com访问到白度网络中的HTTP服务器 2.学校网络内部网段基于192.168.1.0/24划分，PC1可以正常访问3.3.3.0/24网段，但是PC2不允许 3.学校内部路由使用静态路由&#…...

编程日记 2025/8/18 12:25:25

一、viper笔记【七米】 https://liwenzhou.com/posts/Go/viper/ 二、优雅关机和平滑重启 https://liwenzhou.com/posts/Go/graceful-shutdown/ 三、gin使用zap https://liwenzhou.com/posts/Go/zap-in-gin/ 四、flag 用于命令行传参 https://liwenzhou.com/posts/Go/flag/ 五、…...

编程日记 2025/8/25 2:54:47

Autosar技术栈总目录

总目录 Autosar架构理解Autosar Mcal配置开发（TC3xx系列基于EB）Autosar Mcal配置开发（S32K3xx系列基于EB）Autosar BSW服务开发（基于Davinci CFG &Dev）Makefile编译自动化脚本持续更新中… Autosar架…...

编程日记 2025/8/25 3:17:11

开发指南107-谷歌内核浏览器滚动条设置

平台上统一制定了滚动条样式(仅限于webkit内核)：/* ------美化谷歌浏览器滚动条开始-----------*/ ::-webkit-scrollbar{width:12px;height:12px;background-color: #E1E1E1;} ::-webkit-scrollbar-button:single-button { background-color:#E1E1E1; display: …...

编程日记 2025/8/25 3:07:04

25年携程校招社招求职能力北森测评材料计算部分：备考要点与误区解析

在求职过程中，能力测评是筛选候选人的重要环节之一。对于携程这样的知名企业，其能力测评中的材料计算部分尤为关键。许多求职者在备考时容易陷入误区，导致在考试中表现不佳。本文将深入解析材料计算部分的实际考察方向，并提供针对…...

编程日记 2025/8/25 2:57:23

Linux系统编程--线程同步

目录一、前言二、线程饥饿三、线程同步四、条件变量 1、cond 2、条件变量的使用五、条件变量与互斥锁一、前言上篇文章我们讲解了线程互斥的概念，为了防止多个线程同时访问一份临界资源而出问题，我们引入了线程互斥，线程互斥其实…...

编程日记 2025/8/25 3:09:38

李沐《动手学深度学习》——14.9. 用于预训练BERT的数据集——wiki数据集问题以及存在的其他问题

问题1：出现"file is not a zip file" 原因是链接已经失效。解决方法：打开下面链接自行下载，需要魔法。下载完解压到特定位置。下载链接：项目首页 - Wikitext-2-v1数据包下载:Wikitext-2-v1 数据包下载本仓库提供了一…...

编程日记 2025/8/18 23:00:45

【英伟达AI论文】多模态大型语言模型的高效长视频理解

摘要：近年来，基于视频的多模态大型语言模型（Video-LLMs）通过将视频处理为图像帧序列，显著提升了视频理解能力。然而，许多现有方法在视觉主干网络中独立处理各帧，缺乏显式的时序建模，…...

编程日记 2025/8/21 15:50:49

深入理解 DOM 元素

深入理解 DOM 元素：构建动态网页的基石在网页开发的世界里，DOM（Document Object Model，文档对象模型）元素宛如一座桥梁，连接着静态的 HTML 结构与动态的 JavaScript 交互逻辑。它让原本呆板的网页变得鲜活…...

编程日记 2025/8/22 21:45:10

linux如何判断进程对磁盘是随机写入还是顺序写入？

模拟工具&性能测试工具：fio fio参数说明： filename/dev/sdb1：测试文件名称，通常选择需要测试的盘的data目录。 direct1：是否使用directIO，测试过程绕过OS自带的buffer，使测试磁盘的结果更真…...

编程日记 2025/8/20 14:35:30

实现静态网络爬虫（入门篇）

一、了解基本概念以及信息 1.什么是爬虫爬虫是一段自动抓取互联网信息的程序，可以从一个URL出发，访问它所关联的URL，提取我们所需要的数据。也就是说爬虫是自动访问互联网并提取数据的程序。它可以将互联网上的数据为我所用，…...

编程日记 2025/8/21 5:12:42

[Web]get请求和post请求

Get get请求的特点是： 1.所有的参数都通过URL进行传递。其中传输的参数的书写的格式为?key1value1&key2value2。具体示例：https://example.com/search?qapple&limit10。访问的时候，先写/xxx，确定本次请求要访问的资源u…...

编程日记 2025/8/22 1:02:16

【落羽的落羽 C++】C++入门基础：引用，内联，nullptr

文章目录一、引用1. 引用的概念2. 引用的特点3. 引用的使用4. const引用5. 引用和指针二、inline内联三、nullptr 一、引用 1. 引用的概念引用是C中的一个较为重要的概念。它是给已存在变量取的“别名”，编译器不会为引用变量开辟内存空间，它和它引…...

编程日记 2025/8/20 13:05:19

RabbitMQ应用问题大全（精心整理版）

前言其实这部分知识我是整理在语雀上了，这里是直接复制粘贴过来的。不是很好阅读，可以直接点下方链接去语雀看，那个看的会舒服很多。 https://www.yuque.com/g/ngioig/upbg6b/fkarhyo8fpgrtyq8/collaborator/join?tokenGvlO0di8KaIfO8aF&am…...

编程日记 2025/8/20 4:14:56

【人工智能】卷积神经网络的奥秘：深度学习的视觉革命

卷积神经网络（CNN）是深度学习中处理图像、视频等高维数据的主流模型，因其局部特征提取和参数共享特性而效率高且效果优异。本文深入探讨了CNN的理论基础，包括卷积操作、池化层、激活函数和全连接层的数学原理，并通过LaTeX公式推导其前向传播和反向传播过程。接着，我们提供…...

编程日记 2025/8/22 5:21:42

掌握MiniQMT：程序化下单与撤单的高效实现

掌握MiniQMT：程序化下单与撤单的高效实现 🚀量化软件开通 🚀量化实战教程在量化交易领域，程序化下单与撤单是实现自动化交易策略的关键环节。通过MiniQMT平台，我们可以高效地执行这些操作，从而快速响应…...

编程日记 2025/8/20 21:02:22

【高级篇】大疆Pocket 3加ENC编码器实现无线RTMP转HDMI进导播台

【高级篇】大疆Pocket 3加ENC编码器实现无线RTMP转HDMI进导播台文章目录准备工作连接设备RTMP概念ENCSHV2推流地址设置大疆Pocket 3直播设置总结老铁们好！ 很久没写软文了，今天给大家带了一个干货，如上图，大疆Pocket 3加ENC编…...

编程日记 2025/8/21 2:19:08

Nacos学习笔记-占位符读取其他命名空间内容

Nacos当前命名空间下的配置文件需要跨命名空间读取其他配置文件的内容。可以先通过Nacos提供的API接口获取配置文件内容，然后解析数据将其放入环境的PropertySource中。相关依赖包  <dependency><groupId>com.alibaba.clo…...

编程日记 2025/8/23 7:12:01

每天五分钟深度学习框架PyTorch：使用残差块快速搭建ResNet网络

本文重点前面我们使用pytorch搭建了残差块，本文我们更进一步，我们使用残差块搭建ResNet网络，当学会如何搭建残差块之后，搭建ResNet就会非常简单了，因为ResNet就是由多个残差块组成的。残差块残差块我们前面已经介…...

编程日记 2025/8/21 16:11:15

python操作java文件的一种方法

对于python操作java代码的场景来说，比较多的可能就是涉及加密的场景，尤其涉及到登录的场景，对于输入的账号密码可能会涉及到加密，如果开发告诉我们如何加密，那么，OK，我们可以直接通过代码去实现…...

编程日记 2025/8/23 10:22:09

自然语言处理：最大期望值算法

介绍大家好，博主又来给大家分享知识了，今天给大家分享的内容是自然语言处理中的最大期望值算法。那么什么是最大期望值算法呢？ 最大期望值算法，英文简称为EM算法，它的核心思想非常巧妙。它把求解模型参数的过程分成…...

编程日记 2025/8/16 10:05:29

leetcode-sql数据库面试题冲刺（高频SQL五十题）

题目： 197.上升的温度表： Weather ---------------------- | Column Name | Type | ---------------------- | id | int | | recordDate | date | | temperature | int | ---------------------- id 是该表具有唯一值的列。没有具有相同 recordDate …...

编程日记 2025/8/19 20:26:10

开发者社区测试报告(功能测试+性能测试)

功能测试测试相关用例开发者社区功能背景在当今数字化时代，编程已经成为一项核心技能，越来越多的人开始学习编程，以适应快速变化的科技环境。基于这一需求，我设计开发了一个类似博客的论坛系统，专注于方便程序员…...

编程日记 2025/8/20 14:48:21

环形链表问题的探究与代码实现

在数据结构与算法的学习中，环形链表是一个经典的问题。它不仅考察对链表这种数据结构的理解，还涉及到指针操作和逻辑推理。本文将结合代码和图文，深入分析如何判断链表中是否有环以及如何找到环的入口点。目录一、判断链表中是否有环 …...

编程日记 2025/8/25 2:40:20

【C++】vector(下)：vector类的模拟实现（含迭代器失效问题）

文章目录前言一、vector类的常用接口的模拟实现1.头文件（my vector.h）整体框架2.模拟实现vector类对象的常见构造3.模拟实现vector iterator4.模拟实现vector类对象的容量操作5.模拟实现vector类对象的访问6.模拟实现vector类对象的修改操作二、vector…...

编程日记 2025/8/22 7:19:24

NLTK和jieba

NLTK与jieba概述自然语言处理（NLP）领域是计算机科学领域与人工智能领域中的一个重要方向，主要研究方向是实现人与计算机之间用自然语言进行有效通信的各种理论和方法。在自然语言处理领域中，文本类型的数据占据着很大的市场&a…...

编程日记 2025/8/21 20:25:49

Java后端高频面经——计算机网络

TCP/IP四层模型？输入一个网址后发生了什么，以百度为例？（美团） （1）四层模型应用层：支持 HTTP、SMTP 等最终用户进程传输层：处理主机到主机的通信（TCP、UDP&am…...

编程日记 2025/8/24 15:40:07

CSDN博客：Markdown编辑语法教程总结教程（中）

❤个人主页：折枝寄北的博客 Markdown编辑语法教程总结前言1. 列表1.1 无序列表1.2 有序列表1.3 待办事项列表1.4 自定义列表 2. 图片2.1 直接插入图片2.2 插入带尺寸的图片2.3 插入宽度确定，高度等比例的图片2.4 插入高度确定宽度等比例的图片2.5 插入居…...

编程日记 2025/8/16 10:05:08

Springboot redis bitMap实现用户签到以及统计，保姆级教程

项目架构，这是作为demo展示使用： Redis config： package com.zy.config;import com.fasterxml.jackson.annotation.JsonAutoDetect; import com.fasterxml.jackson.annotation.PropertyAccessor; import com.fasterxml.jackson.databind.Ob…...

编程日记 2025/8/20 2:34:33

AI Agent系列(一) - Agent概述

AI Agent系列【一】前言一、AI代理的特点二、 AI Agent的技术框架三、开源自主代理前言 AI Agent，即人工智能代理，一般直接叫做智能体百度百科给AI Agent定义为： “以大语言模型为大脑驱动的系统，具备自主理解、感知、规划、…...

编程日记 2025/8/16 10:16:41

Scala 中trait的线性化规则（Linearization Rule）和 super 的调用行为

在 Scala 中，特质（Trait）是一种强大的工具，用于实现代码的复用和组合。当一个类混入（with）多个特质时，可能会出现方法冲突的情况。为了解决这种冲突，Scala 引入了最右优先原则&#…...

编程日记 2025/8/19 17:53:50

【Linux系统编程】初识系统编程

目录一、什么是系统编程1. 系统编程的定义2. 系统编程的特点3. 系统编程的应用领域4. 系统编程的核心概念5. 系统编程的工具和技术二、操作系统四大基本功能1. 进程管理（Process Management）2. 内存管理（Memory Management）3. 文…...

编程日记 2025/8/21 23:41:15

Unsloth - 动态 4 bit 量化

文章目录 💔 量化可能会破坏模型🦙 Llama 3.2 Vision 细节Pixtral (12B) 视觉🦙 Llama 3.2 (90B) 视觉指令本文翻译自：Unsloth - Dynamic 4-bit Quantization （2024年12月4日 Daniel & Michael https://unsloth.…...

编程日记 2025/8/23 2:14:38

技术领域，有许多优秀的博客和网站

在技术领域，有许多优秀的博客和网站为开发者、工程师和技术爱好者提供了丰富的学习资源和行业动态。以下是一些常用的技术博客和网站，涵盖了编程、软件开发、数据科学、人工智能、网络安全等多个领域： 1. 综合技术博客 1.1 Medium 网址: ht…...

编程日记 2025/8/21 5:43:48

黑金风格人像静物户外旅拍Lr调色教程，手机滤镜PS+Lightroom预设下载！

调色教程针对人像、静物以及户外旅拍照片，运用 Lightroom 软件进行风格化调色工作。旨在通过软件中的多种工具，如基本参数调整、HSL（色相、饱和度、明亮度）调整、曲线工具等改变照片原本的色彩、明度、对比度等属性，将…...

编程日记 2025/8/21 11:02:50

Manus 与鸿蒙 Next 深度融合：构建下一代空间计算生态

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/north 文章目录一、技术融合背景与意义1.1 技术栈协同优势1.2 典型应用场景二、系统架构设计2.1 整体架构图…...

编程日记 2025/8/23 12:29:49

并查集模板

注意理解路径压缩 static class UnionFind {int[] fa;public UnionFind(int n) {fa new int[n];for (int i 0; i < n; i) {fa[i] i;}}public int find(int i) {if (fa[i] ! i) {fa[i] find(fa[i]);}return fa[i];}public void union(int i, int j) {int fai find(i);in…...

编程日记 2025/8/21 15:24:16

推流项目的ffmpeg配置和流程重点总结一下

ffmpeg的初始化配置，在合成工作都是根据这个ffmpeg的配置来做的，是和成ts流还是flv，是推动远端还是保存到本地， FFmpeg 的核心数据结构，负责协调编码、封装和写入操作。它相当于推流的“总指挥”。先来看一下ffmpeg的…...

编程日记 2025/8/23 7:57:15

使用 Python 开发的简单招聘信息采集系统

以下是一个使用 Python 开发的简单招聘信息采集系统，它包含用户登录、招聘信息收集和前后端交互的基本功能。我们将使用 Flask 作为后端框架，HTML 作为前端页面。项目结构 recruitment_system/ ├── app.py ├── templates/ │ ├── login.html │ ├── index…...

编程日记 2025/8/20 2:34:36

Selenium库打开指定端口（9222、9333等）浏览器【已解决！！！】

就是在写动态爬虫爬取数据的过程中，如果用selenium的话，有一个缺点，就是当我们去测试一个网站能不能爬取，它都会重新换端口打开一个浏览器，不会使用上一次使用的浏览器，在实际使用过程中这样调试很烦&#…...

编程日记 2025/8/24 20:40:32

Android MVI架构模式详解

MVI概念 MVI（Model-View-Intent）是一种Android应用架构模式，旨在通过单向数据流和不可变性来简化应用的状态管理。MVI的核心思想是将用户操作、状态更新和界面渲染分离，确保应用的状态可预测且易于调试。 MVI的核心组件 Model&a…...

编程日记 2025/8/20 4:29:10

说明：

相关文章：