73 lines
2.2 KiB
HTML
73 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Lights Out</title>
|
|
<style>
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 50px);
|
|
gap: 5px;
|
|
margin: 20px;
|
|
}
|
|
.light {
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: #ddd;
|
|
border: 1px solid #999;
|
|
cursor: pointer;
|
|
}
|
|
.light.on {
|
|
background-color: yellow;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Lights Out</h1>
|
|
<div class="grid-container" id="game-grid"></div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const gridSize = 5;
|
|
const gameGrid = document.getElementById('game-grid');
|
|
|
|
// Créer la grille de lumières
|
|
for (let i = 0; i < gridSize * gridSize; i++) {
|
|
const light = document.createElement('div');
|
|
light.classList.add('light');
|
|
light.dataset.id = i;
|
|
gameGrid.appendChild(light);
|
|
}
|
|
|
|
const lights = document.querySelectorAll('.light');
|
|
|
|
gameGrid.addEventListener('click', event => {
|
|
const target = event.target;
|
|
if (!target.classList.contains('light')) return;
|
|
|
|
const id = parseInt(target.dataset.id);
|
|
const row = Math.floor(id / gridSize);
|
|
const col = id % gridSize;
|
|
|
|
// Fonction pour basculer une lumière
|
|
const toggleLight = (index) => {
|
|
if (index >= 0 && index < lights.length) {
|
|
lights[index].classList.toggle('on');
|
|
}
|
|
};
|
|
|
|
// Basculer la lumière cliquée
|
|
toggleLight(id);
|
|
|
|
// Basculer les voisins
|
|
if (col > 0) toggleLight(id - 1); // Gauche
|
|
if (col < gridSize - 1) toggleLight(id + 1); // Droite
|
|
if (row > 0) toggleLight(id - gridSize); // Haut
|
|
if (row < gridSize - 1) toggleLight(id + gridSize); // Bas
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |