DeepSeek俄罗斯方块网页版HTML5(附源码)

用DeepSeek生成一个俄罗斯方块游戏网页版的，基于HTML5，效果很棒。
提示词prompt
帮我做一个俄罗斯方块 网页版的 基于HTML5
在这里插入图片描述
在这里插入图片描述

游戏功能说明

基本功能：
完整的俄罗斯方块游戏逻辑
7种不同形状的方块
分数计算系统
等级提升系统(速度会随等级提高)
下一个方块预览
操作控制：
左右箭头键：移动方块
上箭头键：旋转方块
下箭头键：加速下落
空格键：直接落到底部
P键：暂停/继续游戏
游戏控制按钮：
开始游戏：开始新游戏
暂停：暂停当前游戏
重置：重置游戏状态
如何使用
将上述代码复制到一个文本编辑器中
保存为 .html 文件(例如 tetris.html)
在浏览器中打开该文件即可开始游戏
俄罗斯方块网页版所有源码如下

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5 俄罗斯方块</title><style>body {font-family: Arial, sans-serif;text-align: center;background-color: #f0f0f0;margin: 0;padding: 20px;}#game-container {display: flex;justify-content: center;gap: 20px;margin-top: 20px;}#game-board {border: 2px solid #333;background-color: #111;}#side-panel {display: flex;flex-direction: column;gap: 20px;}#next-piece {border: 2px solid #333;background-color: #111;}#score-panel {background-color: #333;color: white;padding: 10px;border-radius: 5px;}#controls {margin-top: 20px;background-color: #ddd;padding: 10px;border-radius: 5px;display: inline-block;}button {padding: 8px 15px;margin: 0 5px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;}button:hover {background-color: #45a049;}</style>
</head>
<body><h1>HTML5 俄罗斯方块</h1><div id="game-container"><canvas id="game-board" width="300" height="600"></canvas><div id="side-panel"><canvas id="next-piece" width="150" height="150"></canvas><div id="score-panel"><h3>分数: <span id="score">0</span></h3><h3>等级: <span id="level">1</span></h3><h3>行数: <span id="lines">0</span></h3></div></div></div><div id="controls"><button id="start-btn">开始游戏</button><button id="pause-btn">暂停</button><button id="reset-btn">重置</button></div><p>操作说明: ← → 键移动方块， ↑ 键旋转， ↓ 键加速下落，空格键直接落下</p><script>// 游戏常量const COLS = 10;const ROWS = 20;const BLOCK_SIZE = 30;const COLORS = [null,'#FF0D72', // I'#0DC2FF', // J'#0DFF72', // L'#F538FF', // O'#FF8E0D', // S'#FFE138', // T'#3877FF'  // Z];// 方块形状定义const SHAPES = [null,[[0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0]], // I[[2, 0, 0], [2, 2, 2], [0, 0, 0]],                         // J[[0, 0, 3], [3, 3, 3], [0, 0, 0]],                          // L[[0, 4, 4], [0, 4, 4], [0, 0, 0]],                          // O[[0, 5, 5], [5, 5, 0], [0, 0, 0]],                          // S[[0, 6, 0], [6, 6, 6], [0, 0, 0]],                         // T[[7, 7, 0], [0, 7, 7], [0, 0, 0]]                           // Z];// 游戏变量let canvas = document.getElementById('game-board');let ctx = canvas.getContext('2d');let nextCanvas = document.getElementById('next-piece');let nextCtx = nextCanvas.getContext('2d');let scoreElement = document.getElementById('score');let levelElement = document.getElementById('level');let linesElement = document.getElementById('lines');let startBtn = document.getElementById('start-btn');let pauseBtn = document.getElementById('pause-btn');let resetBtn = document.getElementById('reset-btn');// 游戏状态let board = createBoard();let piece = null;let nextPiece = null;let score = 0;let level = 1;let lines = 0;let gameOver = false;let isPaused = false;let dropCounter = 0;let dropInterval = 1000; // 初始下落速度 (毫秒)let lastTime = 0;let animationId = null;// 初始化游戏function init() {resetGame();drawNextPiece();updateScore();// 事件监听document.addEventListener('keydown', handleKeyPress);startBtn.addEventListener('click', startGame);pauseBtn.addEventListener('click', togglePause);resetBtn.addEventListener('click', resetGame);}// 创建游戏板function createBoard() {return Array.from(Array(ROWS), () => Array(COLS).fill(0));}// 绘制游戏板function drawBoard() {ctx.fillStyle = '#111';ctx.fillRect(0, 0, canvas.width, canvas.height);board.forEach((row, y) => {row.forEach((value, x) => {if (value !== 0) {ctx.fillStyle = COLORS[value];ctx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);ctx.strokeStyle = '#000';ctx.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);}});});}// 绘制当前方块function drawPiece() {if (piece) {piece.shape.forEach((row, y) => {row.forEach((value, x) => {if (value !== 0) {ctx.fillStyle = COLORS[value];ctx.fillRect((piece.x + x) * BLOCK_SIZE,(piece.y + y) * BLOCK_SIZE,BLOCK_SIZE, BLOCK_SIZE);ctx.strokeStyle = '#000';ctx.strokeRect((piece.x + x) * BLOCK_SIZE,(piece.y + y) * BLOCK_SIZE,BLOCK_SIZE, BLOCK_SIZE);}});});}}// 绘制下一个方块function drawNextPiece() {nextCtx.fillStyle = '#111';nextCtx.fillRect(0, 0, nextCanvas.width, nextCanvas.height);if (nextPiece) {const offsetX = nextPiece.type === 1 ? 0.5 : 1; // I型方块特殊处理const offsetY = nextPiece.type === 1 ? 1.5 : 1;nextPiece.shape.forEach((row, y) => {row.forEach((value, x) => {if (value !== 0) {nextCtx.fillStyle = COLORS[value];nextCtx.fillRect((offsetX + x) * BLOCK_SIZE,(offsetY + y) * BLOCK_SIZE,BLOCK_SIZE, BLOCK_SIZE);nextCtx.strokeStyle = '#000';nextCtx.strokeRect((offsetX + x) * BLOCK_SIZE,(offsetY + y) * BLOCK_SIZE,BLOCK_SIZE, BLOCK_SIZE);}});});}}// 创建新方块function createPiece(type) {return {x: Math.floor(COLS / 2) - 1,y: 0,shape: SHAPES[type],type: type};}// 随机生成方块function randomPiece() {const type = Math.floor(Math.random() * 7) + 1;return createPiece(type);}// 检查碰撞function collide() {if (!piece) return false;for (let y = 0; y < piece.shape.length; y++) {for (let x = 0; x < piece.shape[y].length; x++) {if (piece.shape[y][x] !== 0) {const boardX = piece.x + x;const boardY = piece.y + y;if (boardX < 0 ||boardX >= COLS ||boardY >= ROWS ||(boardY >= 0 && board[boardY][boardX] !== 0)) {return true;}}}}return false;}// 合并方块到游戏板function merge() {if (!piece) return;piece.shape.forEach((row, y) => {row.forEach((value, x) => {if (value !== 0) {const boardY = piece.y + y;const boardX = piece.x + x;if (boardY >= 0) {board[boardY][boardX] = value;}}});});}// 旋转方块function rotate() {if (!piece) return;const originalShape = piece.shape;const rows = piece.shape.length;const cols = piece.shape[0].length;// 创建新的旋转后的形状const rotated = Array(cols).fill().map(() => Array(rows).fill(0));for (let y = 0; y < rows; y++) {for (let x = 0; x < cols; x++) {rotated[x][rows - 1 - y] = piece.shape[y][x];}}piece.shape = rotated;// 如果旋转后发生碰撞，则恢复原状if (collide()) {piece.shape = originalShape;}}// 清除完整的行function clearLines() {let linesCleared = 0;for (let y = ROWS - 1; y >= 0; y--) {if (board[y].every(cell => cell !== 0)) {// 移除该行board.splice(y, 1);// 在顶部添加新行board.unshift(Array(COLS).fill(0));linesCleared++;y++; // 再次检查同一行(现在是新行)}}if (linesCleared > 0) {// 更新分数const points = [0, 40, 100, 300, 1200]; // 0, 1, 2, 3, 4行对应的分数score += points[linesCleared] * level;lines += linesCleared;// 每清除10行升一级level = Math.floor(lines / 10) + 1;// 提高游戏速度dropInterval = Math.max(100, 1000 - (level - 1) * 100);updateScore();}}// 更新分数显示function updateScore() {scoreElement.textContent = score;levelElement.textContent = level;linesElement.textContent = lines;}// 处理键盘输入function handleKeyPress(e) {if (gameOver || isPaused || !piece) return;switch (e.keyCode) {case 37: // 左箭头piece.x--;if (collide()) piece.x++;break;case 39: // 右箭头piece.x++;if (collide()) piece.x--;break;case 40: // 下箭头piece.y++;if (collide()) {piece.y--;merge();clearLines();resetPiece();}dropCounter = 0; // 重置下落计数器break;case 38: // 上箭头rotate();break;case 32: // 空格键hardDrop();break;case 80: // P键togglePause();break;}draw();}// 硬降落(直接落到底部)function hardDrop() {while (!collide()) {piece.y++;}piece.y--;merge();clearLines();resetPiece();draw();}// 重置方块function resetPiece() {piece = nextPiece;nextPiece = randomPiece();drawNextPiece();// 检查游戏结束if (collide()) {gameOver = true;alert('游戏结束! 你的分数是: ' + score);cancelAnimationFrame(animationId);}}// 游戏主循环function update(time = 0) {if (gameOver || isPaused) return;const deltaTime = time - lastTime;lastTime = time;dropCounter += deltaTime;if (dropCounter > dropInterval) {piece.y++;if (collide()) {piece.y--;merge();clearLines();resetPiece();}dropCounter = 0;}draw();animationId = requestAnimationFrame(update);}// 绘制游戏function draw() {drawBoard();drawPiece();}// 开始游戏function startGame() {if (animationId) {cancelAnimationFrame(animationId);}resetGame();gameOver = false;isPaused = false;piece = randomPiece();nextPiece = randomPiece();drawNextPiece();updateScore();lastTime = 0;dropCounter = 0;animationId = requestAnimationFrame(update);}// 暂停/继续游戏function togglePause() {if (gameOver) return;isPaused = !isPaused;pauseBtn.textContent = isPaused ? '继续' : '暂停';if (!isPaused && !gameOver) {lastTime = 0;dropCounter = 0;animationId = requestAnimationFrame(update);}}// 重置游戏function resetGame() {board = createBoard();score = 0;level = 1;lines = 0;gameOver = true;isPaused = false;piece = null;nextPiece = null;dropInterval = 1000;pauseBtn.textContent = '暂停';updateScore();draw();drawNextPiece();if (animationId) {cancelAnimationFrame(animationId);animationId = null;}}// 初始化游戏init();</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/news/914025.shtml
繁体地址，请注明出处：http://hk.pswp.cn/news/914025.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

企业电商平台搭建：ZKmall开源商城服务器部署与容灾方案

企业电商平台搭建：ZKmall开源商城服务器部署与容灾方案

企业级电商平台最核心的诉求&#xff0c;就是得让 “业务一直在线”—— 不管是平时运营要稳如磐石&#xff0c;还是突然出故障了能火速恢复&#xff0c;都离不开靠谱的服务器部署架构和周全的容灾方案。ZKmall 开源商城攒了 6000 多家企业客户的实战经验&#xff0c;琢磨出一套…
阅读更多...
【软件运维】前后端部署启动的几种方式

【软件运维】前后端部署启动的几种方式

.sh启动 #!/bin/bash# 解析软链接&#xff0c;获取真实脚本目录 SOURCE"${BASH_SOURCE[0]}" while [ -L "$SOURCE" ]; doDIR"$( cd -P "$( dirname "$SOURCE" )" && pwd )"SOURCE"$(readlink "$SOURCE&q…
阅读更多...
[爬虫知识] DrissionPage：强大的自动化工具

[爬虫知识] DrissionPage：强大的自动化工具

相关爬虫实战案例&#xff1a;[爬虫实战] 使用 DrissionPage 自动化采集小红书笔记 相关爬虫专栏&#xff1a;JS逆向爬虫实战 爬虫知识点合集 爬虫实战案例 逆向知识点合集 前言&#xff1a; 在当今数据驱动的世界里&#xff0c;网络爬虫和自动化测试扮演着越来越重要的角…
阅读更多...
数据分析师如何构建自己的底层逻辑？

数据分析师如何构建自己的底层逻辑？

目录 一、什么是“底层逻辑”&#xff1f; 二、底层逻辑的核心是什么&#xff1f;三句话讲清楚 1. 你到底在解决什么问题&#xff1f; 2. 你有没有一套“框架”来组织你的分析思路&#xff1f; 3. 你能不能用数据说出“结论 因果 建议”&#xff1f; 三、从 BI 视角出发…
阅读更多...
残差连接+层归一化：Transformer训练稳定秘诀

残差连接+层归一化：Transformer训练稳定秘诀

什么是：残差连接+层归一化 残差连接 (Residual Connection)：防止梯度消失 核心原理 简单理解：走楼梯时，既可以走楼梯，也可以坐电梯，最后在同一层汇合。 # 残差连接的数学表示 输出 = F(输入) + 输入 # ↑处理后 ↑原始输入具体数值例子 处理句子"我爱学习…
阅读更多...
公网 IP 不稳定监控实战：用多点 Ping 策略实现高可达率保障

公网 IP 不稳定监控实战：用多点 Ping 策略实现高可达率保障

更多云服务器知识&#xff0c;尽在hostol.com 你有没有遇到过这种情况&#xff1a;明明服务器的监控系统说一切正常&#xff0c;服务状态绿油油一片&#xff0c;但用户那边却反馈“时好时坏”、“丢包严重”甚至“根本连不上”。你掏出手机连上公网去试试&#xff0c;诶&#…
阅读更多...
uniapp类似抖音视频滑动

uniapp类似抖音视频滑动

最近需求说要做个类似抖音那种视频的&#xff0c;我二话不说就用了swiper-view组件&#xff0c;但是效果不太理想&#xff0c;后面改用css属性先放效果图&#xff1a;<template><view class"video-scroll-container" touchstart"handleTouchStart"…
阅读更多...
Umi-OCR 的 Docker（win制作镜像，Linux（Ubuntu Server 22.04）离线部署）

Umi-OCR 的 Docker（win制作镜像，Linux（Ubuntu Server 22.04）离线部署）

前置博客&#xff1a;Ubuntu-Server 22.04.4 详细安装图文教程 wget命令在windows终端下不能使用的原因及解决办法 在 Ubuntu 22.04 LTS 上离线安装 Docker 手把手教你在Win11下安装docker Umi-OCR 完整部署流程 第一步&#xff1a;在 Windows 上构建/获取 Umi-OCR Docker…
阅读更多...
AI Agent革命：当大模型学会使用工具、记忆与规划

AI Agent革命：当大模型学会使用工具、记忆与规划

以下是针对Lilian Weng的AI Agent综述文章&#xff08;原文链接&#xff09;的深度解析与整理&#xff1a; AI Agent革命&#xff1a;当大模型学会使用工具、记忆与规划 ——解析LLM驱动的下一代智能体技术架构 一、核心范式转变 传统AI模型&#xff08;如ChatGPT&#xff09…
阅读更多...
Claude Code：完爆 Cursor 的编程体验

Claude Code：完爆 Cursor 的编程体验

前言 最近&#xff0c;听说Claude Code这款代码辅助编写产品很强&#xff0c;有人把Cursor比作实习生水平&#xff0c;Claude Code比作高级工程师水平。 起初不以为意&#xff0c;因为特殊原因&#xff0c;Claude 无法直接访问。然而&#xff0c;有人做了镜像站&#xff0c;可以…
阅读更多...
ModbusTCP通讯

ModbusTCP通讯

supply服务-ModbusTCP通讯&#xff1a; winForm-HZHControls-Sqllite本地小项目架构补充&#xff1a;
阅读更多...
前端面试专栏-算法篇：23. 图结构与遍历算法

前端面试专栏-算法篇：23. 图结构与遍历算法

&#x1f525; 欢迎来到前端面试通关指南专栏&#xff01;从js精讲到框架到实战&#xff0c;渐进系统化学习&#xff0c;坚持解锁新技能&#xff0c;祝你轻松拿下心仪offer。 前端面试通关指南专栏主页 前端面试专栏规划详情 图结构与遍历算法 在计算机科学中&#xff0c;图&a…
阅读更多...
渗透测试之木马后门实验

渗透测试之木马后门实验

一、实验背景 根据CNCERT的监测数据显示&#xff0c;2018年位于美国的1.4万余台木马或僵尸网络控制服务器&#xff0c;控制了中国境内334万余台主机&#xff1b;2018年位于美国的3325个IP地址向中国境内3607个网站植入木马&#xff0c;根据对控制中国境内主机数量及控制中国境内…
阅读更多...
【LeetCode 热题 100】24. 两两交换链表中的节点——（解法一）迭代+哨兵

【LeetCode 热题 100】24. 两两交换链表中的节点——（解法一）迭代+哨兵

Problem: 24. 两两交换链表中的节点 题目&#xff1a;给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 文章目录整体思路完整代码…
阅读更多...
微积分核心考点全解析

微积分核心考点全解析

一、微积分核心知识框架 1. 极限与连续&#xff08;重点&#xff01;&#xff09; 核心概念&#xff1a; 极限定义&#xff08;ε-δ语言&#xff09;重要极限&#xff1a;lim⁡x→0sin⁡xx1limx→0​xsinx​1&#xff0c;lim⁡x→∞(11x)xelimx→∞​(1x1​)xe连续性判定&am…
阅读更多...
TypeScript---泛型

TypeScript---泛型

一.简介TypeScript 就引入了“泛型”&#xff08;generics&#xff09;。泛型的特点就是带有“类型参数”&#xff08;type parameter&#xff09;。在日常 TypeScript 编程中&#xff0c;我们经常会遇到这样的场景&#xff1a;函数的参数类型与返回值类型密切相关。此时&#…
阅读更多...
手把手一起使用Miniforge3+mamba平替Anaconda(Win10)

手把手一起使用Miniforge3+mamba平替Anaconda(Win10)

Anaconda 开始对企业收费&#xff0c;目前急需平替Anaconda。这里采用Minforgemamba作为替代&#xff0c;可以避免Anaconda追责&#xff0c;并100%兼容原conda仓库及使用方式&#xff0c;如果各位小伙伴有更好的平替方式&#xff0c;欢迎分享。 Miniforge3安装 下载并安装Min…
阅读更多...
【Note】Linux Kernel 主题学习之“完整的嵌入式 Linux 环境、构建工具、编译工具链、CPU 架构”

【Note】Linux Kernel 主题学习之“完整的嵌入式 Linux 环境、构建工具、编译工具链、CPU 架构”

Linux Kernel 主题学习之“完整的嵌入式 Linux 环境、构建工具、编译工具链、CPU 架构” 一、完整的嵌入式 Linux 环境 一个嵌入式 Linux 系统通常包括以下关键组件&#xff08;以 Jetson、树莓派等 ARM 版 SBC 为例&#xff09;&#xff1a; 交叉编译工具链&#xff08;cros…
阅读更多...
Lecture #20：Database Logging

Lecture #20：Database Logging

Lecture20目录&#xff1a;崩溃恢复缓冲池管理策略窃取策略强制策略NO-STEAL-FORCE影子分页执行恢复缺点日志文件预写日志&#xff08;WAL&#xff09;执行缓冲池策略日志方案检查点崩溃恢复 恢复算法是一种确保数据库ACID的技术&#xff0c;数据库崩溃后&#xff0c; 所有已经…
阅读更多...
Kubernetes高级调度1

Kubernetes高级调度1

目录 一:初始化容器 Initcontainer 1:Initcontainer 的基本概念 2:示例 1--延迟指定时间后启动 3:示例 2--使用初始化容器修改内核参数 4:示例 3--等待依赖服务启动 4:pause容器 二&#xff1a;临时容器 Ephemeral Containers 1.临时容器的概念 2.临时容器的使用 三&a…
阅读更多...
最新文章

Copyright @ 2022~2023