/
connect4.js
193 lines (167 loc) · 5.53 KB
/
connect4.js
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
"use strict";
/** Connect Four
*
* Player 1 and 2 alternate turns. On each turn, a piece is dropped down a
* column until a player gets four-in-a-row (horiz, vert, or diag) or until
* board fills (tie)
*/
const WIDTH = 7;
const HEIGHT = 6;
let currPlayer = 1; // active player: 1 or 2
let board = []; // array of rows, each row is array of cells (board[y][x])
/** makeBoard: create in-JS board structure:
* board = array of rows, each row is array of cells (board[y][x])
*/
function makeBoard() {
// TODO: set "board" to empty HEIGHT x WIDTH matrix array
board = [
[null, null, null, null, null, null, null],
[null, null, null, null, null, null, null],
[null, null, null, null, null, null, null],
[null, null, null, null, null, null, null],
[null, null, null, null, null, null, null],
[null, null, null, null, null, null, null],
];
}
/** makeHtmlBoard: make HTML table and row of column tops. */
function makeHtmlBoard() {
// TODO: get "htmlBoard" variable from the item in HTML w/ID of "board"
let htmlBoard = document.getElementById("board");
// TODO: add comment for this code
// Creating a single cell for play area
let top = document.createElement("tr");
top.setAttribute("id", "column-top");
top.addEventListener("click", handleClick);
// TODO: add comment for this code
// for each column, add a cell to the play area
for (let x = 0; x < WIDTH; x++) {
let headCell = document.createElement("td");
headCell.setAttribute("id", x);
top.append(headCell);
}
htmlBoard.append(top);
// dynamically creates the main part of html board
// uses HEIGHT to create table rows
// uses WIDTH to create table cells for each row
for (let y = 0; y < HEIGHT; y++) {
// TODO: Create a table row element and assign to a "row" variable
let row = document.createElement("tr");
for (let x = 0; x < WIDTH; x++) {
// TODO: Create a table cell element and assign to a "cell" variable
let cell = document.createElement("td");
// TODO: add an id, y-x, to the above table cell element
cell.setAttribute("id", `${y}-${x}`);
// you'll use this later, so make sure you use y-x
// TODO: append the table cell to the table row
row.append(cell);
}
// TODO: append the row to the html board
htmlBoard.append(row);
}
}
/** findSpotForCol: given column x, return top empty y (null if filled) */
function findSpotForCol(x) {
// TODO: write the real version of this, rather than always returning 0
for (let y = 5; y > -1; y--) {
if (board[y][x] === null) {
return y;
}
}
return null;
}
/** placeInTable: update DOM to place piece into HTML table of board */
function placeInTable(y, x) {
// TODO: make a div and insert into correct table cell
let piece = document.createElement("div");
piece.classList.add("piece");
piece.classList.add(`p${currPlayer}`);
//piece.createAttribute("class", player); // need to revisit ******************************** `${p1}${p2}`
let cell = document.getElementById(`${y}-${x}`);
cell.append(piece);
}
/** endGame: announce game end */
function endGame(msg) {
// TODO: pop up alert message
alert(msg);
}
/** handleClick: handle click of column top to play piece */
function handleClick(evt) {
// get x from ID of clicked cell
let x = +evt.target.id;
// get next spot in column (if none, ignore click)
let y = findSpotForCol(x);
if (y === null) {
return;
}
// place piece in board and add to HTML table
// TODO: add line to update in-memory board
board[y][x] = currPlayer;
placeInTable(y, x);
// check for win
if (checkForWin()) {
return endGame(`Player ${currPlayer} won!`);
}
// check for tie
// TODO: check if all cells in board are filled; if so call, call endGame
if (board[0].every(val => val !== null)) {
endGame('Tie Game');
}
// switch players
// TODO: switch currPlayer 1 <-> 2
currPlayer = currPlayer === 1 ? 2 : 1;
}
/** checkForWin: check board cell-by-cell for "does a win start here?" */
function checkForWin() {
/** _win:
* takes input array of 4 cell coordinates [ [y, x], [y, x], [y, x], [y, x] ]
* returns true if all are legal coordinates for a cell & all cells match
* currPlayer
*/
function _win(cells) {
// TODO: Check four cells to see if they're all legal & all color of current
return cells.every(
([y,x]) => y >= 0 && y < 6 &&
x >= 0 && x < 7 && board[y][x] === currPlayer);
}
// using HEIGHT and WIDTH, generate "check list" of coordinates
// for 4 cells (starting here) for each of the different
// ways to win: horizontal, vertical, diagonalDR, diagonalDL
for (var y = 0; y < HEIGHT; y++) {
for (var x = 0; x < WIDTH; x++) {
// TODO: assign values to the below variables for each of the ways to win
// horizontal has been assigned for you
// each should be an array of 4 cell coordinates:
// [ [y, x], [y, x], [y, x], [y, x] ]
let horiz = [
[y, x],
[y, x + 1],
[y, x + 2],
[y, x + 3],
];
let vert = [
[y, x],
[y + 1, x],
[y + 2, x],
[y + 3, x],
];
let diagDL = [
[y, x],
[y + 1, x - 1],
[y + 2, x - 2],
[y + 3, x - 3],
];
let diagDR = [
[y, x],
[y + 1, x + 1],
[y + 2, x + 2],
[y + 3, x + 3],
];
// find winner (only checking each win-possibility as needed)
if (_win(horiz) || _win(vert) || _win(diagDR) || _win(diagDL)) {
return true;
}
}
}
}
makeBoard();
makeHtmlBoard();