feat: add heavy weight spaceship

This commit is contained in:
log101 2024-05-01 10:28:22 +03:00
parent 4026c8093e
commit 3b3e5b9173
3 changed files with 39 additions and 20 deletions

View File

@ -3,7 +3,10 @@ import { Title } from '../components/header';
import '../styles/gol.css'; import '../styles/gol.css';
--- ---
<Title /> <div id="title-and-gol">
<div id="board" class="board"></div> <Title />
<div id="board" class="board"></div>
</div>
<button id="startButton">Start Game</button> <button id="startButton">Start Game</button>
<script src="../scripts/gol.js"></script> <script src="../scripts/gol.js"></script>

View File

@ -1,21 +1,31 @@
const boardElement = document.getElementById('board'); const boardElement = document.getElementById('board');
const boardSize = 20; const boardSize = 10;
const grid = []; const grid = [];
let intervalId; let intervalId;
const cells = ['30', '20', '51', '01', '62', '63', '03', '64', '54', '44', '34', '24', '14']
const heavyWeightSpaceshipCell = (x, y) => {
const coor = `${x}${y}`
return cells.includes(coor)
}
function initializeBoard() { function initializeBoard() {
for (let y = 0; y < boardSize; y++) { for (let y = 0; y < boardSize; y++) {
let row = []; let row = [];
for (let x = 0; x < boardSize; x++) { for (let x = 0; x < boardSize; x++) {
let cell = document.createElement('div'); let cell = document.createElement('div');
cell.classList.add('cell'); cell.classList.add('cell');
cell.addEventListener('click', () => { if (heavyWeightSpaceshipCell(x, y)) {
cell.classList.toggle('alive'); cell.classList.add('alive');
grid[y][x] = grid[y][x] ? 0 : 1; boardElement.appendChild(cell);
}); row.push(1)
} else {
boardElement.appendChild(cell); boardElement.appendChild(cell);
row.push(0); row.push(0);
} }
}
grid.push(row); grid.push(row);
} }
} }
@ -40,7 +50,7 @@ function computeNextGeneration() {
cellElement.animate([ cellElement.animate([
{ backgroundColor: change.state ? 'black' : 'white' } { backgroundColor: change.state ? 'black' : 'white' }
], { ], {
duration: 300, duration: 50,
fill: 'forwards' fill: 'forwards'
}); });
}); });
@ -51,20 +61,19 @@ function countAliveNeighbors(y, x) {
for (let yOffset = -1; yOffset <= 1; yOffset++) { for (let yOffset = -1; yOffset <= 1; yOffset++) {
for (let xOffset = -1; xOffset <= 1; xOffset++) { for (let xOffset = -1; xOffset <= 1; xOffset++) {
if (yOffset === 0 && xOffset === 0) continue; if (yOffset === 0 && xOffset === 0) continue;
let newY = y + yOffset; // Wrap around the edges
let newX = x + xOffset; let newY = (y + yOffset + boardSize) % boardSize;
if (newY >= 0 && newY < boardSize && newX >= 0 && newX < boardSize) { let newX = (x + xOffset + boardSize) % boardSize;
count += grid[newY][newX]; count += grid[newY][newX];
} }
} }
}
return count; return count;
} }
function startGame() { function startGame() {
console.log('starting') console.log('starting')
if (intervalId) clearInterval(intervalId); if (intervalId) clearInterval(intervalId);
intervalId = setInterval(computeNextGeneration, 100); intervalId = setInterval(computeNextGeneration, 500);
} }
const startButton = document.getElementById('startButton') const startButton = document.getElementById('startButton')

View File

@ -1,13 +1,20 @@
.board { .board {
display: grid; display: grid;
grid-template-columns: repeat(20, 20px); grid-template-columns: repeat(10, 5px);
grid-gap: 1px; row-gap: 1px;
column-gap: 1px;
} }
.cell { .cell {
width: 20px; width: 5px;
height: 20px; height: 5px;
background-color: white; background-color: white;
} }
.alive { .alive {
background-color: black; background-color: black;
} }
#title-and-gol {
display: flex;
flex-direction: row;
align-items: center;
}