想找个2d版我的世界联机玩？这几个方法可以和朋友一起！

今天跟大家唠唠我这几天折腾的“2D版我的世界”，纯属个人爱大家图一乐呵就行。

我就想搞个简单的，能在网页上跑的那种，毕竟不用下载，随手就能玩，多方便！

选技术！

我琢磨了下，前端嘛html、css、js这三板斧肯定少不了。然后考虑到游戏性，canvas 应该是首选，方便绘制各种方块，操作也灵活。

然后，开干！

先搭了个 html 框架，把 canvas 元素放进去，设置好宽高。css 简单弄了点样式，让页面看起来不那么简陋。

• html：基本的页面结构，canvas 元素。
• css：canvas 样式，背景颜色，让它居中显示。

画方块！

这是核心部分，得用 js 控制 canvas 来绘制。我定义了个 block 类，每个 block 都有自己的 x、y 坐标和颜色。用 for 循环生成地图，一个二维数组，每个元素对应一个 block 对象。

为了让画面动起来，必须加上“玩家”！

我搞了个 player 类，也有 x、y 坐标，还有移动速度。监听键盘事件，按下方向键就改变 player 的坐标，然后重新绘制地图。

碰撞检测！

这是个麻烦事，得判断 player 是否撞到了方块。我简单粗暴地做了个矩形碰撞检测，判断 player 的矩形区域是否与 block 的矩形区域相交。

实现“挖掘”功能！

监听鼠标点击事件，获取鼠标点击的坐标，然后计算出点击的是哪个 block。把这个 block 从地图数组中移除，重新绘制地图，就实现了“挖掘”的效果。

美化画面！

纯色方块太单调了，我找了些像素风格的图片当做方块的纹理。用 image 对象加载图片，然后在 canvas 上绘制。

修 bug！

游戏过程中肯定会遇到各种 bug，比如碰撞检测不准确，移动速度太快等等。一点点调试，修复。

心得体会

简单总结一下

• 整个过程挺有意思的，虽然代码很粗糙，bug 也很多，但看着自己的作品一步步成型，还是很有成就感的。
• 也学到了很多东西，比如 canvas 的使用，事件监听，碰撞检测等等。



• 下次有机会，打算用更高级的技术，比如 WebGL，来搞个 3D 版的。