html5的canvas实现五子棋小游戏

  • html5的canvas实现五子棋小游戏已关闭评论
  • 197 views
  • A+
所属分类:JavaScript
html5也出来也很久了,也是html标记语言的第五次重大修改。html5带来了很多原来没有的新特性,可以通过https://www.w3.org/TR/html5/查看带的特性,目前大部分浏览器都支持html5(IE9以上)。这篇文章我们将使用canvas来实现一个五子棋游戏。canvas提供了绘制2D和3D(WebGL)的接口, 游戏的图形显示我使用canvas来实现,逻辑功能还是使用javaScript来控制。
html5的canvas实现五子棋小游戏

游戏分析

五子棋的棋盘和围棋一样只是格数多少的问题,本例中我们使用围棋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

推荐阅读

  1. https://www.w3.org/TR/html5/
  2. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
  3. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
  4. http://www.html5gamedevs.com/
  5. http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html
  6. https://joshondesign.com/p/books/canvasdeepdive/chapter01.html
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin