简易五子棋游戏

Html

Css

--益智五子棋--


    
        重新开始
    
    
        悔棋
    
    
        撤销悔棋

canvas {
	display:block;
	margin:50px auto;
	box-shadow:-2px -2px 2px #efefef,5px 5px 5px #b9b9b9;
	cursor:pointer;
}
.btn-wrap {
	display:flex;
	flex-direction:row;
	justify-content:center;
}
.btn-wrap div {
	margin:0 10px;
}
div>span {
	display:inline-block;
	padding:10px 20px;
	color:#fff;
	background-color:#EE82EE;
	border-radius:5px;
	cursor:pointer;
}
div.unable span {
	background:#D6D6D4;
	color:#adacaa;
}
#result-wrap {
	text-align:center;
}

for (var k = 0; k < count; k++) { // 将可能赢的情况都加1 
            if (wins[i][j][k]) {
                // debugger; 
                myWin[k]++;
                _compWin[k] = computerWin[k];
                computerWin[k] = 6; //这个位置对方不可能赢了 
                if (myWin[k] == 5) {
                    // window.alert('你赢了'); 
                    resultTxt.innerHTML = '恭喜，你赢了！';
                    over = true;
                }
            }
        }
        if (!over) {
            me = !me;
            computerAI();
        }
    }
}
// 悔棋 
backbtn.onclick = function(e) {
    if (!backAble) {
        return;
    }
    over = false;
    me = true;
    // resultTxt.innerHTML = 'o(?□?)o，悔棋中'; 
    // 撤销悔棋功能可用 
    returnbtn.className = returnbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)"), " ");
    // 我，悔棋 
    chressBord[_nowi][_nowj] = 0; //我，已占位置 还原 
    minusStep(_nowi, _nowj); //销毁棋子                  
    for (var k = 0; k < count; k++) { // 将可能赢的情况都减1 
        if (wins[_nowi][_nowj][k]) {
            myWin[k]--;
            computerWin[k] = _compWin[k]; //这个位置对方可能赢 
        }
    }
    // 计算机相应的悔棋 
    chressBord[_compi][_compj] = 0; //计算机，已占位置 还原 
    minusStep(_compi, _compj); //销毁棋子                  
    for (var k = 0; k < count; k++) { // 将可能赢的情况都减1 
        if (wins[_compi][_compj][k]) {
            computerWin[k]--;
            myWin[k] = _myWin[i]; //这个位置对方可能赢 
        }
    }
    resultTxt.innerHTML = '--益智五子棋--';
    returnAble = true;
    backAble = false;
}
// 撤销悔棋 
returnbtn.onclick = function(e) {
    if (!returnAble) {
        return;
    }
    // 我，撤销悔棋 
    chressBord[_nowi][_nowj] = 1; //我，已占位置  
    oneStep(_nowi, _nowj, me);
    for (var k = 0; k < count; k++) {
        if (wins[_nowi][_nowj][k]) {
            myWin[k]++;
            _compWin[k] = computerWin[k];
            computerWin[k] = 6; //这个位置对方不可能赢 
        }
        if (myWin[k] == 5) {
            resultTxt.innerHTML = '恭喜，你赢了！';
            over = true;
        }
    }
    // 计算机撤销相应的悔棋 
    chressBord[_compi][_compj] = 2; //计算机，已占位置   
    oneStep(_compi, _compj, false);
    for (var k = 0; k < count; k++) { // 将可能赢的情况都减1 
        if (wins[_compi][_compj][k]) {
            computerWin[k]++;
            _myWin[k] = myWin[k];
            myWin[k] = 6; //这个位置对方不可能赢 
        }
        if (computerWin[k] == 5) {
            resultTxt.innerHTML = 'o(?□?)o，计算机赢了，继续加油哦！';
            over = true;
        }
    }
    returnbtn.className += ' ' + 'unable';
    returnAble = false;
    backAble = true;
}
// 计算机下棋 
var computerAI = function() {
    var myScore = [];
    var computerScore = [];
    var max = 0;
    var u = 0,
        v = 0;
    for (var i = 0; i < 15; i++) {
        myScore[i] = [];
        computerScore[i] = [];
        for (var j = 0; j < 15; j++) {
            myScore[i][j] = 0;
            computerScore[i][j] = 0;
        }
    }
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j < 15; j++) {
            if (chressBord[i][j] == 0) {
                for (var k = 0; k < count; k++) {
                    if (wins[i][j][k]) {
                        if (myWin[k] == 1) {
                            myScore[i][j] += 200;
                        } else if (myWin[k] == 2) {
                            myScore[i][j] += 400;
                        } else if (myWin[k] == 3) {
                            myScore[i][j] += 2000;
                        } else if (myWin[k] == 4) {
                            myScore[i][j] += 10000;
                        }

if (computerWin[k] == 1) {
                            computerScore[i][j] += 220;
                        } else if (computerWin[k] == 2) {
                            computerScore[i][j] += 420;
                        } else if (computerWin[k] == 3) {
                            computerScore[i][j] += 2100;
                        } else if (computerWin[k] == 4) {
                            computerScore[i][j] += 20000;
                        }
                    }
                }

if (myScore[i][j] > max) {
                    max = myScore[i][j];
                    u = i;
                    v = j;
                } else if (myScore[i][j] == max) {
                    if (computerScore[i][j] > computerScore[u][v]) {
                        u = i;
                        v = j;
                    }
                }

if (computerScore[i][j] > max) {
                    max = computerScore[i][j];
                    u = i;
                    v = j;
                } else if (computerScore[i][j] == max) {
                    if (myScore[i][j] > myScore[u][v]) {
                        u = i;
                        v = j;
                    }
                }

}
        }
    }
    _compi = u;
    _compj = v;
    oneStep(u, v, false);
    chressBord[u][v] = 2; //计算机占据位置 
    for (var k = 0; k < count; k++) {
        if (wins[u][v][k]) {
            computerWin[k]++;
            _myWin[k] = myWin[k];
            myWin[k] = 6; //这个位置对方不可能赢了 
            if (computerWin[k] == 5) {
                resultTxt.innerHTML = 'o(?□?)o，计算机赢了，继续加油哦！';
                over = true;
            }
        }
    }
    if (!over) {
        me = !me;
    }
    backAble = true;
    returnAble = false;
    var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ');
    if (!hasClass) {
        returnbtn.className += ' ' + 'unable';
    }
}
//绘画棋盘 
var drawChessBoard = function() {
    for (var i = 0; i < 15; i++) {
        context.moveTo(15 + i * 30, 15);
        context.lineTo(15 + i * 30, 435);
        context.stroke();
        context.moveTo(15, 15 + i * 30);
        context.lineTo(435, 15 + i * 30);
        context.stroke();
    }
}
//画棋子 
var oneStep = function(i, j, me) {
    context.beginPath();
    context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI); // 画圆 
    context.closePath();
    //渐变 
    var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
    if (me) {
        gradient.addColorStop(0, '#0a0a0a');
        gradient.addColorStop(1, '#636766');
    } else {
        gradient.addColorStop(0, '#d1d1d1');
        gradient.addColorStop(1, '#f9f9f9');
    }
    context.fillStyle = gradient;
    context.fill();
}
//销毁棋子 
var minusStep = function(i, j) {
    //擦除该圆 
    context.clearRect((i) * 30, (j) * 30, 30, 30);
    // 重画该圆周围的格子 
    context.beginPath();
    context.moveTo(15 + i * 30, j * 30);
    context.lineTo(15 + i * 30, j * 30 + 30);
    context.moveTo(i * 30, j * 30 + 15);
    context.lineTo((i + 1) * 30, j * 30 + 15);

context.stroke();
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

简易五子棋游戏



代码描述：js实现五子棋游戏

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

小辉

相关代码

--益智五子棋--

简易五子棋游戏

最新