利用Claude制作web小游戏（一）：俄罗斯方块
在工作的过程中，摸鱼是一件很快乐的事情！尤其是当摸鱼和技术探索结合的时候，看似在摸鱼实际是在练习技术。当然，动脑子就是件费劲的事情，自己要不停的改代码和调试更费劲。
于是乎，利用大模型来生成各种游戏，或许是当下不错的选择。等到哪一天可以自由生成歌曲、电影等就更好啦！
整体的设计思路就是，注意玩法，不纠结于细节！细节打磨是一个极度漫长的过程，而且是一个收益比较低的，玩法实现了，就可以玩了，这时候乐趣也是最大的。点击运行试玩
环境描述
- 框架： Claude.ai
- 模型：Claude3.5 Sonnet(New)
提示词一：
制作一个web版本的俄罗斯方块
提示词二：
增加暂停功能
一、游戏概述
这是一个使用纯HTML、CSS和JavaScript实现的经典俄罗斯方块游戏。游戏完整实现了俄罗斯方块的核心玩法，包括方块移动、旋转、消行、计分等功能，并加入了暂停功能来提升游戏体验。
二、核心技术实现
1. 游戏画布与渲染
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const blockSize = 30;
const rows = 20;
const cols = 10;
- 使用Canvas作为游戏主画布，提供高效的2D渲染能力
- 设定固定的方块大小(30px)和游戏区域(20行×10列)
- 使用
clearRect和fillRect进行游戏画面的清除和重绘
2. 数据结构设计
2.1 游戏板结构
function createBoard() {
return Array(rows).fill().map(() => Array(cols).fill(0));
}
- 使用二维数组表示游戏面板
- 0表示空白格子，非0值表示已固定的方块（同时用于存储颜色信息）
2.2 方块定义
const shapes = [
[[1,1,1,1]], // I形
[[1,1,1],[0,1,0]], // T形
[[1,1,1],[1,0,0]], // L形
[[1,1,1],[0,0,1]], // J形
[[1,1],[1,1]], // O形
[[0,1,1],[1,1,0]], // S形
[[1,1,0],[0,1,1]] // Z形
];
- 使用二维数组定义7种基本方块形状
- 每种形状都可以通过矩阵旋转实现4种朝向
3. 核心游戏逻辑
3.1 碰撞检测
function collision(piece, boardCopy = board) {
return piece.shape.some((row, dy) => {
return row.some((value, dx) => {
let newX = piece.x + dx;
let newY = piece.y + dy;
return (
value &&
(newX < 0 || newX >= cols ||
newY >= rows ||
(newY >= 0 && boardCopy[newY][newX]))
);
});
});
}
- 检查方块是否与边界或其他方块发生碰撞
- 用于验证移动和旋转的有效性
3.2 方块旋转
function rotate(piece) {
let newShape = piece.shape[0].map((_, i) =>
piece.shape.map(row => row[i]).reverse()
);
}
- 使用矩阵转置和反转实现90度旋转
- 旋转前进行碰撞检测确保有效性
3.3 消行处理
function clearLines() {
for(let y = rows - 1; y >= 0; y--) {
if(board[y].every(value => value)) {
board.splice(y, 1);
board.unshift(Array(cols).fill(0));
y++;
}
}
}
- 检查每一行是否被完全填满
- 消除填满的行并在顶部添加新行
- 根据同时消除的行数计算得分
4. 游戏控制与交互
4.1 键盘控制
document.addEventListener('keydown', event => {
switch(event.keyCode) {
case 37: // 左
case 39: // 右
case 40: // 下
case 38: // 上(旋转)
case 32: // 空格(暂停)
}
});
- 实现方向键控制方块移动
- 上箭头控制旋转
- 空格键控制暂停
4.2 暂停功能
function togglePause() {
if(!isGameActive) return;
isPaused = !isPaused;
pauseOverlay.style.display = isPaused ? 'flex' : 'none';
}
- 通过全局状态控制游戏暂停
- 使用遮罩层提供视觉反馈
- 暂停时禁用所有游戏操作
三、关键设计要点
1. 游戏循环设计
- 使用
setInterval创建游戏主循环 - 通过暂停标志控制游戏状态
- 每次循环更新方块位置并重绘画面
2. 状态管理
isGameActive: 控制游戏是否在进行中isPaused: 控制游戏暂停状态currentPiece: 记录当前活动方块board: 保存游戏面板状态
3. 分数系统
- 1行：40分
- 2行：100分
- 3行：300分
- 4行：1200分
4. 用户界面优化
- 清晰的游戏控制按钮
- 实时分数显示
- 暂停状态的视觉反馈
- 游戏结束提示
四、可扩展方向
- 预览下一个方块
- 保存最高分记录
- 难度级别设置
- 方块下落速度随分数提升
- 音效系统
- 触摸屏支持
五、总结
这个俄罗斯方块实现采用了模块化的设计思路，将游戏逻辑、渲染、控制等功能清晰分离。通过Canvas实现高效渲染，使用事件系统处理用户输入，并通过状态管理确保游戏流程的完整性。代码结构清晰，易于理解和扩展，为后续添加新功能提供了良好的基础。
