cursor+deepseek实现完整的俄罗斯方块小游戏
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>俄罗斯方块</title><style>body {margin: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background: #333;color: white;font-family: Arial, sans-serif;}.game-container {display: flex;gap: 20px;}canvas {border: 2px solid #fff;}.info-panel {width: 150px;}.controls {margin-top: 20px;}.controls button {padding: 10px 20px;margin: 5px;font-size: 16px;cursor: pointer;}</style>
</head>
<body><div class="game-container"><canvas id="tetris" width="300" height="600"></canvas><div class="info-panel"><h2>俄罗斯方块</h2><p>分数: <span id="score">0</span></p><p>等级: <span id="level">1</span></p><p>下一个:</p><canvas id="nextPiece" width="120" height="120"></canvas><div class="controls"><button id="startBtn">开始游戏</button><button id="pauseBtn" disabled>暂停</button><button id="restartBtn" disabled>重新开始</button></div></div></div><script>const canvas = document.getElementById('tetris');const ctx = canvas.getContext('2d');const nextCanvas = document.getElementById('nextPiece');const nextCtx = nextCanvas.getContext('2d');const scoreElement = document.getElementById('score');const levelElement = document.getElementById('level');const ROW = 20;const COL = 10;const SQ = 30;const VACANT = 'black';const SPEED = 500;const LINES_PER_LEVEL = 10;// 方块形状const Z = [[[1,1,0],[0,1,1],[0,0,0]],[[0,0,1],[0,1,1],[0,1,0]]];const S = [[[0,1,1],[1,1,0],[0,0,0]],[[1,0,0],[1,1,0],[0,1,0]]];const T = [[[1,1,1],[0,1,0],[0,0,0]]],O = [[[1,1],[1,1]]],L = [[[1,0,0],[1,1,1],[0,0,0]]],I = [[[1,1,1,1]]],J = [[[0,0,1],[1,1,1],[0,0,0]]];const PIECES = [[Z, 'red'],[S, 'green'],[T, 'yellow'],[O, 'blue'],[L, 'purple'],[I, 'cyan'],[J, 'orange']];let board = [];let score = 0;let level = 1;let lines = 0;let dropStart = Date.now();let piece;let nextPiece;let isPaused = false;let isRunning = false;let rAF;// 初始化游戏板function initBoard() {for(let r = 0; r < ROW; r++) {board[r] = [];for(let c = 0; c < COL; c++) {board[r][c] = VACANT;}}}// 绘制方块function drawSquare(x, y, color) {ctx.fillStyle = color;ctx.fillRect(x*SQ, y*SQ, SQ, SQ);ctx.strokeStyle = '#333';ctx.strokeRect(x*SQ, y*SQ, SQ, SQ);}// 绘制游戏板function drawBoard() {for(let r = 0; r < ROW; r++) {for(let c = 0; c < COL; c++) {drawSquare(c, r, board[r][c]);}}}// 方块类class Piece {constructor(tetromino, color) {this.tetromino = tetromino;this.color = color;this.tetrominoN = 0;this.activeTetromino = this.tetromino[this.tetrominoN];this.x = 3;this.y = -2;}draw() {for(let r = 0; r < this.activeTetromino.length; r++) {for(let c = 0; c < this.activeTetromino.length; c++) {if(this.activeTetromino[r][c]) {drawSquare(this.x + c, this.y + r, this.color);}}}}unDraw() {for(let r = 0; r < this.activeTetromino.length; r++) {for(let c = 0; c < this.activeTetromino.length; c++) {if(this.activeTetromino[r][c]) {drawSquare(this.x + c, this.y + r, VACANT);}}}}moveDown() {if(!this.collision(0, 1, this.activeTetromino)) {this.unDraw();this.y++;this.draw();} else {if(this.y < 0) {gameOver();return;}this.lock();piece = nextPiece;nextPiece = randomPiece();drawNextPiece();}}moveLeft() {if(!this.collision(-1, 0, this.activeTetromino)) {this.unDraw();this.x--;this.draw();}}moveRight() {if(!this.collision(1, 0, this.activeTetromino)) {this.unDraw();this.x++;this.draw();}}rotate() {if(this.y < 0) {return;}let nextPattern = this.tetromino[(this.tetrominoN + 1) % this.tetromino.length];let kick = 0;if(this.collision(0, 0, nextPattern)) {if(this.x > COL/2) {kick = -1;} else {kick = 1;}if(!this.collision(kick, 0, nextPattern)) {this.x += kick;} else {return;}}this.unDraw();this.tetrominoN = (this.tetrominoN + 1) % this.tetromino.length;this.activeTetromino = this.tetromino[this.tetrominoN];this.draw();}collision(x, y, piece) {for(let r = 0; r < piece.length; r++) {for(let c = 0; c < piece.length; c++) {if(!piece[r][c]) continue;let newX = this.x + c + x;let newY = this.y + r + y;if(newX < 0 || newX >= COL || newY >= ROW) {return true;}if(newY >= 0 && board[newY][newX] !== VACANT) {return true;}}}return false;}lock() {for(let r = 0; r < this.activeTetromino.length; r++) {for(let c = 0; c < this.activeTetromino.length; c++) {if(!this.activeTetromino[r][c]) continue;if(this.y + r < 0) {gameOver();return;}board[this.y + r][this.x + c] = this.color;}}clearLines();}}// 随机生成方块function randomPiece() {let r = Math.floor(Math.random() * PIECES.length);return new Piece(PIECES[r][0], PIECES[r][1]);}// 消除满行function clearLines() {let linesCleared = 0;for(let r = ROW - 1; r >= 0; r--) {if(board[r].every(cell => cell !== VACANT)) {board.splice(r, 1);board.unshift(new Array(COL).fill(VACANT));linesCleared++;r++;}}if(linesCleared > 0) {updateScore(linesCleared);}}// 更新分数function updateScore(linesCleared) {const points = [0, 40, 100, 300, 1200][linesCleared] * level;score += points;lines += linesCleared;if(lines >= LINES_PER_LEVEL) {level++;lines -= LINES_PER_LEVEL;}scoreElement.textContent = score;levelElement.textContent = level;}// 绘制下一个方块function drawNextPiece() {nextCtx.clearRect(0, 0, nextCanvas.width, nextCanvas.height);for(let r = 0; r < nextPiece.tetromino[0].length; r++) {for(let c = 0; c < nextPiece.tetromino[0].length; c++) {if(nextPiece.tetromino[0][r][c]) {nextCtx.fillStyle = nextPiece.color;nextCtx.fillRect(c*30, r*30, 30, 30);nextCtx.strokeStyle = '#333';nextCtx.strokeRect(c*30, r*30, 30, 30);}}}}// 游戏结束function gameOver() {cancelAnimationFrame(rAF);isRunning = false;document.getElementById('startBtn').disabled = false;document.getElementById('pauseBtn').disabled = true;document.getElementById('restartBtn').disabled = false;ctx.fillStyle = 'rgba(0,0,0,0.75)';ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = 'white';ctx.font = '40px Arial';ctx.fillText('游戏结束!', 30, canvas.height/2 - 20);ctx.font = '20px Arial';ctx.fillText('按R键重新开始', 50, canvas.height/2 + 20);}// 初始化游戏function init() {initBoard();score = 0;level = 1;lines = 0;scoreElement.textContent = score;levelElement.textContent = level;piece = randomPiece();nextPiece = randomPiece();drawNextPiece();drawBoard();piece.draw();}// 游戏主循环function gameLoop() {if(isPaused || !isRunning) return;let now = Date.now();let delta = now - dropStart;if(delta > SPEED / level) {piece.moveDown();dropStart = Date.now();}drawBoard();piece.draw();rAF = requestAnimationFrame(gameLoop);}// 添加控制按钮事件document.getElementById('startBtn').addEventListener('click', () => {if(!isRunning) {init();isRunning = true;isPaused = false;document.getElementById('startBtn').disabled = true;document.getElementById('pauseBtn').disabled = false;document.getElementById('restartBtn').disabled = false;dropStart = Date.now();gameLoop();}});document.getElementById('pauseBtn').addEventListener('click', () => {if(isRunning) {isPaused = !isPaused;document.getElementById('pauseBtn').textContent = isPaused ? '继续' : '暂停';if(!isPaused) {dropStart = Date.now();gameLoop();}}});document.getElementById('restartBtn').addEventListener('click', () => {cancelAnimationFrame(rAF);init();isRunning = true;isPaused = false;document.getElementById('pauseBtn').textContent = '暂停';dropStart = Date.now();gameLoop();});// 键盘控制document.addEventListener('keydown', (event) => {if(!isRunning || isPaused) return;if(event.keyCode === 37) { // 左piece.moveLeft();dropStart = Date.now();} else if(event.keyCode === 38) { // 上if(piece.y >= 0) {piece.rotate();dropStart = Date.now();}} else if(event.keyCode === 39) { // 右piece.moveRight();dropStart = Date.now();} else if(event.keyCode === 40) { // 下piece.moveDown();} else if(event.keyCode === 80) { // P键暂停document.getElementById('pauseBtn').click();}});</script>
</body>
</html>
相关文章：
cursor+deepseek实现完整的俄罗斯方块小游戏
<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>俄罗斯方块</title><style>body {margin: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background: …...
Oracle 数据库基础入门（五）：限制查询与范式三约定深度解析
在 Oracle 数据库的学习进程中，限制查询与范式三约定是两个极为重要的概念。限制查询帮助我们精准获取特定范围的数据，而范式三约定则为数据库设计提供了科学的指导框架。对于 Java 全栈开发者而言，掌握这些知识不仅有助于高效地从数据库中提…...
pgsql行列转换
目录 一、造测试数据 二、行转列 1.函数定义 2.语法 3.示例 三、列转行 1.函数定义 2.语法 3.示例 一、造测试数据 create table test ( id int, json1 varchar, json2 varchar );insert into test values(1,111,{111}); insert into test values(2,111,222,{111,22…...
Nginx 开启Baise认证
开启Baise认证 需要再站点Server配置中添加一下配置，添加htpasswd文件 server{auth_basic "HTTP Basic Authentication";auth_basic_user_file /etc/nginx/htpasswd;# 其他配置信息... }如果你的 Linux 服务器没有安装 htpasswd 工具，可以通…...
Android 多用户相关
Android 多用户相关 本文主要记录下android 多用户相关的adb 命令操作. 1: 获取用户列表 命令: adb shell pm list users 输出如下: Users:UserInfo{0:机主:c13} running默认只有一个用户, id为0 ，用户状态为运行 2: 创建新用户 命令： adb shell …...
基于python实现的疫情数据可视化分析系统
基于python实现的疫情数据可视化分析系统 开发语言:Python 数据库：MySQL所用到的知识：Django框架工具：pycharm、Navicat 系统功能实现 总体设计 系统实现 系统功能模块 系统首页可以查看首页、疫情信息、核酸检测、新闻资讯、个人中心、后…...
计算机毕业设计SpringBoot+Vue.js陕西民俗网(源码+文档+PPT+讲解)
温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...
Win7重装不翻车！ISO镜像安全下载渠道+BIOS设置避雷手册
一、写在前面：为什么你需要这份教程？ 当电脑频繁蓝屏、系统崩溃甚至无法开机时，重装系统可能是最后的救命稻草。但市面上的教程往往存在三大痛点： ⚠️ 镜像来源不明导致系统被植入后门 ⚠️ 启动盘制作失败反复折腾 ⚠️ 操作失…...
[项目]基于FreeRTOS的STM32四轴飞行器: 四.LED控制
基于FreeRTOS的STM32四轴飞行器: 四.LED控制 一.配置Com层二.编写驱动 一.配置Com层 先在Com_Config.h中定义灯位置的枚举类型： 之后定义Led的结构体： 定义飞行器状态： 在Com_Config.c中初始化四个灯： 在Com_Config.h外部声明…...
macos查询pip默认镜像地址
在 macOS 系统中，查询 pip 的默认镜像地址可以通过以下几种方法： 方法 1：直接通过 pip config list 命令查询 运行以下命令查看当前 pip 的配置（包括镜像地址）： pip config list 如果输出中包含 global…...
计算机毕业设计SpringBoot+Vue.js青年公寓服务平台(源码+文档+PPT+讲解)
温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...
【虚拟仿真】Unity3D中实现激光/射线的发射/折射/反射的效果（3D版）
推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享QQ群：398291828小红书小破站大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。...
flutter环境最新踩坑
## Flutter 开发常见问题排查与解决 ### 1. 项目初始化与依赖问题 bash # 清理项目 flutter clean # 获取依赖 flutter pub get # 详细日志运行 flutter run -v ### 2. 网络和下载问题 - 网络慢可能导致依赖下载卡住 - 使用 -v 参数可查看详细日志 - 检查网络连接 - 可以尝…...
使用 Spring Boot 实现前后端分离的海康威视 SDK 视频监控
使用 Spring Boot 实现前后端分离的海康威视 SDK 视频监控系统，可以分为以下几个步骤： 1. 系统架构设计 前端：使用 Vue.js、React 或 Angular 等前端框架实现用户界面。后端：使用 Spring Boot 提供 RESTful API，负责与…...
VScode 中文符号出现黄色方框的解决方法
VScode 中文符号出现黄色方框的解决方法 我的vscode的python多行注释中会将中文字符用黄色方框框处： 只需要打开设置搜索unicode，然后将这一项的勾选取消掉就可以了： 取消之后的效果如下： 另一种情况：中文显示出现黄色…...
⭐算法OJ⭐跳跃游戏【贪心算法】（C++实现）Jump Game 系列 I,II
既股票买卖系列之后的第二组贪心算法题目：跳跃游戏系列。这一篇介绍的两个问题，其输入均为一个数组，每个元素表示在该位置可以跳跃的最大长度。 55. Jump Game You are given an integer array nums. You are initially positioned at the …...
阿里云MaxCompute面试题汇总及参考答案
目录 简述 MaxCompute 的核心功能及适用场景，与传统数据仓库的区别 解释 MaxCompute 分层架构设计原则，与传统数仓分层有何异同 MaxCompute 的存储架构如何实现高可用与扩展性 解析伏羲（Fuxi）分布式调度系统工作原理 盘古（Pangu）分布式存储系统数据分片策略 计算与存…...
JCRQ1河马算法+四模型对比！HO-CNN-GRU-Attention系列四模型多变量时序预测
JCRQ1河马算法四模型对比！HO-CNN-GRU-Attention系列四模型多变量时序预测 目录 JCRQ1河马算法四模型对比！HO-CNN-GRU-Attention系列四模型多变量时序预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 基于HO-CNN-GRU-Attention、CNN-GRU-Attent…...
探索低空经济，无人机及载人直升机低空应用技术详解
探索低空经济时，无人机及载人直升机低空应用技术是核心要素。以下是对这两类技术的详细解析： 一、无人机低空应用技术 1. 飞行控制技术 无人机需要强大的飞行控制系统，这涉及传感器融合、飞行器稳定性控制、自动化飞行和紧急情况下的自动避…...
Python：简单的爬虫程序，从web页面爬取图片与标题并保存MySQL
文章目录 一、环境说明二、基本思路三、代码 一、环境说明 python 版本：3.10 MySQL版本：8 二、基本思路 首先，我们需要查看网页源代码 通过html源码，确定我们要抓取的内容所在标签的特点 然后，利用BeautifulSoup进…...
GStreamer —— 2.3、Windows下Qt加载GStreamer库后运行 - “教程3:动态管道“（附：完整源码）
运行效果（音频） 简介 上一个教程演示了GStreamer 概念。本教程中的管在它设置为 playing 状态之前完全构建。这没关系。如果 我们没有采取进一步的行动，数据会到达 pipeline 的 pipeline 和 pipeline 将生成错误消息并停止。但 我们将采取进一…...
【Java数据结构】前K个高频单词
前K个高频单词 692. 前K个高频单词 - 力扣（LeetCode） 解决这个问题我们先得知道每个单词出现的次数，用map存储下来，然后将出现次数最多的通过建立小根堆解决top-K问题 ，重点是top-K的求取。 1.建立map 首先我们可以…...
Ubuntu20.04本地配置IsaacLab 4.5.0的训练环境（一）
Ubuntu20.04本地配置IsaacLab 4.5.0的训练环境（一） 配置conda虚拟环境（对于这一步，个人感觉跟在配置IsaacLab那一节的./isaaclab.sh --install同样要执行这一步，建议先不执行）配置IsaacSim配置IsaacLab 写在…...
第二次CCF-CSP认证（含C++源码）
第二次CCF-CSP认证 第一道（easy）思路及AC代码 第二道（easy）基本思路及AC代码 第三道（mid）基本思路及AC代码solution 1 (模拟)solution 2（KMP） 第一道（easy） 题…...
前端多角色权限页面（同浏览器同时登录）数据互串解决
项目是使用vue3写的 问题说明 现在的问题是，在同个浏览器打开两个标签页（都是登录页面），A标签页先登录A的账号，然后B标签页登录B账号。我的登录信息（userInfo和token、权限等都是存放在localStorage中的&…...
常见面试问题：MVC模式
MVC（Model-View-Controller）是一种分层架构设计模式，核心思想是通过职责分离提升代码的可维护性和扩展性。它的三个组件分工如下： 1. Model（模型） 职责：管理数据和业务逻辑，与数据库…...
【项目】视频点播
一、项目介绍 1. 对视频点播系统的认识 搭建视频共享点播服务器，可以让所有人通过浏览器访问服务器，实现视频的上传查看，以及管理并播放的功能。主要是完成服务器端的程序业务功能的实现以及前端访问界面 html 的编写，能够支持客…...
vue videojs使用canvas截取视频画面
前言 刚开始做的时候太多坑，导致一直报错： Uncaught (in promise) TypeError: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type ‘(CSSImageValue or HTMLCanvasElement or HTMLImageElement or H…...
DeepSeek私有化部署6：openEuler 24.03-LTS-SP1安装Open WebUI
Open WebUI是一个 Open WebUI 是一个可扩展的、功能丰富、用户友好的自托管 AI 平台，专为完全离线运行而设计。 它支持多种 LLM 运行环境，包括 Ollama 和 OpenAI 兼容的 API，并内置了用于 RAG 的推理引擎，是一个强大的 AI 部署解决…...
uniapp+微信小程序+地图+传入多个标记点显示+点击打开内置地图导航+完整代码
一、效果展示 二、完整代码 <template><view class"container"><map class"map-container" :latitude"latitude" :longitude"longitude" :markers"markers" :controls"controls" show-location m…...