Drawing Game

by SonicBear35

120 lines2.3 KB

<!DOCTYPE html>
<html>
<head>
<title>Drawing Game</title>
<style>
  body {
    margin: 0;
    font-family: Arial;
    background: #f0f0f0;
    text-align: center;
  }

  canvas {
    background: white;
    display: block;
    margin: 0 auto;
    touch-action: none;
  }

  #toolbar {
    padding: 10px;
    background: #222;
  }

  button {
    padding: 10px;
    margin: 5px;
    border: none;
    cursor: pointer;
    color: white;
  }

  .red { background: red; }
  .blue { background: blue; }
  .black { background: black; }
  .green { background: green; }
  .erase { background: gray; }
  .clear { background: orange; }
</style>
</head>
<body>

<div id="toolbar">
  🎨 Drawing Game |
  <button class="black" onclick="setColor('black')">Black</button>
  <button class="red" onclick="setColor('red')">Red</button>
  <button class="blue" onclick="setColor('blue')">Blue</button>
  <button class="green" onclick="setColor('green')">Green</button>
  <button class="erase" onclick="setColor('white')">Eraser</button>
  <button class="clear" onclick="clearCanvas()">Clear</button>
</div>

<canvas id="canvas"></canvas>

<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight - 60;

let drawing = false;
let color = "black";

function setColor(c) {
  color = c;
}

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

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

  ctx.lineWidth = 5;
  ctx.lineCap = "round";
  ctx.strokeStyle = color;

  ctx.lineTo(e.clientX, e.clientY - 60);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(e.clientX, e.clientY - 60);
}

// Mouse controls
canvas.addEventListener("mousedown", () => {
  drawing = true;
  ctx.beginPath();
});

canvas.addEventListener("mouseup", () => {
  drawing = false;
  ctx.beginPath();
});

canvas.addEventListener("mousemove", draw);

// Touch controls (for phone)
canvas.addEventListener("touchstart", (e) => {
  drawing = true;
  ctx.beginPath();
});

canvas.addEventListener("touchend", () => {
  drawing = false;
  ctx.beginPath();
});

canvas.addEventListener("touchmove", (e) => {
  let touch = e.touches[0];
  draw({
    clientX: touch.clientX,
    clientY: touch.clientY
  });
});
</script>

</body>
</html>

Game Source: Drawing Game

Creator: SonicBear35

Libraries: none

Complexity: moderate (120 lines, 2.3 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: drawing-game-sonicbear35" to link back to the original. Then publish at arcadelab.ai/publish.