🌍
⛏️
💎
🗡️
🔥
🎮 项目总结

2D版我的世界 · 开发记录

用 HTML5 Canvas 和 JavaScript,从零做了一个侧视图版的"我的世界"!
包含130+种方块、60+合成配方、12种怪物和完整的下界维度。

🧱 130+ 种方块

草、土、石、木、矿、下界方块……全部1:1还原MC数据

🔨 60+ 合成配方

工具、盔甲、武器、功能方块、食物、下界合金锻造系统

👾 12 种怪物

僵尸、苦力怕、末影人……主世界+下界各有专属怪物

🌋 双维度世界

主世界 + 下界,Simplex噪声地形生成,昼夜循环

🏗️ 技术架构

这个游戏完全用纯前端技术实现,不需要服务器,打开HTML文件就能玩!

📁 minecraft2d/
├── index.html ← HTML结构 + CSS样式 + 方块数据 + 世界生成
└── game.js ← 玩家系统 + 合成配方 + 怪物AI + 渲染引擎 + 游戏循环
技术作用生活比喻
HTML5 Canvas在网页上画方块和角色像一块电子画板
JavaScript控制游戏逻辑(移动、挖掘、合成)像游戏的大脑
Simplex 噪声自动生成自然地形像用数学公式"画"山脉
localStorage保存游戏进度像书签,下次继续玩
Web Audio API生成简单音效像迷你音乐盒

🧱 方块系统(130+ 种)

每种方块都有自己的名字、颜色、硬度、需要的工具,跟Minecraft一模一样!

类别代表方块硬度需要什么工具
🌿 地表草方块、泥土、沙子、黏土手 / 铲子
🪨 石头石头、圆石、深板岩、石砖
🌳 木材8种树(橡木、白桦、樱花……)手 / 斧头
💎 矿石煤、铁、铜、金、钻石、红石中~高对应等级镐
🔥 下界下界岩、远古残骸、萤石钻石镐以上
🎨 装饰16色羊毛、玻璃、混凝土低~中手 / 镐
// 定义一个方块的"身份证"
defBlock(B.DIAMOND_ORE, '钻石矿石',
  3, 'pick', 2, // 硬度3, 需要镐, 工具等级2
  ['#808080', '#4aedd9'] // 灰色底+青色矿石点
);
💡 通俗理解:每个方块就像一张"卡片",上面写着它叫什么、有多硬、用什么工具才能挖、长什么颜色。代码里用一个对象(BP)存了所有方块的这些信息。

🔨 合成系统(60+ 配方)

跟Minecraft一样,把材料按照特定图案摆放,就能合成出新物品!

类别配方举例材料
⛏️ 工具(6套)铁镐3铁锭 + 2木棍
🗡️ 武器钻石剑2钻石 + 1木棍
🛡️ 盔甲(4套)钻石头盔5钻石
🏗️ 功能方块附魔台1书 + 2钻石 + 4黑曜石
🍞 食物面包3小麦
🔥 下界合金下界合金锭4碎片 + 4金锭
// 合成配方的"配方卡"
addShaped(I.DIAMOND_PICK, 1, [
  [I.DIAMOND, I.DIAMOND, I.DIAMOND], // 第一行
  [0, I.STICK, 0], // 第二行(0=空)
  [0, I.STICK, 0] // 第三行
]); // → 得到1把钻石镐
💡 合成原理:背包里有个3x3的格子,系统会把你放的物品图案和所有配方一个个对比。就像拼图——图案对上了,就能变出新东西!

👾 怪物系统(12种)

