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

No:48397

Haz un juego de pintar lo que el juego te pide
Developer User18058｜Date and time 24/3/2 4:21:33
Build time 17.722 sec｜Game capacity 3.385KB｜

Script

Juego de Pintar

Pinta lo que se te pide en cada nivel

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Juego de Pintar</title>
    <style>
        .canvas {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>Juego de Pintar</h1>
    <p>Pinta lo que se te pide en cada nivel</p>
    <canvas class="canvas" id="canvas"></canvas>
    
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        const levels = [
            {
                path: 'img/arbol.png',
                instructions: 'Pinta un arbol',
                solutionCoordinates: [{x: 150, y: 80}, {x: 140, y: 120}, {x: 160, y: 120}, {x: 150, y: 130}, {x: 130, y: 130}, {x: 170, y: 130}, {x: 140, y: 140}, {x: 160, y: 140}, {x: 150, y: 150}, {x: 140, y: 160}, {x: 160, y: 160}]
            },
            {
                path: 'img/coche.png',
                instructions: 'Pinta un coche',
                solutionCoordinates: [{x: 50, y: 50}, {x: 100, y: 50}, {x: 100, y: 100}, {x: 50, y: 100}, {x: 25, y: 50}, {x: 25, y: 100}, {x: 75, y: 25}, {x: 75, y: 25}, {x: 125, y: 25}]
            }
        ];
        
        let currentLevel = 0;
        
        function draw() {
            const img = new Image();
            img.onload = function() {
                ctx.drawImage(img, 0, 0, 300, 300);
                ctx.lineWidth = 3;
                ctx.strokeStyle = 'black';
                ctx.beginPath();

canvas.addEventListener('mousedown', function(event) {
                    const rect = canvas.getBoundingClientRect();
                    const x = event.clientX - rect.left;
                    const y = event.clientY - rect.top;

ctx.lineTo(x, y);
                    ctx.stroke();
                });

canvas.addEventListener('mouseup', function() {
                    checkSolution();
                });
            };
            img.src = levels[currentLevel].path;
        }

function checkSolution() {
            const solution = levels[currentLevel].solutionCoordinates;
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
            let correctPixels = 0;

solution.forEach(coord => {
                const index = (coord.y * canvas.width + coord.x) * 4;
                const red = imageData[index];
                const green = imageData[index + 1];
                const blue = imageData[index + 2];
                if (red === 0 && green === 0 && blue === 0) {
                    correctPixels++;
                }
            });

if (correctPixels === solution.length) {
                alert('¡Correcto! Pasa al siguiente nivel');
                currentLevel++;
                if (currentLevel < levels.length) {
                    resetCanvas();
                    draw();
                } else {
                    alert('Has completado todos los niveles. ¡Felicidades!');
                }
            } else {
                alert('Eso no es lo que se te pidió. Inténtalo de nuevo.');
                resetCanvas();
                draw();
            }
        }

function resetCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

draw();
    </script>
</body>
</html>