Un juego donde tenemos que dibujar correctamente un dibujo's game

Click here for free DL of the app version that can save data.

No:41349

←

Prev Next

→

Un juego donde tenemos que dibujar correctamente u..ALL
Developer User18516｜Date and time 24/2/7 2:09:18
Build time 13.819 sec｜Game capacity 3.518KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Juego de dibujo</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

let isDrawing = false;
        let lastX = 0;
        let lastY = 0;

canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        window.addEventListener('mouseup', stopDrawing);

function startDrawing(e) {
            isDrawing = true;
            [lastX, lastY] = [e.clientX, e.clientY];
        }

function draw(e) {
            if (!isDrawing) return;
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(e.clientX, e.clientY);
            ctx.stroke();
            [lastX, lastY] = [e.clientX, e.clientY];
        }

function stopDrawing() {
            isDrawing = false;
        }

// Lógica de juego

// Dibujo correcto a lograr
        const correctDrawing = [
            { x: 100, y: 100 },
            { x: 200, y: 100 },
            { x: 200, y: 200 },
            { x: 100, y: 200 },
            { x: 100, y: 100 }
        ];

// Variables de juego
        let currentDrawing = [];
        let isDrawingComplete = false;

// Comprobar si el dibujo es correcto
        function checkDrawing() {
            if (currentDrawing.length !== correctDrawing.length) {
                return false;
            }

for (let i = 0; i < currentDrawing.length; i++) {
                if (
                    currentDrawing[i].x !== correctDrawing[i].x ||
                    currentDrawing[i].y !== correctDrawing[i].y
                ) {
                    return false;
                }
            }

return true;
        }

// Dibujar el dibujo correcto a lograr
        function drawCorrectDrawing() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.moveTo(correctDrawing[0].x, correctDrawing[0].y);

for (let i = 1; i < correctDrawing.length; i++) {
                ctx.lineTo(correctDrawing[i].x, correctDrawing[i].y);
            }

ctx.stroke();
        }

// Dibujar el dibujo actual del jugador
        function drawCurrentDrawing() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.moveTo(currentDrawing[0].x, currentDrawing[0].y);

for (let i = 1; i < currentDrawing.length; i++) {
                ctx.lineTo(currentDrawing[i].x, currentDrawing[i].y);
            }

ctx.stroke();
        }

// Reiniciar el juego
        function resetGame() {
            currentDrawing = [];
            isDrawingComplete = false;
            drawCorrectDrawing();
        }

// Evento de inicio del juego
        canvas.addEventListener('mousedown', resetGame);

// Evento de dibujo
        canvas.addEventListener('mousemove', function(e) {
            if (isDrawingComplete) return;

currentDrawing.push({ x: e.clientX, y: e.clientY });
            drawCurrentDrawing();

if (checkDrawing()) {
                isDrawingComplete = true;
                alert('¡Dibujo correcto! ¡Has ganado!');
            }
        });
    </script>
</body>
</html>