怪物HP特点在哪里
🧟 僵尸20近战攻击,怕阳光主世界夜晚
💀 骷髅20远程射箭,怕阳光主世界夜晚
💚 苦力怕20靠近会爆炸!💥主世界夜晚
🟣 末影人40会瞬移,怕水主世界夜晚
🕷️ 蜘蛛16会爬墙主世界夜晚
🟢 史莱姆8死了会分裂主世界
🧙 女巫26扔药水攻击主世界夜晚
🐷 猪灵16可以用金锭交易下界
💀 凋灵骷髅20攻击附带凋灵效果下界
🔥 烈焰人20远程火球下界
👻 恶魂10飞行+发射火球下界
🟠 岩浆怪8免疫火焰下界
💡 怪物AI原理:每个怪物都有一个"大脑"(定时器),每隔1-2秒做一次决定——如果玩家离得近就追过来,离得远就随便走走。就像家里的小狗,看到你就跟着跑!

🌍 世界生成原理

游戏里的地形不是画出来的,而是用数学公式"算"出来的

// Simplex噪声:一种能生成自然曲线的数学函数
const height = noise.octave(x * 0.005, 0, 4, 0.5);
// ↑ 输入坐标x,输出一个-1到1之间的数
// 乘以40再加上基础高度 → 就是地面的高度了!
💡 噪声函数是什么?想象你用铅笔在纸上随便画一条弯弯曲曲的线——噪声函数就能让电脑自动生成这样的"自然曲线"。用它来决定地面的高低起伏,就能生成山脉、平原、沙漠这些地形了!
地质层Y坐标范围方块类型
基岩层y = 0~5基岩(无法破坏)
深板岩层y = 6~16深板岩
石头层y = 17~地表石头 + 各种矿石
泥土层地表下4格泥土 / 沙子
草地层最表面草方块 🌿

🐛 遇到的Bug和修复

做游戏最重要的是调试(Debug)——找到代码里的"虫子"然后消灭它!

Bug 1:玩家穿过地面掉到地下

玩家站在地面上,突然穿过方块掉到很深的地方。

// ❌ 错误代码:从低到高检查方块
for(var by=minY; by<=maxY; by++) {
  // 先碰到石头(y=254)而不是草(y=255)
  // 结果把玩家推到了错误的位置!
}

// ✅ 修复:下落时从高到低检查
if(player.vy <= 0) {
  for(var by=maxY; by>=minY; by--) {
    // 先找到最高的实心方块
    player.y = by + 1 + 0.001;
  }
}
💡 为什么会出错?就像你站在两层楼的楼板上,如果先检查下面的楼板就把你推上去,你就卡在一楼和二楼之间了。正确的做法是先检查离你最近的楼板(最上面的那一层)!
Bug 2:重复声明变量

两个文件里都写了 const ORE_DROPS,浏览器报错"已经声明过了"。

💡 教训:const 声明的变量只能用一次。如果两个文件都写了同名变量,就像两个人取了完全一样的名字,电脑就不知道你说的是谁了。解决方法:只在一个文件里声明!

🎮 游戏操作指南

A / D 左右移动
W / 空格 跳跃
S / ↓ 蹲下/下水
鼠标左键 挖掘/攻击
鼠标右键 放置方块
滚轮 切换快捷栏
E 打开背包
F 切换维度
1-9 选快捷栏格子
ESC 暂停游戏

📝 学到的编程知识

知识点在游戏里的用途难度
变量和常量存方块类型、玩家血量等数据
数组物品栏、合成格子、怪物列表
函数挖掘、放置、合成等动作⭐⭐
循环(for)遍历世界方块、检查碰撞⭐⭐
条件判断(if)判断方块类型、是否夜晚⭐⭐
对象(Object)方块属性、怪物属性、玩家属性⭐⭐⭐
Canvas绘图画方块、玩家、怪物、UI⭐⭐⭐
游戏循环每帧更新+渲染,60fps⭐⭐⭐
碰撞检测玩家和方块的物理碰撞⭐⭐⭐⭐
噪声算法自动生成自然地形⭐⭐⭐⭐⭐

🎮 2D版我的世界 · 项目总结文档

文件位置:minecraft2d/index.html + minecraft2d/game.js

📅 2026年6月16日