DEV/BUT1/DEV1.2/TP5/script.js

226 lines
5.9 KiB
JavaScript
Raw Normal View History

2024-02-01 13:55:03 +01:00
// ---------------------------------------------------------------------
// ---------------------------------------------------------------------
/**
* Cette partie du code, vous n'avez pas besoin d'y toucher. Elle permet
* de gérer la grille et l'affichage des cellules
*/
let gridSize=prompt("Choisis la taille frero",15);
parseInt(gridSize,10);
class GridManager {
ACTIVE_COLOR = 'black';
INACTIVE_COLOR = 'grey';
gridContainerId;
gridSize;
grid = [];
constructor(gridSize, gridContainerId) {
if (!gridSize || gridSize < 30) {
throw new Error('The grid size must be at least 30');
}
if (!gridContainerId) {
throw new Error('gridContainerId must be set');
}
this.gridSize = gridSize;
this.gridContainerId = gridContainerId;
this.createGrid();
}
createGrid() {
const container = document.getElementById(this.gridContainerId);
for (let i = 0; i < this.gridSize; i++) {
const row = document.createElement('div');
row.className = 'row';
const gridRow = [];
for (let j = 0; j < this.gridSize; j++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.style.backgroundColor = this.INACTIVE_COLOR;
row.appendChild(cell);
gridRow.push(cell);
}
container.appendChild(row);
this.grid.push(gridRow);
}
}
destroyGrid() {
for (let x = 0; x < this.gridSize; x++) {
for (let y = 0; y < this.gridSize; y++) {
const node = this.grid[y][x];
node.parentNode.removeChild(node);
}
}
const container = document.getElementById(this.gridContainerId);
while (container.firstChild) {
container.removeChild(container.lastChild);
}
this.grid = [];
}
setInitialState(initialState) {
const coords = initialState.split(';').map(coord => coord.split(','));
coords.forEach((coord) => this.activeCell(+coord[0], +coord[1]));
}
isInGridRange(x, y) {
return x >= 0 && x < this.gridSize && y >= 0 && y < this.gridSize;
}
isActiveCell(x, y) {
return this.isInGridRange(x, y) && this.grid[y][x].style.backgroundColor === this.ACTIVE_COLOR;
}
activeCell(x, y) {
if (!this.isInGridRange(x, y)) {
return;
}
this.grid[y][x].style.backgroundColor = this.ACTIVE_COLOR;
}
deactiveCell(x, y) {
if (!this.isInGridRange(x, y)) {
return;
}
this.grid[y][x].style.backgroundColor = this.INACTIVE_COLOR;
}
getNumberActiveNeighbourCells(x, y) {
const neighbours = [
[x-1, y-1], [x, y-1], [x+1, y-1],
[x-1, y], [x+1, y],
[x-1, y+1], [x, y+1], [x+1, y+1],
];
return neighbours.map(cell => this.isActiveCell(cell[0], cell[1])).filter(cell => cell === true).length;
}
logCurrentGridState() {
const activeCells = [];
for (let x = 0; x < this.gridSize; x++) {
for (let y = 0; y < this.gridSize; y++) {
if (this.isActiveCell(x, y)) {
activeCells.push(`${x},${y}`);
}
}
}
console.log(activeCells.join(';'));
}
}
// ---------------------------------------------------------------------
// ---------------------------------------------------------------------
const INITIAL_STATE = '11,1;12,1;10,2;9,3;9,4;9,5;10,6;11,7;12,7;2,4;1,5;2,5;18,28;17,28;19,27;20,26;20,25;20,24;19,23;18,22;17,22;27,25;28,24;27,24;11,28;12,28;10,27;9,26;9,25;9,24;10,23;11,22;12,22;2,25;1,24;2,24;18,1;17,1;19,2;20,3;20,4;20,5;19,6;18,7;17,7;27,4;28,5;27,5';
const GENERATION_INTERVAL = 1000; // 1 seconde
const DIV_CONTAINER_ID = 'container';
const BTN_AUTOPLAY_ID = 'autoplay';
const BTN_NEXT_GEN_ID = 'next-gen';
const BTN_REST_ID = 'reset';
const GENERATION_VAL_ID = 'generation-value';
const GRID_SIZE_VAL_ID = 'grid-size-value';
function computeNextGeneration(gridManager, generation) {
// incrémenter la valeur de la génération et l'afficher à côté de 'Génération numéro:'
const nextGrid = [];
for (let x = 0; x < gridManager.gridSize; x++) {
const row = [];
for (let y = 0; y < gridManager.gridSize; y++) {
const isActive = gridManager.isActiveCell(x, y);
const numberActiveNeighbourCells = gridManager.getNumberActiveNeighbourCells(x, y);
if (!isActive) {
row.push(numberActiveNeighbourCells === 3 ? true : false);
} else {
row.push(numberActiveNeighbourCells === 2 || numberActiveNeighbourCells === 3 ? true : false);
}
}
nextGrid.push(row);
}
for (let x = 0; x < nextGrid.length; x++) {
for (let y = 0; y < nextGrid[x].length; y++) {
nextGrid[x][y] ? gridManager.activeCell(x,y) : gridManager.deactiveCell(x,y);
}
}
gridManager.logCurrentGridState();
return generation;
}
// Fonction principale du jeu
function main() {
let autoplayInterval;
let gridSize = 30;
let generation = 0;
let gridManager = new GridManager(gridSize, DIV_CONTAINER_ID);
gridManager.setInitialState(INITIAL_STATE);
// Lorsqu'un utilisateur clique sur 'Auto Play'
document.getElementById(BTN_AUTOPLAY_ID).addEventListener('click', () => {
if (autoplayInterval) {
return;
}
var timer;
var ele = document.getElementById('timer');
(function(){
var sec = 0;
timer = setInterval(()=>{
ele.innerHTML = " "+sec+"s";
sec ++;
},1000)
})()
autoplayInterval = setInterval(() => {
generation = computeNextGeneration(gridManager);
}, GENERATION_INTERVAL);
});
// Lorsqu'un utilisateur clique sur 'Prochaine Génération'
document.getElementById(BTN_NEXT_GEN_ID).addEventListener('click', () => {
if (autoplayInterval) {
clearInterval(autoplayInterval);
autoplayInterval = null;
}
computeNextGeneration(gridManager);
});
document.getElementById(BTN_REST_ID).addEventListener('click',() =>{
clearInterval(autoplayInterval);
gridManager.destroyGrid();
gridManager.createGrid();
gridManager.setInitialState(INITIAL_STATE);
})
}
// Le jeu est démarré ici
main();