Skrypt który by dawał efekt zdrapki

Aby stworzyć efekt zdrapki w HTML, CSS i JavaScript, możesz użyć technik, które symulują zdrapywanie warstwy, aby odsłonić ukrytą treść lub obraz. Oto prosty skrypt, który realizuje taki efekt:

HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Efekt Zdrapki</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scratch-container">
        <canvas id="scratchCanvas"></canvas>
        <div class="hidden-message">
            <h1>Gratulacje! Wygrałeś!</h1>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

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

.scratch-container {
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    background-color: #aaa;
    z-index: 1;
}

.hidden-message {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 0;
}

.hidden-message h1 {
    color: #ff4747;
    font-size: 24px;
    text-align: center;
}

JavaScript (script.js):

const canvas = document.getElementById("scratchCanvas");
const ctx = canvas.getContext("2d");
let isDrawing = false;
let lastX = 0;
let lastY = 0;

console.log("Skrypt JS załadowany poprawnie");

// Ustalamy rozmiar canvasu
function resizeCanvas() {
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    initCanvas();
}

// Funkcja inicjująca canvas
function initCanvas() {
    ctx.fillStyle = "#aaa"; // Szary kolor warstwy
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = "source-over"; // Domyślny tryb mieszania
}

// Funkcja rysująca
function draw(e) {
    if (!isDrawing) return;

    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    ctx.globalCompositeOperation = "destination-out"; // Usuwanie szarej warstwy
    ctx.lineWidth = 30;
    ctx.lineCap = "round";
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(x, y);
    ctx.stroke();
    [lastX, lastY] = [x, y];
}

// Obsługa kliknięcia myszką
canvas.addEventListener("mousedown", (e) => {
    isDrawing = true;
    const rect = canvas.getBoundingClientRect();
    lastX = e.clientX - rect.left;
    lastY = e.clientY - rect.top;
});

canvas.addEventListener("mousemove", draw);

canvas.addEventListener("mouseup", () => isDrawing = false);
canvas.addEventListener("mouseout", () => isDrawing = false);

// Uruchomienie funkcji przy załadowaniu strony i zmianie rozmiaru okna
window.addEventListener("load", resizeCanvas);
window.addEventListener("resize", resizeCanvas);

Jak to działa:

HTML tworzy kontener dla zdrapki (canvas), pod którym znajduje się ukryta wiadomość.
CSS ustawia styl dla płótna (canvas) i ukrytej wiadomości.
JavaScript realizuje funkcję zdrapywania przy użyciu rysowania na canvasie. Kiedy użytkownik porusza myszką nad płótnem, warstwa jest „zdrapywana”, odsłaniając ukrytą wiadomość.

Po załadowaniu tej strony, użytkownik będzie mógł „zdrapać” szarą warstwę, aby odsłonić ukrytą wiadomość.