html5 简单五子棋

  • 实现思路

棋盘用横线和竖线完成;棋子为黑白两张图片,通过方法将图片画到棋盘上;鼠标自定义为棋子形状.

  • 具体实现

画横竖线可用moveTo和lineTo配合完成.

使用drawImage将黑白图片画到canvas上.

鼠标自定义形状使用样式完成,所需形状图片可使用artcurs软件制作.

实现人机对战的逻辑没有深入研究,这里实现得非常简单,主要是人下,电脑堵的方式.

胜利后的笑脸用canvas的arc方法实现

  • 源码

源码下载

原文地址:https://www.cnblogs.com/liqiao/p/2823481.html