Spaces:
Running
Running
File size: 3,721 Bytes
0b63f64 120291b a3134cc 120291b 0b63f64 120291b 4728941 120291b 4728941 a3134cc 120291b 4728941 120291b 0b63f64 120291b 0b63f64 120291b 0b63f64 120291b 4728941 120291b 4728941 120291b 4728941 120291b 4728941 120291b 4728941 120291b a3134cc 120291b 4728941 120291b 4728941 120291b 4728941 120291b 4728941 120291b 4728941 120291b 0b63f64 4728941 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>📝 Learning about Area & Perimeter 📐</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="game-container">
<h1>📝 Area & Perimeter Adventure 📐</h1>
<div class="controls">
<button id="add-mode" class="mode-active">✏️ Add Squares</button>
<button id="erase-mode">🧽 Erase Squares</button>
<button id="reset-grid">🔄 Reset</button>
</div>
<div class="main-layout">
<div class="definitions">
<h2>What’s Area?</h2>
<p>Area is the number of squares inside a shape. Count all the filled tiles!</p>
<h2>What’s Perimeter?</h2>
<p>Perimeter is the number of edges touching the outside. Like tracing the shape’s border!</p>
</div>
<div class="grid-wrapper">
<div class="grid" id="grid"></div>
</div>
<div class="stats">
<div class="stat-box">
<div>Area:</div>
<div class="stat-value"><span id="area">0</span> 🟩</div>
</div>
<div class="stat-box">
<div>Perimeter:</div>
<div class="stat-value"><span id="perimeter">0</span> 📏</div>
</div>
</div>
</div>
</div>
<script>
const gridSize = 15;
const grid = document.getElementById('grid');
const areaDisplay = document.getElementById('area');
const perimeterDisplay = document.getElementById('perimeter');
const addModeBtn = document.getElementById('add-mode');
const eraseModeBtn = document.getElementById('erase-mode');
const resetBtn = document.getElementById('reset-grid');
let mode = 'add';
let filledCells = new Set();
function initGrid() {
grid.innerHTML = '';
for (let i = 0; i < gridSize * gridSize; i++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.index = i;
cell.addEventListener('click', handleCellClick);
grid.appendChild(cell);
}
}
function handleCellClick(e) {
const index = e.target.dataset.index;
if (mode === 'add' && !filledCells.has(index)) {
e.target.classList.add('filled');
filledCells.add(index);
} else if (mode === 'erase' && filledCells.has(index)) {
e.target.classList.remove('filled');
filledCells.delete(index);
}
updateStats();
}
function updateStats() {
const area = filledCells.size;
let perimeter = 0;
filledCells.forEach(index => {
const i = parseInt(index);
if (!filledCells.has((i - gridSize).toString())) perimeter++;
if (!filledCells.has((i + 1).toString()) || i % gridSize === gridSize - 1) perimeter++;
if (!filledCells.has((i + gridSize).toString())) perimeter++;
if (!filledCells.has((i - 1).toString()) || i % gridSize === 0) perimeter++;
});
areaDisplay.textContent = area;
perimeterDisplay.textContent = perimeter;
}
addModeBtn.addEventListener('click', () => {
mode = 'add';
addModeBtn.classList.add('mode-active');
eraseModeBtn.classList.remove('mode-active');
});
eraseModeBtn.addEventListener('click', () => {
mode = 'erase';
eraseModeBtn.classList.add('mode-active');
addModeBtn.classList.remove('mode-active');
});
resetBtn.addEventListener('click', () => {
filledCells.clear();
document.querySelectorAll('.cell').forEach(cell => {
cell.classList.remove('filled');
});
updateStats();
});
initGrid();
</script>
</body>
</html>
|