AI game creator

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

No:33497

143

←

Prev Next

→

ゆずかき
Developer sayaensm｜Date and time 24/1/4 14:14:08
Build time 15.997 sec｜Game capacity 1.803KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ゆずかき</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: sans-serif;
    }

#canvas {
      border: 2px solid black;
      touch-action: none;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="300" height="300"></canvas>

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

function draw(e) {
      if (!isDrawing) return;

ctx.lineWidth = 10;
      ctx.lineCap = 'round';
      ctx.strokeStyle = 'black';

ctx.beginPath();
      ctx.moveTo(lastX, lastY);
      ctx.lineTo(e.clientX, e.clientY);
      ctx.stroke();

lastX = e.clientX;
      lastY = e.clientY;
    }

canvas.addEventListener('mousedown', (e) => {
      isDrawing = true;
      lastX = e.clientX;
      lastY = e.clientY;
    });

canvas.addEventListener('mousemove', draw);
    
    canvas.addEventListener('touchstart', (e) => {
      isDrawing = true;
      const rect = canvas.getBoundingClientRect();
      lastX = e.touches[0].clientX - rect.left;
      lastY = e.touches[0].clientY - rect.top;
    });

canvas.addEventListener('touchmove', (e) => {
      const rect = canvas.getBoundingClientRect();
      const touchX = e.touches[0].clientX - rect.left;
      const touchY = e.touches[0].clientY - rect.top;
      draw({ clientX: touchX, clientY: touchY });
    });

canvas.addEventListener('mouseup', () => isDrawing = false);
    canvas.addEventListener('mouseout', () => isDrawing = false);
    canvas.addEventListener('touchend', () => isDrawing = false);
  </script>
</body>
</html>