html5 简单五子棋

liqiao

<div id="cnblogs_post_body">

• 实现思路
  

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

• 具体实现
  

画横竖线可用moveTo和lineTo配合完成.
使用drawImage将黑白图片画到canvas上.
鼠标自定义形状使用样式完成,所需形状图片可使用artcurs软件制作.
实现人机对战的逻辑没有深入研究,这里实现得非常简单,主要是人下,电脑堵的方式.
胜利后的笑脸用canvas的arc方法实现

• 源码
  

源码下载