用jQuery写一个五子棋

简介: 我用jQuery短时间内写了一个五子棋,代码不复杂,简单易懂,文章写了一些代码思路,在文章最后附上代码链接。水平有限,欢迎沟通。

1、棋盘生成

运用一个二维数组,初始值均为0,CSS修改好样式直接append到容器中。

2、点击下棋

为每个落棋点添加点击监听事件,先判断此处是否已有棋(获取点击处是第几个落棋点,计算其位于二维数组的坐标——第几行第几列,若为0,则无棋,可下),利用一个参数计算是奇数次点击还是偶数次点击,若奇为黑棋,若偶为白棋,动态在落棋点生成对应棋子。(可先设置好样式,点击直接添加class即可)同时进行胜利判断(见3)。

3、胜利判断

五子棋的胜利条件可分为4种,4种条件均需要判断是否满足其一,满足则胜利,详细介绍如下:

  • 横向成五: board[x][y+i]===w&&board[x][y+i+1]===w&&board[x][y+i+2]===w&&board[x][y+i+3]===w&&board[x][y+i+4]===w
  • 纵向成五: board[x+i][y]===w&&board[x+i+1][y]===w&&board[x+i+2][y]===w&&board[x+i+3][y]===w&&board[x+i+4][y]===w
  • 左斜成五: board[x+i][y+i]===w&&board[x+i+1][y+i+1]===w&&board[x+i+2][y+i+2]===w&&board[x+i+3][y+i+3]===w&&board[x+i+4][y+i+4]===w
  • 右斜成五: board[x+i][y-i]===w&&board[x+i+1][y-i-1]===w&&board[x+i+2][y-i-2]===w&&board[x+i+3][y-i-3]===w&&board[x+i+4][y-i-4]===w

双重循环,外层循环w从1到2,若满足条件之一,判断w为1或者2,1为白赢,2为黑赢。内层循环i从-4到0,逐一判断是否符合条件。

4、结束处理

若有一方胜利则进行结束处理,需要将数组重新赋0,棋子均remove()掉,下棋点击次数赋0.

[U<code>_EY7$RUXR</code>Q5X$4RUEOH.png

获取代码链接:https://pan.baidu.com/s/1wXvfXlBfDv2ahYK8p9r4EQ
提取码:qow3

目录
相关文章
|
2月前
|
JavaScript 前端开发
jquery实现简单计算器特效
jquery实现简单计算器特效
|
3月前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
80 14
|
8月前
|
移动开发 JavaScript 前端开发
老程序员分享:jQuery笔记(四)jQuery中的动画
老程序员分享:jQuery笔记(四)jQuery中的动画
59 0
|
8月前
|
JavaScript 程序员
老程序员分享:jquery方法总结
老程序员分享:jquery方法总结
37 0
|
JavaScript
仿jquery的几行代码
仿jquery的几行代码
49 2
|
JavaScript
《锋利的jquery》认识jquery总结
《锋利的jquery》认识jquery总结
113 0
|
JavaScript
jQuery宽屏游戏焦点图
在线演示 本地下载
776 0
|
JavaScript
jQuery音乐播放器jPlayer
在线演示 本地下载
858 0
|
JavaScript 前端开发
jQuery实现2048游戏
整体思路: 1. 基础设置:游戏的背景是一个4*4的格子背景, 游戏中分别有2、4、8、16等不同的色块,每种色块的颜色由js脚本来控制。 游戏界面 2. 游戏开始: 游戏开始的时候,进行初始化操作。
1050 0
jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQuery框架还支持自定义各种动画效果。
971 0