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