实现五子棋功能

五子棋功能"/>

实现五子棋功能

我的上一篇博客制作了一个五子棋模型，今天就来实现他的功能

首先谈谈我是如何判断是否连成五子：五子棋练成五子可从四个方向所以分四个方向判断

一.从左到右

        一个棋连成五个那么它只有五个位置从第一到最后，那么我就从他是最后一个判断到他是第一个或者他是第一个判断到是最后一个，但是这样会出现一个问题，当他往前数五个也许会换行或者在往后判断的过程中也会换行，为了解决这个问题我们可以事先做出判断

那么如何判断他到左右两边的距离就是我们要做的事，到左边的距离其实就是他的余数，

由此我们可以分成三种情况下方代码i为index值共225个点，index最大为224

1.        余数小于等于4

2.        余数大于等于10

3.        else（等于四鱼等于是算在else中和算在1 2 中相同）

 var flag = true;var flaga = false;var cir = document.getElementsByTagName('circle');for (var i = 0; i < cir.length; i++) {(function (i) {cir[i].onclick = function (e) {if (e.target.style.opacity != '1') {e.target.style.opacity = '1'if (flag) {e.target.setAttribute('fill', 'black')e.target.a = '黑棋'} else {e.target.setAttribute('fill', 'white')e.target.a = '白棋'}flag = !flag}// console.log((i));var ys = i % 15// console.log(ys);if (ys < 5) {// var flaga = false;var first = i - ys;for (first; first < i + 1; first++) {var t = 0for (var x = 1; x < 5; x++) {if (cir[first].a == cir[first + x].a) {t++// console.log(t)if (t == 4) {// if(e.target.a == '黑棋'){//     e.target.setAttribute('fill', 'black')// }else{//     e.target.setAttribute('fill', 'white')// }// alert(e.target.a + '获胜')flaga = true}}}}// if (flaga) {//     alert(e.target.a + '获胜1')// }} else if (ys >= 10) {// var flaga = false;var first = i - ys + 14;for (first; first > i - 1; first--) {var t = 0for (var x = 1; x < 5; x++) {if (cir[first].a == cir[first - x].a) {t++// console.log(t)if (t == 4) {// if(e.target.a == '黑棋'){//     e.target.setAttribute('fill', 'black')// }else{//     e.target.setAttribute('fill', 'white')// }// alert(e.target.a + '获胜')flaga = true}}}}// if (flaga) {//     alert(e.target.a + '获胜1')// }} else {// var flaga = falsevar first = i - 4;for (first; first < i + 1; first++) {var t = 0for (var x = 1; x < 5; x++) {if (cir[first].a == cir[first + x].a) {t++// console.log(t)if (t == 4) {// if(e.target.a == '黑棋'){//     e.target.setAttribute('fill', 'black')// }else{//     e.target.setAttribute('fill', 'white')// }// alert(e.target.a + '获胜')flaga = true}}}}// if (flaga) {//     alert(e.target.a + '获胜1')// }}

二.从上到下

同理我们分成三类但距离顶部的位置由余数变成商

 var sh = Math.floor(i / 15);// console.log(sh);if (sh < 5) {var first1 = i - 15 * sh;for (first1; first1 < i + 1; first1 += 15) {var t1 = 0;for (var x = 15; x < 75; x += 15) {if (cir[first1].a == cir[first1 + x].a) {t1++;if (t1 == 4) {// alert(e.target.a + '获胜2')flaga = true}}}}} else if (sh >= 10) {var first1 = i + 15 * (14 - sh);for (first1; first1 > i - 1; first1 -= 15) {var t1 = 0;for (var x = 15; x < 75; x += 15) {if (cir[first1].a == cir[first1 - x].a) {t1++;if (t1 == 4) {// alert(e.target.a + '获胜2')flaga = true}}}}}else {var first1 = i - 60;for (first1; first1 < i + 1; first1 += 15) {var t1 = 0;for (var x = 15; x < 75; x += 15) {if (cir[first1].a == cir[first1 + x].a) {t1++;if (t1 == 4) {// alert(e.target.a + '获胜2')flaga = true}}}}}

三.左上到右下

        这种情况较为复杂，同理为了不突破边界我们同样要做处理，方法还是与上面相同从他第一后位置找到最后一个位置或者最后一个位置找到第一个位置。由上面我们可以看出我们需要找出起始位置，这一次当他突破左右两个边界是我们需要判断他的商是否在减一或者加一但‘我并未采用这种方法，因为不好找出他还是在哪一个值的时候商加二或者减二（加二意味着突破左右的界限减二同理）

1.        当余数小于四时

        判断此时的余数与商的大小，取较小的那一个起始位置就是i - 16*较小数，i为index但此时会发生超越下方边界的问题有两种解决方法，

（1）.判断（14-商）这个值就是与下方的距离是否小于等于10因为此时下方才会有四行

（2）简单无脑就是在比较向下比较的点有没有超过224就OK

2.        当余数大于等于四小于等于十 

        同样我们有最后一个找到第一个避免超出上下边界分两种情况，也可以不分就判断起始位置大于0终点小于224也可以那这种情况起始位置就是i - 64

（1）商小于4则起始位置为i- 商*16（相当于人为判断他的起始位置和上方判断起始位置小于0效果一样

（2）商大于10时终点位置判断是否小于224

 3.        else

        这一次如果做后一个找到第一个会突破左右边距，但是从第一个找到最后一个会突破上下边距利于判断这一次我是直接判断由于时所以起始位置会比终点大所以将上述方法反过来就OK即起始位置小于224终点大于0

 var small = ys < sh ? ys : sh;// console.log(small)if (ys < 4) {var first2 = i - small * 16for (first2; first2 < i + 1; first2 += 16) {var t2 = 0;// console.log(cir[first2].a)for (var x = 16; x < 80; x += 16) {if (first2 + x < 224) {if (cir[first2].a == cir[first2 + x].a) {t2++;if (t2 == 4) {// alert(e.target.a + '获胜3')flaga = true}}}}}} else if (ys >= 4 && ys <= 10) {if (sh < 4) {var first2 = i - sh * 16for (first2; first2 < i + 1; first2 += 16) {var t2 = 0;for (var x = 16; x < 80; x += 16) {if (first2 + x < 224) {if (cir[first2].a == cir[first2 + x].a) {t2++;if (t2 == 4) {// alert(e.target.a + '获胜3')flaga = true}}}}}} else {var first2 = i - 64;for (first2; first2 < i + 1; first2 += 16) {var t2 = 0;for (var x = 16; x < 80; x += 16) {if (first2 + x < 224) {if (cir[first2].a == cir[first2 + x].a) {t2++;if (t2 == 4) {// alert(e.target.a + '获胜3')flaga = true}}}}}}} else {// var big = ys < sh ? sh : ys;// console.log(big);var first2 = i + (14 - ys) * 16// console.log(first2)for (first2; first2 > i - 1; first2 -= 16) {var t2 = 0for (var x = 16; x < 80; x += 16) {if (first2 - x > 0 && first2 < 224) {if (cir[first2].a == cir[first2 - x].a) {t2++;// console.log(t2)if (t2 == 4) {// alert(e.target.a + '获胜3')flaga = true}}}}}}

 四. 右上到左下

        同理与三方法相同便不再赘述

var ri = 14 - ysvar bo = 14 - shsmall1 = sh < ri ? sh : ri// console.log(ri,bo,small1)if (ys > 10) {var first3 = i - small1 * 14for (first3; first3 < i + 1; first3 += 14) {var t3 = 0for (var x = 14; x < 70; x += 14) {if (first3 + x < 224) {if (cir[first3].a == cir[first3 + x].a) {t3++;if (t3 == 4) {// alert(e.target.a + '获胜4')flaga = true}}}}}} else if (ys >= 4 && ys <= 10) {if (sh < 4) {var first3 = i - 14 * sh;for (first3; first3 < i + 1; first3 += 14) {var t3 = 0for (var x = 14; x < 70; x += 14) {if (cir[first3].a == cir[first3 + x].a) {t3++if (t3 == 4) {// alert(e.target.a + '获胜4')flaga = true}}}}} else {var first3 = i - 56for (first3; first3 < i + 1; first3 += 14) {var t3 = 0for (var x = 14; x < 70; x += 14) {if (first3 + x < 224) {if (cir[first3].a == cir[first3 + x].a) {t3++if (t3 == 4) {// alert(e.target.a + '获胜4')flaga = true}}}}}}} else {var small2 = bo < ys ? bo : ys;var first3 = i + small2 * 14// console.log(first3,small2)// console.log(small2, first3, i);for (first3; first3 > i - 1; first3 -= 14) {var t3 = 0for (var x = 14; x < 70; x += 14) {if (first3 - x > 0) {if (cir[first3].a == cir[first3 - x].a) {t3++if (t3 == 4) {// alert(e.target.a + '获胜4')flaga = true}}}}}}

如有bug速与我联系