Logo

lang.sudoku

Интегриране на игра "Судоку" в Laravel е сравнително лесно, защото Laravel е PHP фреймуърк, който се грижи за сървърната логика, а самата игра "Судоку" може да бъде реализирана със стандартни технологии като HTML, CSS и JavaScript. Това са стъпки по вграждане на играта в Laravel приложение:

1. Създаване на нов Laravel проект

Ако още не си създал проект, можеш да го направиш с помощта на командата:

composer create-project --prefer-dist laravel/laravel sudoku-app

Влез в директорията на проекта:

cd sudoku-app

2. Добавяне на нова страница за играта

Сега ще създадем контролер, който ще отговаря за показването на съдържанието на страницата със судоку.

Създаване на контролер

Можеш да създадеш нов контролер със следната команда:

php artisan make:controller SudokuController

Отвори контролера (app/Http/Controllers/SudokuController.php) и добави метод за показване на играта:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SudokuController extends Controller
{
    public function index()
    {
        return view('sudoku.index');
    }
}

3. Създаване на изглед за судоку играта

Сега трябва да създадем изглед, който ще показва самата игра. В Laravel изгледите се намират в папката resources/views.

Създай нов файл resources/views/sudoku/index.blade.php и добави следния код:

<!DOCTYPE html>
<html lang="bg">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Судоку</title>
    <link rel="stylesheet" href="{{ asset('css/styles.css') }}">
</head>
<body>
    <div id="sudoku-board"></div>
    <button onclick="checkSolution()">Проверка</button>

    <script src="{{ asset('js/sudoku.js') }}"></script>
</body>
</html>

4. Добавяне на JavaScript и CSS файлове

Сега ще добавим JavaScript и CSS файлове в проекта. Това ще направим чрез създаване на два нови файла в папката public.

CSS (public/css/styles.css)

Създай файл public/css/styles.css и добави стиловете за играта:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f7f7f7;
}

#sudoku-board {
    display: grid;
    grid-template-columns: repeat(9, 40px);
    grid-template-rows: repeat(9, 40px);
    gap: 5px;
    border: 2px solid #000;
    padding: 10px;
    background-color: white;
}

#sudoku-board input {
    width: 40px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    border: 1px solid #ccc;
    outline: none;
}

#sudoku-board input:focus {
    border-color: #00f;
}

JavaScript (public/js/sudoku.js)

Създай файл public/js/sudoku.js и добави JavaScript логиката за играта:

const boardSize = 9;

function generateBoard() {
    let board = Array(boardSize).fill(null).map(() => Array(boardSize).fill(null));

    // Example static puzzle (you can modify it to generate random puzzles)
    board[0][0] = 5;
    board[1][1] = 3;
    board[4][4] = 7;
    // Add more pre-filled numbers

    return board;
}

function renderBoard(board) {
    const boardElement = document.getElementById('sudoku-board');
    boardElement.innerHTML = '';

    for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
            const input = document.createElement('input');
            input.type = 'number';
            input.min = 1;
            input.max = 9;
            input.value = board[i][j] || '';
            input.disabled = board[i][j] !== null; // Disable pre-filled cells
            input.dataset.row = i;
            input.dataset.col = j;
            boardElement.appendChild(input);
        }
    }
}

function checkSolution() {
    const inputs = document.querySelectorAll('#sudoku-board input');
    let isCorrect = true;
    
    inputs.forEach(input => {
        const row = input.dataset.row;
        const col = input.dataset.col;
        const value = parseInt(input.value, 10);

        if (board[row][col] !== null && value !== board[row][col]) {
            isCorrect = false;
        }
    });

    if (isCorrect) {
        alert('Поздравления! Решихте пъзела!');
    } else {
        alert('Има грешки в решението!');
    }
}

const board = generateBoard();
renderBoard(board);

5. Маршрутизация

Сега трябва да добавим маршрут в routes/web.php, за да свържем контролера с URL.

Отвори файл routes/web.php и добави:

use App\Http\Controllers\SudokuController;

Route::get('/sudoku', [SudokuController::class, 'index']);

6. Стартиране на проекта

Ако всичко е настроено правилно, можеш да стартираш локален сървър с командата:

php artisan serve

Посети http://127.0.0.1:8000/sudoku в браузъра и би трябвало да видиш своята игра "Судоку".


7. Генериране на случайни судоку пъзели

Ако искаш да генерираш случайни пъзели за играчите, може да добавиш функция за генериране на случайни пъзели в JavaScript или PHP (на сървъра).

Примерен подход с PHP (генериране на случайно судоку):

Можеш да използваш библиотека за генериране на судоку пъзели на сървъра или да създадеш такава сама.

Примерен контролер с генериране на случайно судоку пъзел (използвай PHP библиотека като sudoku-generator или създай собствени функции):

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SudokuController extends Controller
{
    public function index()
    {
        // Генерираме случайно судоку пъзел
        $board = $this->generateRandomSudoku();
        return view('sudoku.index', compact('board'));
    }

    // Функция за генериране на случайно судоку
    private function generateRandomSudoku()
    {
        // Тук можеш да добавиш логиката за генериране на случайно судоку
        // Това може да бъде генериране на съдържание с помощта на библиотека или вътрешен алгоритъм
        $board = [
            [5, 3, null, null, 7, null, null, null, null],
            [6, null, null, 1, 9, 5, null, null, null],
            [null, 9, 8, null, null, null, null, 6, null],
            [8, null, null, null, 6, null, null, null, 3],
            [4, null, null, 8, null, 3, null, null, 1],
            [7, null, null, null, 2, null, null, null, 6],
            [null, 6, null, null, null, null, 2, 8, null],
            [null, null, null, 4, 1, 9, null, null, 5],
            [null, null, null, null, 8, null, null, 7, 9]
        ];

        return $board;
    }
}

