基于js的五子棋教程
先给出问题,然后一步一步的去解决;
- 需要的知识:html,css,js基础语法,包括创建对象和继承属性;
- 需要的知识很少,就是js的创建对象,如果不会就去看一下书吧。
- 整个js都是基于一个叫xuanran 的对象来操作的,所以请大家一边看教程,一遍对照源码,源码很短一共不到200行
面临的问题
- 第一个问题,就是这个棋盘怎么显示;
- 棋盘显示后,接下来的问题就是,怎么点一下,在一个特定的点显示出一个圆点。
- 上面两个问题解决了,五子棋的面貌就存在了,接下来是,怎么把五子棋的位置用变量描述出来,用于量化和计算。
- 这一步的问题是,怎么利用棋子的位置变量,计算某一时刻棋子的输赢。判断输赢
- 以上:这就是制作五子棋按顺序要面临的四个问题,接下来我会按顺序一步一步的解决这四个问题。所有源码和素材可以找我私发;
第一个问题
这个问题是怎么显示一个棋盘,是一个渲染问题,渲染这个词不是什么很高级的词,对于网页来说,我想到两种办法,一个是直接一个棋盘图片,另一个是canvas,canvas是个html标签,它在DOM中的对象有很多画图属性,他是一个块级标签,如果用这个就是直接取坐标绘画,我上学期做的MFC版的五子棋就是这个办法,我这次用的是背景图片,比较简单,直接绘图版的我有用MFC做过一个,我也写了实验报告,想参考的同学可以看一下,我把连接给出来:MFC版五子棋;
-
现在进入正题,用一个图片来显示五子棋’
‘就用这个来作为一个棋盘它的css是’’’#qipan {/*棋盘的大小格式*/width: 500px;height: 500px;background: url(../imgs/board.jpg);background-size: cover;margin-left: 30%;padding-left: 4px;padding-top: 4px; }
这样就画出了一个棋盘;第一步OK
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tIZ3JBXR-1593344020745)(csdn/board.jpg)]
第二个问题
怎么显示棋子呢;和点一下出现一个棋子
-
首先先根据图片棋盘的大小,15*15d大小,它的大小是500px,在css中有设置,所以每一个棋子的大小是500px/(15+1)=31;这里加1是为了让两个棋子间有空隙
-
下面是创造15*15=225个’
'标签;每一个标签都代表一个棋子,通过设置css属性让每一个棋子变为一个圆形,下面先给出显示的js代码‘’’
for (var i = 1; i <= 15 * this.qipannum; i++) { //创建div,这个是1是为了计算行列值方便var a = document.createElement("div");a.setAttribute("data", i);a.className = "qizi";document.getElementById('qipan').appendChild(a); //把div放进棋盘div里
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EifpxUYO-1593344020747)(csdn/qizi.png)]
-
这样就显示了15*15个棋子,从左到右,从上到下,每一个棋子都有一个id数值序号,这样五子棋就做好了,但是一开始肯定是不显示的,点击一下才会显示,所以它的css属性初始为’’’
.qizi {/*棋子的大小格式*/width: 30.5px;height: 30.5px;margin: 1.2px;display: inline-block;border-radius: 50%;/*初始状态如果不设置背景属性就是空白的,不显示*/ }
-
现在这些棋子一开始都不显示,我们为每一个div都添加一个事件处理函数,点击一下就改变一下这个div的css属性,关键代码是:’’’
var y = _this.location(ev).y,x = _this.location(ev).x; if (_this.data[y][x].qizicontion == 0) {if (_this.role == 0) //白棋{target.style.background = 'aliceblue'; //让这个棋子的颜色显示出来_this.role = 1;_this.data[y][x].qizicontion = 1; //表示白色} else {target.style.background = 'black';_this.role = 0;_this.data[y][x].qizicontion = 2; //表示黑色}
-
上面的代码中有一个location函数,这个函数是取一个div的坐标的函数,它的代码是’’’
xuanran.prototype.location = function(ev) { //给出div的dom对象,判断出这个div的x,y坐标。行列都取决于这个var _this = this; //这个必须要设置,在别的函数调用该函数的时候,_this还是指向的对象var target = ev.target;var data = target.getAttribute('data'); //获取到第N个divvar y = Math.ceil(data / 15); //表示第y行var x = (data % 15); //表示列if (x == 0) x = 15;return { y: y - 1, x: x - 1 }; //返回一个json,包括div的x,y坐标 }
现在,棋子问题也解决了OK,会出现下面这个效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9pzyu9mJ-1593344020749)(csdn/qizi2.png)]
-
-
第三个问题
-
上面的location函数,可以获取到每一个div棋子的x,y行竖直坐标,那为何我们不设置一个二维数组来储存它的属性呢?
‘’’
xuanran.prototype.initshuzu = function() { //初始化数组var _this = this;for (var i = 0; i < 15; i++) { //每一行y_this.data[i] = new Array();for (var ii = 0; ii < 15; ii++) { //每一列x_this.data[i][ii] = { qizicontion: 0 }} //每个元素代表一个棋子,0是没有下棋,1是白棋,2是黑棋}}
这个函数,就是初始化数组函数,它会令这个数组,初始化,每一个数组元素保存的都是一个json状态变量。表示棋子的状态
最后一个问题
- 判断输赢,就是遍历每一行
怎么在某个方向上判断输赢,上下,左右,正斜,反斜;
-
先设置两个变量作为棋子在某一行的连在一起的数量。
-
设置两个嵌套的for循环,一个代表列,一个代表行,用于遍历数组
-
对一行的遍历,直接用逻辑表达式判断是否有五个状态变量qizicontion是否五个连在一起都一样,如果一样就令响应的白或者黑变量,设置为5
-
遍历的算法有很多,我这个和之前的MFC版的也不同,怎么样都行,如果你想不到什么好的办法,就用我这个,细节我在源码的注释中写的很清楚了,不做太多解释了,请看源码
‘’’
xuanran.prototype.panduanshuying = function() { //判断输赢var _this = this;var bai = 1,hei = 1; //初始临时变量//先竖直判断for (var i = 0; i < _this.qipannum; i++) { //列for (var q = 0; q < _this.qipannum - 4; q++) { //行遍历量,放第二级,减4最后留出五个做判断if (_this.data[q][i].qizicontion == 1 && _this.data[q + 1][i].qizicontion == 1 &&_this.data[q + 2][i].qizicontion == 1 && _this.data[q + 3][i].qizicontion == 1 && _this.data[q + 4][i].qizicontion == 1) { //直接判断有没有连续的五个在一起bai = 5;}if (_this.data[q][i].qizicontion == 2 && _this.data[q + 1][i].qizicontion == 2 && _this.data[q + 2][i].qizicontion == 2 &&_this.data[q + 3][i].qizicontion == 2 && _this.data[q + 4][i].qizicontion == 2) {hei = 5;}}}//判断竖直for (var i = 0; i < _this.qipannum; i++) { //行遍历量for (var q = 0; q < _this.qipannum - 4; q++) { //列if (_this.data[i][q].qizicontion == 1 && _this.data[i][q + 1].qizicontion == 1 &&_this.data[i][q + 2].qizicontion == 1 && _this.data[i][q + 3].qizicontion == 1 && _this.data[i][q + 4].qizicontion == 1) { //直接判断有没有连续的五个在一起bai = 5;}if (_this.data[i][q].qizicontion == 2 && _this.data[i][q + 1].qizicontion == 2 && _this.data[i][q + 2].qizicontion == 2 &&_this.data[i][q + 3].qizicontion == 2 && _this.data[i][q + 4].qizicontion == 2) {hei = 5;}}}//右上斜for (var i = 4; i < _this.qipannum; i++) { //起始的行,从上往下,从第4行开始这个斜行才有五个棋子,//行是先最大,后小。列是先最小,再最大for (var hang = i, lie = 0; hang >= 0 + 4, lie < i - 3; hang--, lie++) {if (_this.data[hang][lie].qizicontion == 1 && _this.data[hang - 1][lie + 1].qizicontion == 1 && _this.data[hang - 2][lie + 2].qizicontion == 1 &&_this.data[hang - 3][lie + 3].qizicontion == 1 && _this.data[hang - 4][lie + 4].qizicontion == 1)bai = 5;if (_this.data[hang][lie].qizicontion == 2 && _this.data[hang - 1][lie + 1].qizicontion == 2 && _this.data[hang - 2][lie + 2].qizicontion == 2 &&_this.data[hang - 3][lie + 3].qizicontion == 2 && _this.data[hang - 4][lie + 4].qizicontion == 2)hei = 5;};//上面是上部分,下面是下部分for (var hang = i - 4, lie = _this.qipannum - 1; hang < _this.qipannum - 4; hang++, lie--) {if (_this.data[hang][lie].qizicontion == 1 && _this.data[hang + 1][lie - 1].qizicontion == 1 && _this.data[hang + 2][lie - 2].qizicontion == 1 &&_this.data[hang + 3][lie - 3].qizicontion == 1 && _this.data[hang + 4][lie - 4].qizicontion == 1)bai = 5;if (_this.data[hang][lie].qizicontion == 2 && _this.data[hang + 1][lie - 1].qizicontion == 2 && _this.data[hang + 2][lie - 2].qizicontion == 2 &&_this.data[hang + 3][lie - 3].qizicontion == 2 && _this.data[hang + 4][lie - 4].qizicontion == 2)hei = 5;}}//右下斜for (var i = 0; i < _this.qipannum - 4; i++) //起始的行{for (var hang = i, lie = 0; hang < _this.qipannum - 4, lie < 14 - i - 3; hang++, lie++) {if (_this.data[hang][lie].qizicontion == 1 && _this.data[hang + 1][lie + 1].qizicontion == 1 && _this.data[hang + 2][lie + 2].qizicontion == 1 &&_this.data[hang + 3][lie + 3].qizicontion == 1 && _this.data[hang + 4][lie + 4].qizicontion == 1)bai = 5;if (_this.data[hang][lie].qizicontion == 2 && _this.data[hang + 1][lie + 1].qizicontion == 2 && _this.data[hang + 2][lie + 2].qizicontion == 2 &&_this.data[hang + 3][lie + 3].qizicontion == 2 && _this.data[hang + 4][lie + 4].qizicontion == 2)bai = 5;}for (var hang = i + 4, lie = _this.qipannum - 1; hang > 3; hang--, lie--) {if (_this.data[hang][lie].qizicontion == 1 && _this.data[hang - 1][lie - 1].qizicontion == 1 && _this.data[hang - 2][lie - 2].qizicontion == 1 &&_this.data[hang - 3][lie - 3].qizicontion == 1 && _this.data[hang - 4][lie - 4].qizicontion == 1)bai = 5;if (_this.data[hang][lie].qizicontion == 2 && _this.data[hang - 1][lie - 1].qizicontion == 2 && _this.data[hang - 2][lie - 2].qizicontion == 2 &&_this.data[hang - 3][lie - 3].qizicontion == 2 && _this.data[hang - 4][lie - 4].qizicontion == 2)hei = 5;}}// if (_this.data[0][0].qizicontion != 0 && _this.data[1][0].qizicontion != 0) bai = 5;//后判断if (bai == 5) {_this.stutus = 1;_this.showend();}if (hei == 5) {_this.stutus = 2;_this.showend();}}
到这里,一个五子棋就算做完了
bai = 5;
//后判断if (bai == 5) {_this.stutus = 1;_this.showend();}if (hei == 5) {_this.stutus = 2;_this.showend();}
}
### 到这里,一个五子棋就算做完了