Connect4/connect4.js at master · heyongz/Connect4 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
let board = document.getElementById("chessboard");
let row = 6;
let col = 7;
let chessboard = [];
let id = 0;
let current_player = OP;

init();

function init(){
    for(let i=0; i<row; ++i){
        chessboard[i] = [];
        for(let j=0; j<col; ++j){
            chessboard[i][j] = 0;
        }
    }
    preprocess();
    event_listener();
}

function preprocess(){
    id = 0;
    current_player = OP;
    board.innerHTML = "";
    for(let i=0; i<42; ++i){
        if(i % 2 === 0){
            board.innerHTML += '<div id="d'+i+'" class="chess '+"red"+'"></div>';
        }else{
            board.innerHTML += '<div id="d'+i+'" class="chess '+"yellow"+'"></div>';
        }
        document.getElementById('d'+i).hidden = true;
    }
}

function draw_chess(left, top){
    document.getElementById('d'+id).style.left = left;
    document.getElementById('d'+id).style.top = top;
    document.getElementById('d'+id).hidden = false;
}

function get_currentCol(evt){
    let currentCol = Math.floor((evt.clientX - board.offsetLeft)/60);
    if(currentCol<0){currentCol=0;}
    if(currentCol>6){currentCol=6;}
    return currentCol;
}


function event_listener(){
    document.onmousemove = function(evt){
        let currentCol = get_currentCol(evt);
        draw_chess((14 + 60 * currentCol) + "px", "-55px");
    };

    document.onclick = function(evt){
        if(current_player === OP){
            current_player = AI;
            let currentCol = get_currentCol(evt);
            draw_chess((14+60*currentCol)+"px", "-55px");

            for (let i = 0; i <row; ++i) {
                if (chessboard[i][currentCol] === 0) {
                    chessboard[i][currentCol] = OP;
                    document.getElementById('d'+id).style.transition = "0s";
                    draw_chess((14+60*currentCol)+"px", (14+60*(5-i))+"px");
                    if(is_win() || id === 42) {
                        terminate();
                        return;
                    }
                    id += 1;
                    min_max();
                    break;
                }
            }
            current_player = OP;
        }
    };
}

function terminate(){
    let msg = "";
    if(id % 2 !== 0) msg = "Computer Win!";
    else msg = "Player Win!";
    setTimeout("alert('" + msg + "');init()", 0);
}

function min_max(){
    let [i, j] = get_move(chessboard);
    chessboard[i][j] = AI;
    draw_chess((14+60*j)+"px", (14+60*(5-i))+"px");
    if(is_win() || id===42) {
        terminate();
        return;
    }
    id += 1;
}

function is_win() {
    for(let i=0; i<chessboard.length; ++i){
        for(let j=0; j<chessboard[0].length; ++j){
            if(chessboard[i][j] === 0) continue;
            if(j+3<chessboard[0].length &&
                chessboard[i][j] === chessboard[i][j+1] &&
                chessboard[i][j] === chessboard[i][j+2] &&
                chessboard[i][j] === chessboard[i][j+3]) return true;
            if(j-3>=0 &&
                chessboard[i][j] === chessboard[i][j-1] &&
                chessboard[i][j] === chessboard[i][j-2] &&
                chessboard[i][j] === chessboard[i][j-3]) return true;

            if(i+3<chessboard.length &&
                chessboard[i][j] === chessboard[i+1][j] &&
                chessboard[i][j] === chessboard[i+2][j] &&
                chessboard[i][j] === chessboard[i+3][j]) return true;

            if(i-3>=0 &&
                chessboard[i][j] === chessboard[i-1][j] &&
                chessboard[i][j] === chessboard[i-2][j] &&
                chessboard[i][j] === chessboard[i-3][j]) return true;

            if(i+3<chessboard.length && j-3>=0 &&
                chessboard[i][j] === chessboard[i+1][j-1] &&
                chessboard[i][j] === chessboard[i+2][j-2] &&
                chessboard[i][j] === chessboard[i+3][j-3]) return true;

            if(i-3>=0 && j+3<chessboard[0].length &&
                chessboard[i][j] === chessboard[i-1][j+1] &&
                chessboard[i][j] === chessboard[i-2][j+2] &&
                chessboard[i][j] === chessboard[i-3][j+3]) return true;

            if(i+3<chessboard.length && j+3<chessboard[0].length &&
                chessboard[i][j] === chessboard[i+1][j+1] &&
                chessboard[i][j] === chessboard[i+2][j+2] &&
                chessboard[i][j] === chessboard[i+3][j+3]) return true;

            if(i-3>=0 && j-3>=0 &&
                chessboard[i][j] === chessboard[i-1][j-1] &&
                chessboard[i][j] === chessboard[i-2][j-2] &&
                chessboard[i][j] === chessboard[i-3][j-3]) return true;
        }
    }
    return false;
}