五子棋网页版

基于js的五子棋教程

先给出问题,然后一步一步的去解决;

  • 需要的知识:html,css,js基础语法,包括创建对象和继承属性;
  • 需要的知识很少,就是js的创建对象,如果不会就去看一下书吧。
  • 整个js都是基于一个叫xuanran 的对象来操作的,所以请大家一边看教程,一遍对照源码,源码很短一共不到200行

面临的问题

  1. 第一个问题,就是这个棋盘怎么显示;
  2. 棋盘显示后,接下来的问题就是,怎么点一下,在一个特定的点显示出一个圆点。
  3. 上面两个问题解决了,五子棋的面貌就存在了,接下来是,怎么把五子棋的位置用变量描述出来,用于量化和计算。
  4. 这一步的问题是,怎么利用棋子的位置变量,计算某一时刻棋子的输赢。判断输赢
    • 以上:这就是制作五子棋按顺序要面临的四个问题,接下来我会按顺序一步一步的解决这四个问题。所有源码和素材可以找我私发

第一个问题

这个问题是怎么显示一个棋盘,是一个渲染问题,渲染这个词不是什么很高级的词,对于网页来说,我想到两种办法,一个是直接一个棋盘图片,另一个是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)]

第二个问题

怎么显示棋子呢;和点一下出现一个棋子

  1. 首先先根据图片棋盘的大小,15*15d大小,它的大小是500px,在css中有设置,所以每一个棋子的大小是500px/(15+1)=31;这里加1是为了让两个棋子间有空隙

  2. 下面是创造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)]

  3. 这样就显示了15*15个棋子,从左到右,从上到下,每一个棋子都有一个id数值序号,这样五子棋就做好了,但是一开始肯定是不显示的,点击一下才会显示,所以它的css属性初始为’’’

    .qizi {
        /*棋子的大小格式*/
        width: 30.5px;
        height: 30.5px;
        margin: 1.2px;
        display: inline-block;
        border-radius: 50%;
        /*初始状态如果不设置背景属性就是空白的,不显示*/
    }
    
    1. 现在这些棋子一开始都不显示,我们为每一个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; //表示黑色
          }
      
      1. 上面的代码中有一个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个div
            var 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)]

第三个问题

  1. 上面的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状态变量。表示棋子的状态

最后一个问题

  • 判断输赢,就是遍历每一行

怎么在某个方向上判断输赢,上下,左右,正斜,反斜;

  1. 先设置两个变量作为棋子在某一行的连在一起的数量。

  2. 设置两个嵌套的for循环,一个代表列,一个代表行,用于遍历数组

  3. 对一行的遍历,直接用逻辑表达式判断是否有五个状态变量qizicontion是否五个连在一起都一样,如果一样就令响应的白或者黑变量,设置为5

  4. 遍历的算法有很多,我这个和之前的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();
   }

}


### 到这里,一个五子棋就算做完了

你可能感兴趣的:(javascript,算法)