用 HTML5 Canvas 和 JavaScript,从零做了一个侧视图版的"我的世界"!
包含130+种方块、60+合成配方、12种怪物和完整的下界维度。
草、土、石、木、矿、下界方块……全部1:1还原MC数据
工具、盔甲、武器、功能方块、食物、下界合金锻造系统
僵尸、苦力怕、末影人……主世界+下界各有专属怪物
主世界 + 下界,Simplex噪声地形生成,昼夜循环
这个游戏完全用纯前端技术实现,不需要服务器,打开HTML文件就能玩!
| 技术 | 作用 | 生活比喻 |
|---|---|---|
| HTML5 Canvas | 在网页上画方块和角色 | 像一块电子画板 |
| JavaScript | 控制游戏逻辑(移动、挖掘、合成) | 像游戏的大脑 |
| Simplex 噪声 | 自动生成自然地形 | 像用数学公式"画"山脉 |
| localStorage | 保存游戏进度 | 像书签,下次继续玩 |
| Web Audio API | 生成简单音效 | 像迷你音乐盒 |
每种方块都有自己的名字、颜色、硬度、需要的工具,跟Minecraft一模一样!
| 类别 | 代表方块 | 硬度 | 需要什么工具 |
|---|---|---|---|
| 🌿 地表 | 草方块、泥土、沙子、黏土 | 低 | 手 / 铲子 |
| 🪨 石头 | 石头、圆石、深板岩、石砖 | 中 | 镐 |
| 🌳 木材 | 8种树(橡木、白桦、樱花……) | 低 | 手 / 斧头 |
| 💎 矿石 | 煤、铁、铜、金、钻石、红石 | 中~高 | 对应等级镐 |
| 🔥 下界 | 下界岩、远古残骸、萤石 | 高 | 钻石镐以上 |
| 🎨 装饰 | 16色羊毛、玻璃、混凝土 | 低~中 | 手 / 镐 |
跟Minecraft一样,把材料按照特定图案摆放,就能合成出新物品!
| 类别 | 配方举例 | 材料 |
|---|---|---|
| ⛏️ 工具(6套) | 铁镐 | 3铁锭 + 2木棍 |
| 🗡️ 武器 | 钻石剑 | 2钻石 + 1木棍 |
| 🛡️ 盔甲(4套) | 钻石头盔 | 5钻石 |
| 🏗️ 功能方块 | 附魔台 | 1书 + 2钻石 + 4黑曜石 |
| 🍞 食物 | 面包 | 3小麦 |
| 🔥 下界合金 | 下界合金锭 | 4碎片 + 4金锭 |
| 怪物 | HP | 特点 | 在哪里 |
|---|---|---|---|
| 🧟 僵尸 | 20 | 近战攻击,怕阳光 | 主世界夜晚 |
| 💀 骷髅 | 20 | 远程射箭,怕阳光 | 主世界夜晚 |
| 💚 苦力怕 | 20 | 靠近会爆炸!💥 | 主世界夜晚 |
| 🟣 末影人 | 40 | 会瞬移,怕水 | 主世界夜晚 |
| 🕷️ 蜘蛛 | 16 | 会爬墙 | 主世界夜晚 |
| 🟢 史莱姆 | 8 | 死了会分裂 | 主世界 |
| 🧙 女巫 | 26 | 扔药水攻击 | 主世界夜晚 |
| 🐷 猪灵 | 16 | 可以用金锭交易 | 下界 |
| 💀 凋灵骷髅 | 20 | 攻击附带凋灵效果 | 下界 |
| 🔥 烈焰人 | 20 | 远程火球 | 下界 |
| 👻 恶魂 | 10 | 飞行+发射火球 | 下界 |
| 🟠 岩浆怪 | 8 | 免疫火焰 | 下界 |
游戏里的地形不是画出来的,而是用数学公式"算"出来的!
| 地质层 | Y坐标范围 | 方块类型 |
|---|---|---|
| 基岩层 | y = 0~5 | 基岩(无法破坏) |
| 深板岩层 | y = 6~16 | 深板岩 |
| 石头层 | y = 17~地表 | 石头 + 各种矿石 |
| 泥土层 | 地表下4格 | 泥土 / 沙子 |
| 草地层 | 最表面 | 草方块 🌿 |
做游戏最重要的是调试(Debug)——找到代码里的"虫子"然后消灭它!
玩家站在地面上,突然穿过方块掉到很深的地方。
两个文件里都写了 const ORE_DROPS,浏览器报错"已经声明过了"。
const 声明的变量只能用一次。如果两个文件都写了同名变量,就像两个人取了完全一样的名字,电脑就不知道你说的是谁了。解决方法:只在一个文件里声明!
| 知识点 | 在游戏里的用途 | 难度 |
|---|---|---|
| 变量和常量 | 存方块类型、玩家血量等数据 | ⭐ |
| 数组 | 物品栏、合成格子、怪物列表 | ⭐ |
| 函数 | 挖掘、放置、合成等动作 | ⭐⭐ |
| 循环(for) | 遍历世界方块、检查碰撞 | ⭐⭐ |
| 条件判断(if) | 判断方块类型、是否夜晚 | ⭐⭐ |
| 对象(Object) | 方块属性、怪物属性、玩家属性 | ⭐⭐⭐ |
| Canvas绘图 | 画方块、玩家、怪物、UI | ⭐⭐⭐ |
| 游戏循环 | 每帧更新+渲染,60fps | ⭐⭐⭐ |
| 碰撞检测 | 玩家和方块的物理碰撞 | ⭐⭐⭐⭐ |
| 噪声算法 | 自动生成自然地形 | ⭐⭐⭐⭐⭐ |
🎮 2D版我的世界 · 项目总结文档
文件位置:minecraft2d/index.html + minecraft2d/game.js
📅 2026年6月16日