本文发表于入职啦(公众号: 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劳动节快乐，多学习多锻炼，提高自己的编程能力，加油！🎉
