137 lines
5.6 KiB
HTML
137 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Jeu des renards</title>
|
|
<style>
|
|
body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; }
|
|
.grid-container {
|
|
display: grid;
|
|
border: 2px solid #333;
|
|
background-color: #555;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
|
}
|
|
.cell {
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: #777;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
color: white;
|
|
}
|
|
.cell:hover { background-color: #999; }
|
|
.cell.shot { background-color: #333; cursor: not-allowed; }
|
|
.cell.won { background-color: green; }
|
|
#info-panel { margin-top: 20px; text-align: center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Jeu des renards</h1>
|
|
<div id="grid-container" class="grid-container"></div>
|
|
<div id="info-panel">
|
|
<p id="foxes-info">Renards restants : ?</p>
|
|
<p id="tries-info">Coups joués : 0</p>
|
|
<button id="reset-btn">Nouvelle partie</button>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const serverUrl = 'https://dwarves.iut-fbleau.fr/foxes/foxes.php';
|
|
const gridContainer = document.getElementById('grid-container');
|
|
const foxesInfo = document.getElementById('foxes-info');
|
|
const triesInfo = document.getElementById('tries-info');
|
|
const resetBtn = document.getElementById('reset-btn');
|
|
|
|
let gridSize = 10;
|
|
let initialFoxes = 10;
|
|
let currentFoxes = initialFoxes;
|
|
let tries = 0;
|
|
let gameOver = false;
|
|
|
|
const updateInfo = (foxes, newTries) => {
|
|
currentFoxes = foxes;
|
|
tries = newTries;
|
|
foxesInfo.textContent = `Renards restants : ${currentFoxes}`;
|
|
triesInfo.textContent = `Coups joués : ${tries}`;
|
|
};
|
|
|
|
const resetGame = async () => {
|
|
gameOver = false;
|
|
gridContainer.innerHTML = '';
|
|
const url = `${serverUrl}?new&size=${gridSize}&foxes=${initialFoxes}`;
|
|
try {
|
|
const response = await fetch(url, { credentials: 'omit' }); // 'omit' pour ignorer les cookies
|
|
const data = await response.json();
|
|
if (data.status === 'ok') {
|
|
gridContainer.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
|
|
for (let i = 0; i < gridSize * gridSize; i++) {
|
|
const cell = document.createElement('div');
|
|
cell.classList.add('cell');
|
|
cell.dataset.x = i % gridSize;
|
|
cell.dataset.y = Math.floor(i / gridSize);
|
|
cell.addEventListener('click', handleShot);
|
|
gridContainer.appendChild(cell);
|
|
}
|
|
updateInfo(data.foxes, data.tries);
|
|
} else {
|
|
alert('Erreur lors de la réinitialisation du jeu.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur:', error);
|
|
alert('Erreur de connexion au serveur.');
|
|
}
|
|
};
|
|
|
|
const handleShot = async (event) => {
|
|
if (gameOver || event.target.classList.contains('shot')) {
|
|
return;
|
|
}
|
|
|
|
const x = event.target.dataset.x;
|
|
const y = event.target.dataset.y;
|
|
const url = `${serverUrl}?X=${x}&Y=${y}`;
|
|
|
|
try {
|
|
const response = await fetch(url, { credentials: 'omit' });
|
|
const data = await response.json();
|
|
|
|
if (data.status === 'ok') {
|
|
event.target.classList.add('shot');
|
|
if (data.foxes === -1) {
|
|
event.target.textContent = 'X';
|
|
updateInfo(currentFoxes - 1, data.tries);
|
|
} else {
|
|
event.target.textContent = data.foxes;
|
|
updateInfo(currentFoxes, data.tries);
|
|
}
|
|
} else if (data.status === 'win') {
|
|
gameOver = true;
|
|
updateInfo(0, data.tries);
|
|
event.target.classList.add('won');
|
|
event.target.textContent = 'X';
|
|
setTimeout(() => alert(`Félicitations ! Vous avez gagné en ${data.tries} coups.`), 100);
|
|
} else if (data.status === 'nok') {
|
|
console.error('Erreur du serveur:', data.message);
|
|
}
|
|
|
|
// Check for win condition client-side (if currentFoxes reaches 0)
|
|
if (currentFoxes === 0 && !gameOver) {
|
|
gameOver = true;
|
|
setTimeout(() => alert(`Félicitations ! Vous avez gagné !`), 100);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Erreur:', error);
|
|
}
|
|
};
|
|
|
|
resetBtn.addEventListener('click', resetGame);
|
|
resetGame();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |