task1 - игра в пятнашки

2025-12-21 20:41:57 +03:00
commit e134c10a2f
3 changed files with 194 additions and 0 deletions
@@ -0,0 +1,69 @@
+<!-- templates/index.html -->
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8" />
+  <title>Игра в Пятнашки</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
+</head>
+<body>
+  <div class="container">
+    <h1>🎮 Игра в Пятнашки</h1>
+    <p>Нажимайте на плитки рядом с пустым местом, чтобы переместить их.</p>
+
+    <div id="puzzle"></div>
+
+    <button id="restart">🔄 Начать заново</button>
+    <p id="message" style="color: green; font-weight: bold;"></p>
+  </div>
+
+  <script>
+    let puzzle = {{ puzzle|tojson }};
+
+    function render() {
+      const board = document.getElementById('puzzle');
+      board.innerHTML = '';
+      puzzle.forEach((num, i) => {
+        const tile = document.createElement('div');
+        tile.className = 'tile';
+        if (num === 0) {
+          tile.classList.add('empty');
+        } else {
+          tile.textContent = num;
+          tile.onclick = () => move(i);
+        }
+        board.appendChild(tile);
+      });
+    }
+
+    async function move(index) {
+      const response = await fetch('/move', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ puzzle, index })
+      });
+      const data = await response.json();
+      puzzle = data.puzzle;
+      render();
+      if (data.winner) {
+        document.getElementById('message').textContent = '🎉 Поздравляем Вы собрали пазл!';
+      }
+    }
+
+    document.getElementById('restart').onclick = async () => {
+      const response = await fetch('/');
+      const html = await response.text();
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(html, 'text/html');
+      puzzle = Array.from(doc.body.querySelector('#puzzle').children)
+        .map(el => el.textContent.trim() || '0')
+        .map(x => x === '0' ? 0 : parseInt(x));
+      render();
+      document.getElementById('message').textContent = '';
+    };
+
+    render();
+  </script>
+</body>
+</html>
+