Skip to content

Instantly share code, notes, and snippets.

@tlovett1

tlovett1/connect-four.html

Created October 7, 2022 02:12
Show Gist options
  • Save tlovett1/226da707395b87b41eba229ee793b634 to your computer and use it in GitHub Desktop.
Save tlovett1/226da707395b87b41eba229ee793b634 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
connect-four.html
<html>
<head>
<style>
.game {
width: 600px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
position: relative;
}
@keyframes blink {
from {
opacity: 1.0;
}
50% {
opacity: 0.8;
}
to {
opacity: 1.0;
}
}
.game.over:before {
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background-color: #fff;
display: block;
content: " ";
animation: blink 1s infinite;
}
.game .col {
border-left: 1px solid #000;
}
.game .col:last-child {
border-right: 1px solid #000;
}
.game .cell {
border-top: 1px solid #000;
width: 85px;
height: 85px;
padding: 10px;
box-sizing: border-box;
}
.game .cell:last-child {
border-bottom: 1px solid #000;
}
.game .p1:before,
.game .p2:before {
display: block;
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
background: url("ziggy.jpg") no-repeat center center;
background-size: contain;
}
.game .p2:before {
background: url("remy.jpg") no-repeat center center;
background-size: contain;
}
</style>
</head>
<body>
<div class="game">
<div data-column="0" class="col">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div data-column="1" class="col">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div data-column="2" class="col">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div data-column="3" class="col">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div data-column="4" class="col">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div data-column="5" class="col">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div data-column="6" class="col">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
<script>
const size = 7;
const columns = document.querySelectorAll('.game > div');
const nextAvailablePosition = {
0: 0,
1: 0,
2: 0,
3: 0,
4: 0,
5: 0,
6: 0,
}
let turn = 'p1';
let consecutive = 1;
function endGame() {
document.querySelector('.game').classList.add('over');
}
function maybeWinner() {
for (let x = 0; x < size; x++) { // Column
for (let y = 0; y < size; y++) { // Row
const cell = document.querySelector('.game .col[data-column="' + x + '"] .cell:nth-child(' + (y + 1) + ')');
if (!cell || (!cell.classList.contains('p1') && !cell.classList.contains('p2'))) {
continue;
}
const holder = cell.classList.contains('p1') ? 'p1' : 'p2';
// Vertical check
consecutive = 1;
for (let h = y + 1; h < y + 4; h++) {
const checkCell = document.querySelector('.game .col[data-column="' + x + '"] .cell:nth-child(' + (h + 1) + ')');
if (checkCell && checkCell.classList.contains(holder)) {
consecutive++;
}
}
if (consecutive === 4) {
endGame();
return;
}
// Horizontal check
consecutive = 1;
for (let v = x + 1; v < x + 4; v++) {
const checkCell = document.querySelector('.game .col[data-column="' + v + '"] .cell:nth-child(' + (y + 1) + ')');
if (checkCell && checkCell.classList.contains(holder)) {
consecutive++;
}
}
if (consecutive === 4) {
endGame();
return;
}
// Diagonal right check
consecutive = 1;
for (let d = 1; d < 4; d++) {
const checkCell = document.querySelector('.game .col[data-column="' + (x + d) + '"] .cell:nth-child(' + (y + d + 1) + ')');
if (checkCell && checkCell.classList.contains(holder)) {
consecutive++;
}
}
if (consecutive === 4) {
endGame();
return;
}
// Diagonal left check
consecutive = 1;
for (let d = 1; d < 4; d++) {
const checkCell = document.querySelector('.game .col[data-column="' + (x - d) + '"] .cell:nth-child(' + (y + d + 1) + ')');
if (checkCell && checkCell.classList.contains(holder)) {
consecutive++;
}
}
if (consecutive === 4) {
endGame();
return;
}
}
}
}
function doTurn(column) {
if (nextAvailablePosition > size) {
return;
}
const cell = document.querySelector('.game .col[data-column="' + column + '"] .cell:nth-child(' + (size - nextAvailablePosition[column]) + ')');
cell.classList.add(turn);
if (turn === 'p1') {
turn = 'p2';
} else {
turn = 'p1';
}
nextAvailablePosition[column] = nextAvailablePosition[column] + 1;
maybeWinner();
}
columns.forEach((col) => {
col.addEventListener('click', (event) => {
const colPosition = parseInt(event.currentTarget.getAttribute('data-column'));
doTurn(colPosition);
});
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment