苹果棋 - 踏得网

双人单机

h5, game, chess

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 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;
var count1 = 0;
var count2 = 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);

}
}

//绘制棋盘
can = document.getElementById('can');
og = can.getContext('2d');
can.width = window.innerWidth;
can.height = window.innerHeight;
og.strockStyle = '#3333ff';
for (i = 0; i < 13; ++i) {
    og.strokeStyle = '#00ffff';
    og.beginPath();
    og.lineWidth = 1;
    og.moveTo(361 + x0 + i * a + a * 0.425, y0 - 15);
    og.lineTo(361 + x0 + i * a + a * 0.425, y0 + 13 * a + 7 + 19);
    og.stroke();

og.beginPath();
    og.lineWidth = 1;
    og.moveTo(361 + x0 - 27, y0 + 7 + i * a + a * 0.425);
    og.lineTo(361 + x0 + 13 * a + 15, y0 + 7 + i * a + a * 0.425);
    og.stroke();
}
og.fillStyle = '#00ffff';
og.beginPath();
og.arc(361 + x0 + 10 * a + a * 0.425, y0 - 17 + 3 * a, 10, 0, 2 * Math.PI);
og.arc(361 + x0 + 10 * a + a * 0.425, y0 - 17 + 11 * a, 10, 0, 2 * Math.PI);
og.fill();
og.closePath();
og.beginPath();
og.arc(361 + x0 + 2 * a + a * 0.425, y0 - 17 + 3 * a, 10, 0, 2 * Math.PI);
og.arc(361 + x0 + 2 * a + a * 0.425, y0 - 17 + 11 * a, 10, 0, 2 * Math.PI);
og.fill();
og.closePath();
og.arc(361 + x0 + 6 * a + a * 0.425, y0 - 17 + 7 * a, 10, 0, 2 * Math.PI);
og.fill();

//创建初始棋子
oChess = document.getElementsByClassName('chess');
init('radial-gradient(10px 10px at 13px 13px,#fff,#333)', 2, 84);
init('radial-gradient(10px 10px at 13px 13px,#fff,#333)', 2, 98);
init('radial-gradient(8px 8px at 10px 10px,#fff,#bbb)', 1, 85);
init('radial-gradient(8px 8px at 10px 10px,#fff,#bbb)', 1, 97);

for (i = 0; i < oChess.length; ++i) {
    oChess[i].onclick = function() {
        this.style.opacity = '1';
        if (jud % 2 == 0 && this.o == 0) {
            this.style.background = 'radial-gradient(8px 8px at 10px 10px,#fff,#bbb)';
            this.style.animation = 'flash infinite alternate 2s';
            this.style.cursor = 'default';
            oChess[ind].style.animation = '';
            ind = this.id;
            this.o = 1;
            jud++;
            found(this.id, 14, arr1);
            rotate(arr1, this, 14);
            found(this.id, -14, arr1);
            rotate(arr1, this, -14);
            found(this.id, 12, arr1);
            rotate(arr1, this, 12);
            found(this.id, -12, arr1);
            rotate(arr1, this, -12);
            found(this.id, 1, arr1);
            rotate(arr1, this, 1);
            found(this.id, -1, arr1);
            rotate(arr1, this, -1);
            found(this.id, 13, arr1);
            rotate(arr1, this, 13);
            found(this.id, -13, arr1);
            rotate(arr1, this, -13);

} else if (jud % 2 == 1 && this.o == 0) {
            this.style.background = 'radial-gradient(10px 10px at 13px 13px,#fff,#333)';
            this.style.animation = 'flash infinite alternate 2s';
            this.style.cursor = 'default';
            oChess[ind].style.animation = '';
            ind = this.id;
            this.o = 2;
            jud++;
            found(this.id, 14, arr1);
            rotate(arr1, this, 14);
            found(this.id, -14, arr1);
            rotate(arr1, this, -14);
            found(this.id, 12, arr1);
            rotate(arr1, this, 12);
            found(this.id, -12, arr1);
            rotate(arr1, this, -12);
            found(this.id, 1, arr1);
            rotate(arr1, this, 1);
            found(this.id, -1, arr1);
            rotate(arr1, this, -1);
            found(this.id, 13, arr1);
            rotate(arr1, this, 13);
            found(this.id, -13, arr1);
            rotate(arr1, this, -13);
        }

manege();
    }
}

}
        document.title = arr.length;
    }

}
}

