taizhimin
/
mgl_game


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
    <style type="text/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: #FFFFFF;
            background-color: #EE82EE;
            border-radius: 5px;
            cursor: pointer;
        }
        div.unable span {
            background: #D6D6D4;
            color: #ADACAA;
        }
        #result-wrap {
            text-align: center;
        }
    </style>


</head>
<body>
<h3 id="result-wrap">--益智五子棋--</h3>
<canvas id="chess" width="450px" height="450px"></canvas>
<div id="btn-wrap">
    <div id="restart" class="restart">
        <span>重新开始</span>
    </div>
    <div id="goback" class="goback unable">
        <span>悔棋</span>
    </div>
    <div id="return" class="return unable">
        <span>撤销悔棋</span>
    </div>
</div>
<script type="text/javascript">
    var over = false;
    var me = true;	//我
    var _nowi = 0, _nowj = 0; //记录自己下棋的坐标
    var _compi = 0, _compj = 0; //记录计算机当前下棋的坐标
    var _myWin = [], _compWin = []; //记录我，计算机赢的情况
    var backAble = false, returnAble = false;
    var resultTxt = document.getElementById("result-wrap");
    var chressBord = []; //棋盘
    for (var i = 0; i < 15; i++) {
        chressBord[i] = [];
        for (var j = 0; j < 15; j++) {
            chressBord[i][j] = 0;
        }
    }
    //赢法的统计数组
    var myWin = [];
    var computerWin = [];
    //赢法数组
    var wins = [];
    for (var i = 0; i < 15; i++) {
        wins[i] = [];
        for (var j = 0; j < 15; j++) {
            wins[i][j] = [];
        }
    }
    var count = 0; //赢法总数
    //横线赢法
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j <11; j++) {
            for (var k = 0; k < 5; k++) {
                wins[i][j+k][count] = true;
            }
            count++;
        }
    }
    //竖线赢法
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j <11; j++) {
            for (var k = 0; k < 5; k++) {
                wins[j+k][i][count] = true;
            }
            count++;
        }
    }
    //正斜线赢法
    for (var i = 0; i < 11; i++) {
        for (var j = 0; j <11; j++) {
            for (var k = 0; k < 5; k++) {
                wins[i+k][j+k][count] = true;
            }
            count++;
        }
    }
    //反斜线赢法
    for (var i = 0; i < 11; i++) {
        for (var j = 14; j > 3; j--) {
            for (var k = 0; k < 5; k++) {
                wins[i+k][j-k][count] = true;
            }
            count++;
        }
    }
    // debugger;
    for (var i = 0; i < count; i++) {
        myWin[i] = 0;
        _myWin[i] = 0;
        computerWin[i] = 0;
        _compWin[i] = 0;
    }
    var chess = document.getElementById("chess");
    var context = chess.getContext('2d');
    context.strokeStyle = '#bfbfbf';	//边框颜色
    var backbtn = document.getElementById("goback");
    var returnbtn = document.getElementById("return");
    window.onload = function() {
        drawChessBoard(); // 画棋盘
    }
    document.getElementById("restart").onclick = function(){
        window.location.reload();
    }
    // 我，下棋
    chess.onclick = function(e){
        if(over){
            return;
        }
        if(!me){
            return;
        }
        // 悔棋功能可用
        backbtn.className = backbtn.className.replace(new
        RegExp("(\\s|^)unable(\\s|$)")," ");
        var x = e.offsetX;
        var y = e.offsetY;
        var i = Math.floor(x / 30);
        var j = Math.floor(y / 30);
        _nowi = i;
        _nowj = j;
        if(chressBord[i][j] == 0){
            oneStep(i,j,me);
            chressBord[i][j] = 1; //我，已占位置

            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();
    }
</script>
</body>
</html>