---
# System prepended metadata

title: Jeu de la vie

---

### TP jeu de la vie 

Plus d'infos : 
- https://fr.wikipedia.org/wiki/Jeu_de_la_vie
- https://www.youtube.com/watch?v=S-W0NX97DB0

Une cellule possède huit voisines, qui sont les cellules adjacentes horizontalement, verticalement et diagonalement.

À chaque itération, l'état d’une cellule est entièrement déterminée par l’état de ses huit cellules voisines, selon les règles suivantes :
- une cellule morte possédant exactement trois cellules voisines vivantes devient vivante (elle naît) ;
- une cellule vivante possédant deux ou trois cellules voisines vivantes le reste, sinon elle meurt
```html 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jeu de la Vie - 3A MMI</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <canvas id="gameCanvas"></canvas>
  <p>Générations : <span id="generationCount">0</span></p>  
  <button onclick="startGame()">Démarrer</button>
    <button onclick="stopGame()">Arrêter</button>
  <button onclick="resetGrid()">Réinitialiser</button>
    <script src="script.js"></script>
</body>
</html>
```

```css 
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f4f4f4;
}

canvas {
    border: 1px solid black;
}

button {
    margin-top: 10px;
}
```


```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const resolution = 20;
canvas.width = 500;
canvas.height = 500;
const cols = canvas.width / resolution;
const rows = canvas.height / resolution;


let grid = make2DArray(cols, rows);
let generation = 0;
let intervalId;

canvas.addEventListener('click', toggleCellState);

function startGame() {
    intervalId = setInterval(update, 100);
}

function stopGame() {
    clearInterval(intervalId);
}

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawGrid();
    updateGrid();
}


function make2DArray(cols, rows) {
     let arr = new Array(cols);
    for (let i = 0; i < arr.length; i++) {
        arr[i] = new Array(rows);
    }
    return arr;
}


//complétez
function drawGrid() {
    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            let x = ...  // complétez
            let y = ...  //  complétez
            if (grid[i][j] == 1) {
                ctx.fillStyle = "#000";
            }
            else 
                ctx.fillStyle = "#FFF";
          
            ctx.fillRect(x, y, resolution - 1, resolution - 1);
        }
    }
}

//complétez
function updateGrid() {
    let nextGrid = make2DArray(cols, rows);

    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            // instructions ..
          
        }
    }
  
    generation++;
    document.getElementById('generationCount').textContent = generation;

    grid = nextGrid;
}

function resetGrid() {
    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            grid[i][j] = 0;
        }
    }
  drawGrid();
  stopGame();
  generation = 0;
  document.getElementById('generationCount').textContent = generation;
}

function toggleCellState(event) {
    const x = Math.floor(event.offsetX / resolution);
    const y = Math.floor(event.offsetY / resolution);
    
    grid[x][y] = grid[x][y] === 1 ? 0 : 1;

    drawGrid();
}


//complétez
function countNeighbors(grid, x, y) {
  // ...
}
```
