Drawing game where you pick a color and draw freely on a canvas, features are undo, redo, erase all, select color, and select canvas size's game

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

No:43330

111

←

Prev Next

→

Drawing game where you pick a color and draw freel..ALL
Developer User19162｜Date and time 24/2/15 6:47:00
Build time 10.39 sec｜Game capacity 3.385KB｜

Script

Sure, here's a basic implementation of a drawing game using JavaScript, HTML, and CSS features. This implementation allows you to pick a color, draw freely on a canvas, undo and redo your actions, erase all the drawings, choose a color, and select the canvas size. To keep the response concise, I'll provide the code with minimal styling. You can further customize the appearance as per your requirements.

Color: Size:

To use the game, simply copy the code into a single HTML file (e.g., `game.html`) and open it using a web browser on your smartphone. The game provides buttons for undo, redo, erase all, a color picker, and a size selector. You can draw freely on the canvas by touching and dragging your finger. The drawings can be undone and redone as desired. Feel free to modify and enhance the code to suit your specific requirements, such as adding more features or improving the user interface.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

To keep the response concise, I'll provide the code with minimal styling. You can further customize the appearance as per your requirements.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Drawing Game</title>
    <style>
      #canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div>
      <button onclick="undo()">Undo</button>
      <button onclick="redo()">Redo</button>
      <button onclick="clearCanvas()">Erase All</button>
      <label for="colorInput">Color:</label>
      <input type="color" id="colorInput" onchange="setColor()" />
      <label for="sizeInput">Size:</label>
      <select id="sizeInput" onchange="setSize()">
        <option value="400">Small</option>
        <option value="600">Medium</option>
        <option value="800" selected>Large</option>
      </select>
    </div>
    <canvas id="canvas" ontouchstart="startDrawing(event)" ontouchmove="draw(event)"></canvas>

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

function draw(event) {
        if (!isDrawing) return;
        var x = event.touches[0].clientX - canvas.offsetLeft;
        var y = event.touches[0].clientY - canvas.offsetTop;

context.lineWidth = size;
        context.strokeStyle = color;
        context.lineTo(x, y);
        context.stroke();
        context.beginPath();
        context.moveTo(x, y);

undoStack.push(context.getImageData(0, 0, canvas.width, canvas.height));
      }

function undo() {
        if (undoStack.length > 0) {
          redoStack.push(undoStack.pop());
          restoreCanvas();
        }
      }

function redo() {
        if (redoStack.length > 0) {
          undoStack.push(redoStack.pop());
          restoreCanvas();
        }
      }

function clearCanvas() {
        undoStack.push(context.getImageData(0, 0, canvas.width, canvas.height));
        context.clearRect(0, 0, canvas.width, canvas.height);
      }

function setColor() {
        color = document.getElementById("colorInput").value;
      }

function setSize() {
        size = document.getElementById("sizeInput").value;
      }

function restoreCanvas() {
        context.putImageData(undoStack[undoStack.length - 1], 0, 0);
      }
    </script>
  </body>
</html>
```

Feel free to modify and enhance the code to suit your specific requirements, such as adding more features or improving the user interface.