
html5的canvas实现五子棋小游戏
html5也出来也很久了,也是html标记语言的第五次重大修改。html5带来了很多原来没有的新特性,可以通过https://www.w3.org/TR/html5/查看带的特性,目前大部分浏览器都支持html5(IE9以上)。这篇文章我们将使用canvas来实现一个五子棋游戏。canvas
提供了绘制2D和3D(WebGL)的接口, 游戏的图形显示我使用canvas
来实现,逻辑功能还是使用javaScript
来控制。
游戏分析
五子棋的棋盘和围棋一样只是格数多少的问题,本例中我们使用围棋19路这个格局(其实就是一个19*19的矩阵)。通过格子的大小来绘制线条,棋子的直径就是格子的大小,使用棋手对象来代表棋子(本例我们新建两个棋手对象,通过更新下棋状态来通知棋手下棋)
,使用二维数组(矩阵
)来记录棋手下棋的位置。最终我们还要判断胜负关系, 本例的判断方法是判断当前棋子的上、下、左、右、左上、右下、右上、左下
的八个方向中各自对应的组合方向是否能形成5子
。
创建棋盘
新建一个Desk
类, 类的主要功能就是创建画布和渲染棋盘,以及一些开放功能获取配置、获取画布对象。
我们只需要new Desk(19).draw()
就可以渲染出一个棋盘。
Note::
坐标点(x, y)的值不能从0,0开始,要从棋子的半径位置开始增加,写在边界棋子会绘制不全。
棋子绘制
新建一个Chess
类,实现绘制棋子功能,初始化矩阵,获取坐标, 计算游结束。
玩家
下棋肯定少不了玩家,这里我们通过玩家点击画布获取位置再调用棋子类绘制玩家的棋子,同时更新玩家的状态。默认玩家都是等待开始的状态,当玩点击的时候更新为下棋的状态,下完的时候更新其它玩家的状态同时更新自己的状态。
Note:
this.updateState("waitPlay")
当前用户点击的区域无法匹配到正常的圆点,把玩家的状态更新为等待玩的状态。
控制
控制类主要是针对玩家的,获取当前要下棋的用户,通知回调。
通过以上的几个类我们就完成了从棋盘到玩家再到下棋的整个流程。
事例
总结
在整个五子棋代码中实际是没有难点之处的,主要还是个人思路要清晰。大家也可以给我指出不足的地方。下期我们使用这个和websocket
做一个在线的五子棋游戏。
源代码
https://github.com/TianLiangZhou/loocode-example/tree/master/gobang
推荐阅读
- https://www.w3.org/TR/html5/
- https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
- https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
- http://www.html5gamedevs.com/
- http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html
- https://joshondesign.com/p/books/canvasdeepdive/chapter01.html