AI game creator

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

No:52591

313

←

Prev Next

→

ISOTOILET
Developer Winnerweiner2113｜Date and time 24/3/23 8:22:06
Build time 2.501 sec｜Game capacity 3.304KB｜

Script

The AI could not be gamified with this prompt. Please try again with different prompts. .
Displays games created by AI in the past at random.

color:

←

Prev　Next

→ 　

Back　

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

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

<p style='font-size:14px;background-color:#FF0'>The AI could not be gamified with this prompt. Please try again with different prompts. . <br>Displays games created by AI in the past at random.</p><!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>

<body>
  <canvas id="canvas"></canvas>
  <div id="palette">
    <div class="color" style="background-color: black;"></div>
    <div class="color" style="background-color: white;"></div>
    <div class="color" style="background-color: red;"></div>
    <div class="color" style="background-color: orange;"></div>
    <div class="color" style="background-color: yellow;"></div>
    <div class="color" style="background-color: green;"></div>
    <div class="color" style="background-color: blue;"></div>
    <div class="color" style="background-color: purple;"></div>
  </div>
  <div>
    <label>color:</label>
    <input type="color" id="bg-color" value="#FFFFFF">
    <button id="reset-btn">リセット</button>
  </div>

// 背景色の初期化
    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>