Drawing game It is a game to draw on the screen. When you touch the screen, a rectangle is generated where you are touching and you can draw a picture. The rectangle appears on a layer above the background. Rectangles continue to be generated while touched. You can select (change) the color of the rectangle by selecting a color from the "Palette" below. You can also select the background color by selecting a color from "Background color". By pressing "Reset", all rectangles will be deleted.'s game

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

No:2366

6749

←

Prev Next

→

Drawing game It is a game to draw on the screen. W..ALL
Developer もちきなこ｜Date and time 23/6/21 2:16:17
Build time 30.081 sec｜Game capacity 3.111KB｜

Script

Background color.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>お絵描きゲーム</title>
  <style type="text/css">
    canvas {
      border: 1px solid black;
      touch-action: none;
    }

#palette {
      display: flex;
      justify-content: space-around;
    }

.color {
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 100%;
      cursor: pointer;
      margin-bottom: 10px;
    }
  </style>
</head>

// 背景色の初期化
    canvas.style.backgroundColor = "#A0A0A0";

// タッチ操作で描画する
    canvas.addEventListener("touchstart", touch_start, false);
    canvas.addEventListener("touchmove", touch_move, false);
    canvas.addEventListener("touchend", touch_end, false);

// パレットで色を選択する
    palette.addEventListener("click", function(e) {
      if (e.target.classList.contains("color")) {
        color = e.target.style.backgroundColor;
      }
    }, false);

// 背景色を変更する
    bg_color.addEventListener("change", function(e) {
      canvas.style.backgroundColor = e.target.value;
    }, false);

// リセットする
    reset_btn.addEventListener("click", function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }, false);

// 描画開始時の処理
    function touch_start(e) {
      is_drawing = true;

last_x = e.touches[0].pageX;
      last_y = e.touches[0].pageY - canvas.offsetTop;
    }

// 描画中の処理
    function touch_move(e) {
      if (is_drawing) {
        var x = e.touches[0].pageX,
          y = e.touches[0].pageY - canvas.offsetTop;

ctx.fillStyle = color;
        ctx.fillRect(last_x, last_y, rect_w, rect_h);

last_x = x;
        last_y = y;
      }
    }

// 描画終了時の処理
    function touch_end(e) {
      is_drawing = false;
    }
  </script>
</body>

</html>