function rotate(arr, ele, d) {
    if (arr.length != 0 && arr[0].o != arr[arr.length - 1].o) { //console.log(arr.length);
        for (i = 0; i < arr.length; ++i) {
            arr[i].style.background = arr[arr.length - 1].style.background;
            arr[i].style.animation = 'rotate infinite alternate 2s';
            arr[i].o = arr[arr.length - 1].o;

}
        /*sleep(1000);
				for(i=0;i<arr.length;++i)
						{						
							arr[i].style.animation=null;					
							
						}*/
    }
    arr.length = 0;

}

abuse.style.display = 'block';
        abuse.style.animation = 'end1 alternate 2s';
        if (count1 > count2) {
            abuse.innerHTML = '白方赢  ' + '白子:' + count1 + ' 黑子:' + (count2);
        } else if (count1 < count2) {
            abuse.innerHTML = '黑方赢  ' + '黑子:' + (count2) + ' 白子:' + count1;
        } else {
            abuse.innerHTML = '平局';
        }

}
}

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

function init(b, o, id) {
    oChess[id].style.opacity = '1';
    oChess[id].style.background = b;
    oChess[id].o = o;
}

编译

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background: #826f6f;
}
#checkerboard {
    z-index: 0;
    position: relative;
    left: 361px;
    top: 7px;
    width: 622px;
    height: 622px;
    background: rgba(0, 0, 0, 0);
    //background-size:100% 100%;
    animation: flash1 infinite alternate 150s;
}
#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, 1);
    font-size: 50px;
    text-align: center;
    line-height: 622px;
}
#can {
    z-index: -1;
    top: 0;
    left: 0;
    position: absolute;
    background: rgba(255, 255, 255, 0);
}
.chess {
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: black;
    position: absolute;
    opacity: 0;
    box-shadow: 1px 1px 2px #660066;
    //border:2px double #5a3405; 
}
.chess:before {
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.02)));
}
.chess:after {
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.01)), to(rgba(255, 255, 255, 0.15)));
}
.chessboardBox {
    padding: 30px;
    background: #f0c287;
    border: 4px double #5a3405;
    -moz-box-shadow: inset 0px 0px 5px rgba(89, 51, 4, 0.6);
    height: 575px;
    width: 575px;
    position: relative;
    margin: 20px auto;
}
.chessboardBox:after {
    content: "";
    -moz-box-shadow: 0px 0px 5px rgba(89, 51, 4, 1);
    height: 643px;
    width: 643px;
    display: block;
    position: absolute;
    left: -4px;
    top: -4px;
}
.chess:hover {
    opacity: 0.3;
    background: #ff6666;
}
@keyframes flash {
    0% {
        transform: scale(1);
        box-shadow: 1px 1px 2px #660066;
        border: 1px solid rgba(252, 28, 43, 0);
    }
    100% {
        transform: scale(1.1);
        box-shadow: 0 0px 40px rgba(52, 255, 43, 1);
        border: 1px solid rgba(52, 255, 43, 1);
    }
}
@keyframes flash1 {
    0% {
        box-shadow: 0px 0px 0px #660066;
        border: 1px solid rgba(252, 28, 43, 0);
    }
    100% {
        box-shadow: 0 0px 40px rgba(52, 255, 43, 1);
        border: 1px solid rgba(52, 255, 43, 1);
    }
}
@keyframes end1 {
    0% {
        color: rgba(255, 255, 255, 0);
    }
    50% {
        color: rgba(255, 255, 255, 0.5);
    }
    100% {
        color: rgba(255, 255, 255, 1);
    }
}
@keyframes rotate {
    from {
        box-shadow: 0 0px 40px rgba(252, 28, 43, 1);
        border: 1px solid rgba(252, 28, 43, 1);
    }
    to {
        box-shadow: 1px 1px 2px #660066;
        border: 1px solid rgba(252, 28, 43, 0);
    }
}

HTML

双人单机

h5, game, chess

编辑器支持Emmet

快捷键

双人单机

h5, game, chess

HTML5 CSS3一个很棒的苹果产品响应式自适应变形动画

HTML5 3D视觉效果的国际象棋棋盘动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：