超简洁 100行Javascript代码实现2048游戏，浏览器可玩

本文发表于入职啦(公众号: ruzhila) 大家可以访问入职啦学习更多的编程实战。

🎉 完全用Javascript的Canvas实现2048游戏，打开浏览器就可以玩 👏 🎉

项目地址

代码已经开源， 2048-js 👏 欢迎Star

代码运行效果：

所有的项目都在github上开源：100-line-code 欢迎Star 👏

用100行代码的不同语言（Java、Python、Go、Javascript、Rust）实现项目，通过讲解项目的实现，帮助大家学习编程

我们会定期在群里分享最新的项目实战代码，包括不同语言的实现

老师还会详细讲解代码优化的思路，扫码加入实战群：

Javascript实现游戏开发

Javascript 是开发2D游戏是最简单的方式之一，这次我们使用Canvas来实现2048游戏，没有采用HTML的表格，而是直接绘制

优点就是代码少，但是动画效果的实现就比较复杂，因为Canvas是一个静态的画布，需要自己绘制动画效果

这个版本缺少动画的实现

直接上代码

代码解析

2048.js 是一个独立的文件，不需要任何第三方库，直接在浏览器中打开index.html就可以玩

数据结构抽象

2048是一个4x4的棋盘，每次移动都是将棋盘中的数字向一个方向移动

如果两个数字相同就合并
如果遇到无数字的格子就跳过直到遇到下一个数字或者到边界

• 20行： 设计了一个简单的二维数组来表示棋盘
• 11-16行： 监听键盘事件，如果是方向键就移动棋盘，并且阻止默认事件行为，避免对整个网页的滚动

生成一个新的数字并且绘制

• 24-26行： 先查找是否有空闲格子，然后随机放置一个数字
• 28-37行： 每个格子如果有数字就绘制，没有数字就绘制空白，不同数字的颜色也不同

移动棋盘

这部分代码是最复杂的，因为要遍历整个棋盘，然后合并数字

根据方向不同，遍历的方向也不同，这里我们只展示了向上移动的代码：

总结

这个2048游戏是一个非常简单的游戏，绘制部分没什么难度，主要的难度就是循环和移动处理

要掌握好算法的理解，并且i,j,k的使用导致了代码的可阅读性变差，如果大家有更好的算法实现可以提交PR 👏

这个游戏的代码量非常少，HTML开发小游戏特别容易上手，也容易分享给朋友玩，可以很有成就感

交流

我们构建了一个100行代码项目的实战群，大家可以扫码加入，一起学习编程

也可以访问入职啦学习更多的编程实战

所有的代码都在github上开源：100-line-code 欢迎Star 👏

最后祝大家5.1劳动节快乐，多学习多锻炼，提高自己的编程能力，加油！🎉