### 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) {
// ...
}
```
Sign in with Wallet
Connect another wallet