单机版五子棋

没有AI，需要两个人一起玩

h5, game, chess

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1099
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

checkerboard = document.getElementById('checkerboard');
abuse = document.getElementById('abuse');
arr1 = new Array();
var jud = 0;
var x0 = 47,
    y0 = 43;
var a = 41.65,
    b = 41.65;
var ind = 0;
for (var i = 0; i < 13; ++i) {
    for (var j = 0; j < 13; ++j) {
        checkers = document.createElement('div');
        checkers.className = 'chess';
        checkers.o = 0;
        checkers.id = i * 13 + j;
        checkers.style.left = x0 + i * a + 'px';
        checkers.style.top = y0 + j * b + 'px';
        checkerboard.appendChild(checkers);

}
}

oChess = document.getElementsByClassName('chess');

for (i = 0; i < oChess.length; ++i) {
    oChess[i].onclick = function() {
        this.style.opacity = '1';
        oChess[i]
        if (jud % 2 == 0 && this.o == 0) {
            document.title = '轮到黑方落子';
            this.style.background = '#ffffff';
            this.style.animation = 'flash infinite alternate 0.8s';
            oChess[ind].style.animation = '';
            ind = this.id;
            this.o = 1;
            jud++;
        } else if (jud % 2 == 1 && this.o == 0) {
            document.title = '轮到白方落子';
            this.style.background = '#330000';
            this.style.animation = 'flash infinite alternate 0.8s';
            oChess[ind].style.animation = '';
            ind = this.id;
            this.o = 2;
            jud++;
        }
        found(this.id, 14, arr1);
        found(this.id, -14, arr1);
        manege(arr1);
        found(this.id, 12, arr1);
        found(this.id, -12, arr1);
        manege(arr1);
        found(this.id, 1, arr1);
        found(this.id, -1, arr1);
        manege(arr1);
        found(this.id, 13, arr1);
        found(this.id, -13, arr1);
        manege(arr1);

}
}

function found(id, d, arr) { //寻找棋子
    Id = parseInt(id);
    if (oChess[Id + d] && oChess[Id + d].o == oChess[Id].o) {
        console.log(arr.length);
        arr.push(oChess[Id]);
        found(Id + d, d, arr);
    } else {

arr.push(oChess[Id]);
    }
}

function manege(arr) { //判断是否结束

if (arr.length > 5) {
        for (i = 0; i < arr1.length; ++i) {
            arr[i].style.animation = 'end infinite alternate 0.5s';
            abuse.style.display = 'block';
            abuse.innerHTML = isWin(arr[i].o) + '赢';
            abuse.style.animation = 'end1 alternate 2s';
        }
        arr.length = 0;
    } else {
        arr.length = 0;
    }
}

function isWin(o) {
    if (o == 1) {
        return '白方'
    }
    if (o == 2) {
        return '黑方'
    }
}

编译

CSS

* {
      margin: 0;
      padding: 0;
  }
  #checkerboard {
      cursor: pointer;
      position: relative;
      left: 361px;
      top: 7px;
      width: 622px;
      height: 622px;
      background-image: url("https://wow.techbrood.com/uploads/user_upload/52266/1.jpg");
      background-size: 100% 100%;
  }
  #abuse {
      z-index: 1;
      display: none;
      position: absolute;
      left: 361px;
      top: 7px;
      width: 622px;
      height: 622px;
      background: rgba(0, 0, 0, 0.3);
      color: rgba(255, 255, 255, 0);
      font-size: 100px;
      text-align: center;
      line-height: 622px;
  }
  .chess {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: black;
      position: absolute;
      opacity: 0;
      box-shadow: 1px 1px 2px #660066;
  }
  .chess:hover {
      opacity: 0.3;
      background: #ff6666;
  }
  @keyframes flash {
      0% {
          transform: scale(1);
      }
      100% {
          transform: scale(1.1);
      }
  }
  @keyframes end1 {
      0% {
          color: rgba(255, 255, 255, 0);
      }
      50% {
          color: rgba(255, 255, 255, 1);
      }
      100% {
          color: rgba(255, 255, 255, 0);
      }
  }
  @keyframes end {
      from {
          box-shadow: 0 0px 40px rgba(252, 28, 43, 1);
      }
      to {
          box-shadow: 1px 1px 2px #660066;
      }
  }

HTML

没有AI，需要两个人一起玩

h5, game, chess

编辑器支持Emmet

快捷键

没有AI，需要两个人一起玩

h5, game, chess

纯CSS制作的棋子连接游戏

html5版本的可交互异或电子元器件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：