В изгледа (resources/views/sudoku/index.blade.php), можеш да предадеш $board и да го рендираш динамично:

<!DOCTYPE html>
<html lang="bg">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Судоку</title>
    <link rel="stylesheet" href="{{ asset('css/styles.css') }}">
</head>
<body>
    <div id="sudoku-board"></div>
    <button onclick="checkSolution()">Проверка</button>
    <button onclick="generateNewBoard()">Ново пъзелче</button>

    <script src="{{ asset('js/sudoku.js') }}"></script>
    <script>
        const initialBoard = @json($board);  // Предаваш генерацията от сървъра
        renderBoard(initialBoard);

        function generateNewBoard() {
            // Тук можеш да направиш заявка към сървъра за ново случайно судоку
            window.location.reload(); // Примерно презареждаш страницата за ново пъзелче
        }
    </script>
</body>
</html>

8. Записване на резултати и постижения

Можеш да добавиш възможността за записване на резултатите на потребителите и след това да показваш постижения или статистика.

Стъпки за добавяне на резултати:

  1. Създай таблица в базата данни за резултати:

php artisan make:migration create_sudoku_results_table

След това отвори миграцията в database/migrations и добави следния код:

public function up()
{
    Schema::create('sudoku_results', function (Blueprint $table) {
        $table->id();
        $table->string('username');
        $table->integer('time_taken');
        $table->integer('difficulty');
        $table->timestamps();
    });
}

Изпълни миграцията:

php artisan migrate

  1. Добави логика за записване на резултатите в контролера:

use App\Models\SudokuResult;

public function saveResult(Request $request)
{
    // Примерно записваме резултата
    SudokuResult::create([
        'username' => $request->input('username'),
        'time_taken' => $request->input('time_taken'),
        'difficulty' => $request->input('difficulty')
    ]);

    return redirect('/sudoku/results');
}

public function showResults()
{
    $results = SudokuResult::all();
    return view('sudoku.results', compact('results'));
}

  1. Добави форма за записване на резултата (в изгледа):

<form action="{{ route('sudoku.saveResult') }}" method="POST">
    @csrf
    <input type="text" name="username" placeholder="Вашето име" required>
    <input type="number" name="time_taken" placeholder="Време за решаване" required>
    <input type="number" name="difficulty" placeholder="Трудност" required>
    <button type="submit">Записване на резултата</button>
</form>

3. Избор на ниво на трудност

Можеш да добавиш възможност за избор на ниво на трудност и да генерираш пъзели с различни трудности.

Пример за избор на трудност:

  1. В изгледа добави падащо меню за избор на трудност:

<select id="difficulty">
    <option value="easy">Лесно</option>
    <option value="medium">Средно</option>
    <option value="hard">Трудно</option>
</select>

<button onclick="generatePuzzle()">Генерирай пъзел</button>

  1. Логика за избор на трудност (JavaScript):

function generatePuzzle() {
    const difficulty = document.getElementById('difficulty').value;
    // Можеш да изпратиш заявка към сървъра да генерира пъзел в зависимост от избраната трудност
    fetch(`/sudoku/generate?difficulty=${difficulty}`)
        .then(response => response.json())
        .then(data => {
            renderBoard(data.board);  // Рендирай новото судоку
        });
}

  1. Генериране на трудност в сървъра (PHP):

public function generatePuzzle(Request $request)
{
    $difficulty = $request->input('difficulty', 'easy');
    $board = $this->generateSudokuBasedOnDifficulty($difficulty);
    
    return response()->json(['board' => $board]);
}

private function generateSudokuBasedOnDifficulty($difficulty)
{
    // Генерирай съответното судоку в зависимост от трудността
    // Можеш да използваш различни алгоритми или библиотека за това
}

4. Часови лимит за решаване

Добави време за решаване на пъзела. Можеш да показваш таймер в реално време, а след като потребителят завърши, да записваш времето.

Пример за таймер в JavaScript:

let startTime;
let timer;

function startTimer() {
    startTime = Date.now();
    timer = setInterval(function() {
        const timeElapsed = Math.floor((Date.now() - startTime) / 1000);
        document.getElementById('timer').innerText = `Време: ${timeElapsed}s`;
    }, 1000);
}

function stopTimer() {
    clearInterval(timer);
}

В HTML:

<p id="timer">Време: 0s</p>

5. Възможност за решаване и показване на решение

Добави бутон за показване на решението на пъзела или за автоматично решаване.

Примерен бутон и логика за автоматично решаване:

<button onclick="solvePuzzle()">Реши пъзела</button>


function solvePuzzle() {
    const solvedBoard = solveSudoku(board); // Използвай алгоритъм за решаване на судоку
    renderBoard(solvedBoard);
}

© Авторски права на scs3.eu Всички права са запазени. Проектиран и разработен от fibonachi@abv.bg 2021 - 2025.