JavaScript实现五子棋游戏的方法详解

前端  /  管理员 发布于 5年前   484

本文实例讲述了JavaScript实现五子棋游戏的方法。分享给大家供大家参考，具体如下：

最近半个月一直在看深入的学习JavaScript，里面有很多重点和难点，比如闭包、词法分析、面向对象等。今天给大家分享一个由JavaScript编写的五子棋游戏，主要用到JavaScript的面向对象、事件委托、闭包等知识，还是挺有分量的，正好可以检测学习的成果。

老规矩，先上图，再说话。

效果图：

五子棋素材图：

代码：

今天不知道怎么搞的，写博客的时候上传不了图片，还好我机智，把图片存到GitHub上，好了，来讲代码。首先，我必须先说明一下，我觉得代码还有很大的优化空间，感兴趣的同学可以继续研究。

实现思路：首先创建一个表格，共15行，15列，把背景改成棋盘的图片，给这个table添加onclick事件，这里使用到了事件委托，事件委托我在之前的文章有介绍过，感兴趣的同学可以去看看。去调用xiaQi函数，在下棋函数中，先判断选择的位置是否已经下过棋了，使用闭包获取下一个棋子的颜色，然后调用judge函数，在函数中先获取当前棋子所下的位置，遍历255个棋格，看看是否能赢，判断是否五子连珠，如果有则游戏结束。

PS：这里再为大家推荐另一款本站的js版五子棋游戏供大家参考（其AI相对简单一些）

在线五子棋游戏：
http://tools..net.cn/games/wuziqi

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

• 纯JS实现五子棋游戏兼容各浏览器(附源码)
• Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
• 基于JavaScript实现五子棋游戏
• 原生JS+Canvas实现五子棋游戏实例
• javascript 初学教程及五子棋小程序的简单实现
• JS+canvas实现的五子棋游戏【人机大战版】
• H5+C3+JS实现五子棋游戏（AI篇）
• 原生JS+Canvas实现五子棋游戏
• JS canvas绘制五子棋的棋盘
• H5+C3+JS实现双人对战五子棋游戏（UI篇）
• node.js利用socket.io实现多人在线匹配联机五子棋
• js实现AI五子棋人机大战