A game where yoy can draw something and when done it comes alive's game

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

No:49616

←

Prev Next

→

A game where yoy can draw something and when done ..ALL
Developer User21097｜Date and time 24/3/5 20:53:42
Build time 8.713 sec｜Game capacity 2.523KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

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

canvas.addEventListener('mousedown', (e) => {
        isDrawing = true;
        [lastX, lastY] = [e.offsetX, e.offsetY];
    });

canvas.addEventListener('mousemove', draw);

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

function draw(e) {
        if (!isDrawing) return;
        ctx.strokeStyle = 'black';
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
        [lastX, lastY] = [e.offsetX, e.offsetY];
    }

const startButton = document.createElement('button');
    startButton.textContent = 'Start Animation';
    startButton.addEventListener('click', startAnimation);
    document.body.appendChild(startButton);

const saveButton = document.createElement('button');
    saveButton.textContent = 'Save Drawing';
    saveButton.addEventListener('click', saveDrawing);
    document.body.appendChild(saveButton);

function startAnimation() {
        const data = canvas.toDataURL();
        const image = new Image();
        image.src = data;
        image.onload = function() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(image, 0, 0);
            animate();
        }
    }

function animate() {
        const pixels = ctx.getImageData(0, 0, size, size);
        const allPixels = pixels.data.length / 4;

for (let i = 0; i < allPixels; i++) {
            if (pixels.data[i * 4] !== 255) {
                pixels.data[i * 4] = Math.floor(Math.random() * 255);
                pixels.data[i * 4 + 1] = Math.floor(Math.random() * 255);
                pixels.data[i * 4 + 2] = Math.floor(Math.random() * 255);
                pixels.data[i * 4 + 3] = 255;
            }
        }

ctx.putImageData(pixels, 0, 0);

requestAnimationFrame(animate);
    }

function saveDrawing() {
        const data = canvas.toDataURL();
        const saveLink = document.createElement('a');
        saveLink.href = data;
        saveLink.download = 'drawing.png';
        saveLink.click();
    }
</script>