99 lines
3.7 KiB
HTML
99 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Ant Survival AI</title>
|
|
<style>
|
|
body { margin: 0; background-color: #222; color: #eee; font-family: monospace; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }
|
|
#gameInfo { margin-bottom: 10px; text-align: center; }
|
|
canvas { border: 2px solid #555; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="gameInfo">
|
|
<h1>Ant Survival DQN</h1>
|
|
<div>Stato: <span id="status">Connessione...</span></div>
|
|
<div>Steps: <span id="steps">0</span> | Reward: <span id="reward">0</span></div>
|
|
</div>
|
|
|
|
<canvas id="gridCanvas" width="600" height="600"></canvas>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('gridCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const statusEl = document.getElementById('status');
|
|
const stepsEl = document.getElementById('steps');
|
|
const rewardEl = document.getElementById('reward');
|
|
|
|
const TILE_SIZE = 40; // Dimensione in pixel di ogni cella
|
|
|
|
function drawWorld(data) {
|
|
const gridSize = data.grid_size;
|
|
canvas.width = gridSize * TILE_SIZE;
|
|
canvas.height = gridSize * TILE_SIZE;
|
|
|
|
// Disegna Sfondo
|
|
ctx.fillStyle = "#333";
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Disegna Griglia
|
|
ctx.strokeStyle = "#444";
|
|
for(let i=0; i<=gridSize; i++) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(i*TILE_SIZE, 0); ctx.lineTo(i*TILE_SIZE, canvas.height);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, i*TILE_SIZE); ctx.lineTo(canvas.width, i*TILE_SIZE);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Disegna Oggetti
|
|
// data.ant = [x, y], data.food = [x, y], data.walls = [[x,y], ...]
|
|
|
|
// CIBO (Mela Verde)
|
|
ctx.fillStyle = "#4caf50";
|
|
ctx.beginPath();
|
|
ctx.arc(data.food[0] * TILE_SIZE + TILE_SIZE/2, data.food[1] * TILE_SIZE + TILE_SIZE/2, TILE_SIZE/3, 0, Math.PI*2);
|
|
ctx.fill();
|
|
|
|
// FORMICA (Pallino Rosso o Sprite)
|
|
ctx.fillStyle = "#ff5722";
|
|
ctx.beginPath();
|
|
ctx.arc(data.ant[0] * TILE_SIZE + TILE_SIZE/2, data.ant[1] * TILE_SIZE + TILE_SIZE/2, TILE_SIZE/3, 0, Math.PI*2);
|
|
ctx.fill();
|
|
// Occhi della formica
|
|
ctx.fillStyle = "#fff";
|
|
ctx.beginPath();
|
|
ctx.arc(data.ant[0] * TILE_SIZE + TILE_SIZE/2 - 5, data.ant[1] * TILE_SIZE + TILE_SIZE/2 - 5, 3, 0, Math.PI*2);
|
|
ctx.arc(data.ant[0] * TILE_SIZE + TILE_SIZE/2 + 5, data.ant[1] * TILE_SIZE + TILE_SIZE/2 - 5, 3, 0, Math.PI*2);
|
|
ctx.fill();
|
|
|
|
// MURI (Blocchi Grigi)
|
|
ctx.fillStyle = "#777";
|
|
if (data.walls) {
|
|
data.walls.forEach(w => {
|
|
ctx.fillRect(w[0] * TILE_SIZE, w[1] * TILE_SIZE, TILE_SIZE, TILE_SIZE);
|
|
});
|
|
}
|
|
}
|
|
|
|
async function update() {
|
|
try {
|
|
const response = await fetch('ant_state.json?t=' + new Date().getTime());
|
|
if (!response.ok) throw new Error("File missing");
|
|
const data = await response.json();
|
|
|
|
statusEl.innerText = "Running";
|
|
stepsEl.innerText = data.steps;
|
|
|
|
drawWorld(data);
|
|
} catch (e) {
|
|
// console.log(e);
|
|
}
|
|
}
|
|
|
|
setInterval(update, 100); // 10 FPS
|
|
</script>
|
|
</body>
|
|
</html> |