自己写的HTML5Canvas+Javascript五-创新互联

看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本、样式,帮助大众,成为受欢迎的人,感觉满羡慕的。我也想学会前端技术,变得受欢迎呀。于是心血来潮,开始学习前端知识,并写下了这个小练习。

创新互联建站专注于企业成都全网营销、网站重做改版、和县网站定制设计、自适应品牌网站建设、成都h5网站建设商城网站定制开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为和县等各大城市提供网站开发制作服务。

基本思路是这样的:

  1. 使用Canvas绘制棋盘、棋子。

  2. 用二维数组保存棋盘状态。

  3. 设置一个flag,用以标识落子顺序。

  4. 点击时,在数组中检测当前点击位置是否存在棋子,若存在,则不落子;如游戏已结束,亦不落子。

  5. 落子时,更新数组,并将当前落子所在的行、列、左上-右下列、左下-右上列四个方向的棋盘状态写入到一维数组中,用以判断新落子是否形成了五子连珠。

  6. 若形成了五子连珠,提示胜利,并结束游戏;反之,则交换顺序,继续进行游戏。

效果图:

自己写的HTML5 Canvas + Javascript五

代码如下:

  1   2   3   4 五子棋  5   6   7 您的浏览器不支持 HTML5 canvas 标签。  
  8 重置  9  10 194 

 l

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:自己写的HTML5Canvas+Javascript五-创新互联
地址分享:http://scyanting.com/article/docpch.html