AI game creator

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

No:35197

←

Prev Next

→

The Drawing Game
Developer User16437｜Date and time 24/1/13 15:56:06
Build time 6.422 sec｜Game capacity 1.992KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<HTML>
  <head>
    <style>
      #canvas {
        border: 1px solid #000;
        background-color: #FFF;
        touch-action: none;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>

// Game Variables
      let canvas;
      let context;
      let isDrawing = false;

// Initialize Game
      function initializeGame() {
        // Create Canvas
        canvas = document.getElementById("canvas");
        canvas.width = CANVAS_WIDTH;
        canvas.height = CANVAS_HEIGHT;

// Get 2D Context
        context = canvas.getContext("2d");

// Event Listeners
        canvas.addEventListener("mousedown", startDrawing);
        canvas.addEventListener("touchstart", startDrawing);

canvas.addEventListener("mousemove", draw);
        canvas.addEventListener("touchmove", draw);

canvas.addEventListener("mouseup", stopDrawing);
        canvas.addEventListener("touchend", stopDrawing);
      }

// Start Drawing
      function startDrawing(event) {
        isDrawing = true;
        draw(event);
      }

// Stop Drawing
      function stopDrawing() {
        isDrawing = false;
      }

// Draw
      function draw(event) {
        if (!isDrawing) return;

let x, y;

if (event.touches) {
          x = event.touches[0].clientX - canvas.offsetLeft;
          y = event.touches[0].clientY - canvas.offsetTop;
        } else {
          x = event.clientX - canvas.offsetLeft;
          y = event.clientY - canvas.offsetTop;
        }

context.fillStyle = "#000";
        context.fillRect(x, y, DRAWING_SIZE, DRAWING_SIZE);
      }

// Initialize the game when the document is ready
      document.addEventListener("DOMContentLoaded", function() {
        initializeGame();
      });
    </script>
  </body>
</HTML>