Skip to content

Commit 3e8d3fd

Browse files
jrobbinsjrobbins
authored
Create connect-four.html
1 parent 7459924 commit 3e8d3fd

File tree

1 file changed

+134
-0
lines changed

1 file changed

+134
-0
lines changed

‎connect-four.html

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<head>
2+
<style>
3+
td { width: 30px; height: 30px; background: #eee;}
4+
table button { background: lightblue; width: 30px; height: 30px; }
5+
6+
div {width: 30px; height: 30px; border-radius: 50%;}
7+
.red { background: red;}
8+
.black { background: black; }
9+
</style>
10+
<body>
11+
12+
<p id="msg">Red: It is your turn</p>
13+
14+
<table>
15+
<tr>
16+
<th><button data-col=0></button>
17+
<th><button data-col=1></button>
18+
<th><button data-col=2></button>
19+
<th><button data-col=3></button>
20+
<th><button data-col=4></button>
21+
<tbody id="board">
22+
<tr> <td><div></div> <td><div></div> <td><div></div> <td><div></div> <td><div></div>
23+
<tr> <td><div></div> <td><div></div> <td><div></div> <td><div></div> <td><div></div>
24+
<tr> <td><div></div> <td><div></div> <td><div></div> <td><div></div> <td><div></div>
25+
<tr> <td><div></div> <td><div></div> <td><div></div> <td><div></div> <td><div></div>
26+
<tr><td><div></div> <td><div></div> <td><div></div> <td><div></div> <td><div></div>
27+
</table>
28+
29+
<p id="msg">To place a piece, click one of the buttons at the top of the board.</p>
30+
31+
<button id="start_over">Start over</button>
32+
33+
34+
<script>
35+
let currentPlayer = 'red';
36+
let msg = document.getElementById('msg');
37+
let board = [
38+
['', '', '', '', ''],
39+
['', '', '', '', ''],
40+
['', '', '', '', ''],
41+
['', '', '', '', ''],
42+
['', '', '', '', ''],
43+
];
44+
let falling = false;
45+
46+
function switchPlayer() {
47+
currentPlayer = (currentPlayer == 'red') ? 'black' : 'red';
48+
msg.innerText = currentPlayer + ': It is your turn';
49+
}
50+
51+
function render() {
52+
let tbody = document.querySelector('#board');
53+
for (let row=0; row<5; row++)
54+
for (let col=0; col<5; col++)
55+
tbody.children[row].children[col].children[0].className = board[row][col];
56+
}
57+
58+
function addPiece(col, color) {
59+
if (board[0][col]) return 'Blocked';
60+
board[0][col] = color;
61+
render();
62+
falling = true;
63+
}
64+
65+
document.querySelectorAll('table button').forEach(b => b.addEventListener('click', (e) => {
66+
let col = e.target.dataset['col'];
67+
addPiece(col, currentPlayer);
68+
switchPlayer();
69+
}));
70+
71+
72+
73+
function gravity() {
74+
falling = false;
75+
for (let row=4; row>=1; row--)
76+
for (let col=4; col>=0; col--) {
77+
if (board[row][col] == '' &&
78+
board[row-1][col] != '') {
79+
board[row][col] = board[row-1][col];
80+
board[row-1][col] = '';
81+
falling = true;
82+
}
83+
}
84+
if (falling) render();
85+
}
86+
87+
function check4(r, c, dr, dc) {
88+
if (board[r][c] == '') return;
89+
let color = board[r][c];
90+
if (board[r + 1 * dr][c + 1 * dc] == color &&
91+
board[r + 2 * dr][c + 2 * dc] == color &&
92+
board[r + 3 * dr][c + 3 * dc] == color) {
93+
msg.innerText = color + ' has won!'
94+
}
95+
}
96+
97+
function checkWinner() {
98+
if (falling) return;
99+
for (let r=0; r<5; r++) {
100+
check4(r, 0, 0, 1);
101+
check4(r, 1, 0, 1);
102+
}
103+
for (let c=0; c<5; c++) {
104+
check4(0, c, 1, 0);
105+
check4(1, c, 1, 0);
106+
}
107+
for (let r=0; r<2; r++) {
108+
check4(r, 0, 1, 1);
109+
check4(r, 1, 1, 1);
110+
}
111+
for (let r=3; r<5; r++) {
112+
check4(r, 0, -1, 1);
113+
check4(r, 1, -1, 1);
114+
}
115+
}
116+
117+
function gameloop() {
118+
gravity();
119+
checkWinner();
120+
}
121+
122+
setInterval(gameloop, 1000);
123+
124+
document.getElementById('start_over').addEventListener('click', (e) => {
125+
switchPlayer();
126+
for (let i = 0; i < 6; i++) {
127+
setTimeout(() => {
128+
board[4] = ['', '', '', '', ''];
129+
gravity(); render();},
130+
500 * i);
131+
}
132+
});
133+
</script>
134+
</body?

0 commit comments

Comments
 (0)