task1 - игра в пятнашки
This commit is contained in:
Anton Dzyk
commit
e134c10a2f
|
|
@ -0,0 +1,55 @@
|
||||||
|
# app.py
|
||||||
|
from flask import Flask, render_template, request, jsonify
|
||||||
|
import random
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
|
||||||
|
def create_puzzle():
|
||||||
|
"""Создаёт случайную, но решаемую расстановку плиток."""
|
||||||
|
puzzle = list(range(1, 16)) + [0] # 0 — пустая ячейка
|
||||||
|
while True:
|
||||||
|
random.shuffle(puzzle)
|
||||||
|
if is_solvable(puzzle):
|
||||||
|
break
|
||||||
|
return puzzle
|
||||||
|
|
||||||
|
def is_solvable(puzzle):
|
||||||
|
"""Проверяет, можно ли решить пазл (на основе инверсий)."""
|
||||||
|
inversions = 0
|
||||||
|
flat = [n for n in puzzle if n != 0]
|
||||||
|
for i in range(len(flat)):
|
||||||
|
for j in range(i + 1, len(flat)):
|
||||||
|
if flat[i] > flat[j]:
|
||||||
|
inversions += 1
|
||||||
|
return inversions % 2 == 0
|
||||||
|
|
||||||
|
def find_empty(puzzle):
|
||||||
|
"""Находит индекс пустой ячейки (0)."""
|
||||||
|
return puzzle.index(0)
|
||||||
|
|
||||||
|
@app.route('/')
|
||||||
|
def index():
|
||||||
|
puzzle = create_puzzle()
|
||||||
|
return render_template('index.html', puzzle=puzzle)
|
||||||
|
|
||||||
|
@app.route('/move', methods=['POST'])
|
||||||
|
def move():
|
||||||
|
puzzle = request.json['puzzle']
|
||||||
|
empty_idx = find_empty(puzzle)
|
||||||
|
move_idx = request.json['index']
|
||||||
|
|
||||||
|
# Проверяем, можно ли переместить (соседняя ячейка по вертикали или горизонтали)
|
||||||
|
row, col = move_idx // 4, move_idx % 4
|
||||||
|
empty_row, empty_col = empty_idx // 4, empty_idx % 4
|
||||||
|
|
||||||
|
if (abs(row - empty_row) + abs(col - empty_col) == 1): # Соседняя
|
||||||
|
puzzle[empty_idx], puzzle[move_idx] = puzzle[move_idx], puzzle[empty_idx]
|
||||||
|
|
||||||
|
# Проверка на победу
|
||||||
|
if puzzle[:-1] == list(range(1, 16)) and puzzle[-1] == 0:
|
||||||
|
return jsonify({'puzzle': puzzle, 'winner': True})
|
||||||
|
|
||||||
|
return jsonify({'puzzle': puzzle, 'winner': False})
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
app.run(debug=True)
|
||||||
|
|
@ -0,0 +1,70 @@
|
||||||
|
/* static/style.css */
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', sans-serif;
|
||||||
|
background: #f0f2f5;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 500px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
#puzzle {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
grid-gap: 8px;
|
||||||
|
margin: 20px auto;
|
||||||
|
width: 320px;
|
||||||
|
height: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #3498db;
|
||||||
|
color: white;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile:hover {
|
||||||
|
background: #2980b9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
background: #f0f2f5;
|
||||||
|
border: 2px dashed #ccc;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
background: #2ecc71;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: #27ae60;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
Loading…
Reference in New Issue