本文发表于入职啦(公众号: ruzhila) 大家可以访问入职啦学习更多的编程实战。
完全用Javascript的Canvas实现2048游戏,打开浏览器就可以玩
代码已经开源, 2048-js 欢迎Star
所有的项目都在github上开源:100-line-code 欢迎Star
用100行代码的不同语言(Java、Python、Go、Javascript、Rust)实现项目,通过讲解项目的实现,帮助大家学习编程
我们会定期在群里分享最新的项目实战代码,包括不同语言的实现
老师还会详细讲解代码优化的思路,扫码加入实战群:
Javascript 是开发2D游戏是最简单的方式之一,这次我们使用Canvas
来实现2048游戏,没有采用HTML的表格,而是直接绘制
优点就是代码少,但是动画效果的实现就比较复杂,因为Canvas
是一个静态的画布,需要自己绘制动画效果
这个版本缺少动画的实现
2048.js
是一个独立的文件,不需要任何第三方库,直接在浏览器中打开index.html
就可以玩
2048是一个4x4
的棋盘,每次移动都是将棋盘中的数字向一个方向移动
如果两个数字相同就合并
如果遇到无数字的格子就跳过直到遇到下一个数字或者到边界
这部分代码是最复杂的,因为要遍历整个棋盘,然后合并数字
根据方向不同,遍历的方向也不同,这里我们只展示了向上移动的代码:
这个2048游戏是一个非常简单的游戏,绘制部分没什么难度,主要的难度就是循环和移动处理
要掌握好算法的理解,并且i,j,k
的使用导致了代码的可阅读性变差,如果大家有更好的算法实现可以提交PR
这个游戏的代码量非常少,HTML开发小游戏特别容易上手,也容易分享给朋友玩,可以很有成就感
我们构建了一个100行代码项目的实战群,大家可以扫码加入,一起学习编程
也可以访问入职啦学习更多的编程实战
所有的代码都在github上开源:100-line-code 欢迎Star
最后祝大家5.1劳动节快乐,多学习多锻炼,提高自己的编程能力,加油!