用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>
![[爬虫知识] DrissionPage：强大的自动化工具](http://pic.xiahunao.cn/[爬虫知识] DrissionPage：强大的自动化工具)
)
