AI game creator

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

No:21588

←

Prev Next

→

Drawing game
Developer User9911｜Date and time 23/10/16 17:46:27
Build time 71.249 sec｜Game capacity 2.787KB｜

Script

Sure! Here's an example of a simple drawing game implemented as a single HTML file, using JavaScript:

This game creates a drawing canvas where users can draw on the screen using their mouse or touchscreen. The canvas is enclosed in a `canvas` element with the id "canvas". Drawing starts when the user clicks or touches the canvas, and stops when the user releases the mouse or touch. The drawing is implemented using the HTML5 canvas and the 2D drawing context. Additionally, a "Clear" button is added to allow users to clear the canvas at any time. When the button is clicked, the `clearCanvas` function is called, which clears the entire canvas. Feel free to modify and enhance the code to suit your specific game requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's an example of a simple drawing game implemented as a single HTML file, using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
<title>Drawing Game</title>
<style>
  #canvas {
    width: 100%;
    height: 500px;
    border: 2px solid black;
    touch-action: none;
  }
</style>
</head>
<body>
  <canvas id="canvas"></canvas>

let isDrawing = false;

canvas.addEventListener('mousedown', startDrawing);
      canvas.addEventListener('touchstart', startDrawing);

function startDrawing(event) {
        isDrawing = true;
        context.beginPath();

if (event.type === 'touchstart') {
          const touch = event.touches[0];
          context.moveTo(touch.clientX - canvas.offsetLeft, touch.clientY - canvas.offsetTop);
        } else {
          context.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
        }
      }

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

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

if (event.type === 'touchmove') {
          const touch = event.touches[0];
          context.lineTo(touch.clientX - canvas.offsetLeft, touch.clientY - canvas.offsetTop);
        } else {
          context.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
        }

context.stroke();
      }

canvas.addEventListener('mouseup', stopDrawing);
      canvas.addEventListener('touchend', stopDrawing);

function stopDrawing() {
        isDrawing = false;
      }

canvas.addEventListener('mouseleave', stopDrawing);

const clearButton = document.createElement('button');
      clearButton.textContent = 'Clear';
      document.body.appendChild(clearButton);

clearButton.addEventListener('click', clearCanvas);

function clearCanvas() {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }
    });
  </script>
</body>
</html>
```

Additionally, a "Clear" button is added to allow users to clear the canvas at any time. When the button is clicked, the `clearCanvas` function is called, which clears the entire canvas.

Feel free to modify and enhance the code to suit your specific game requirements.