Pocket Pix: Draw Own Creations, Use Objects, Animals & More, Tap The Undo Guy To Say!'s game

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

No:46005

112

←

Prev Next

→

Pocket Pix: Draw Own Creations, Use Objects, Anima..ALL
Developer User13970｜Date and time 24/2/22 19:09:22
Build time 8.008 sec｜Game capacity 1.871KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

// define variables for drawing functionality
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;
    let color = '#000000';

// set up canvas size for smartphone
    canvas.width = window.innerWidth - 20; // subtracting padding
    canvas.height = window.innerHeight - 20; // subtracting padding

// add event listeners for touch screen
    canvas.addEventListener('touchstart', startDrawing);
    canvas.addEventListener('touchmove', draw);
    canvas.addEventListener('touchend', stopDrawing);

// function to start drawing
    function startDrawing(e) {
        isDrawing = true;
        [lastX, lastY] = [e.touches[0].clientX, e.touches[0].clientY];
    }

// function to draw
    function draw(e) {
        if(!isDrawing) return;
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(e.touches[0].clientX, e.touches[0].clientY);
        ctx.strokeStyle = color;
        ctx.lineWidth = 5;
        ctx.stroke();
        [lastX, lastY] = [e.touches[0].clientX, e.touches[0].clientY];
    }

// function to stop drawing
    function stopDrawing() {
        isDrawing = false;
    }

// add undo functionality as a separate pictogram
    let undoButton = document.createElement('button');
    undoButton.innerText = '🔙 Undo';
    undoButton.addEventListener('click', undoLastStroke);

// function to undo last drawing stroke
    function undoLastStroke() {
        // implementation for undoing last stroke
        // not included in this code snippet
        alert('Undo functionality coming soon!');
    }

// add canvas and undo button to game screen
    document.body.appendChild(canvas);
    document.body.appendChild(undoButton);
</script>