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

No:1185

127

←

Prev Next

→

A game that automatically generates images of cute..ALL
Developer User3258｜Date and time 23/6/18 7:13:51
Build time 23.103 sec｜Game capacity 1.958KB｜

Script

かわいい女の子画像自動生成ゲーム

画面をタップするとかわいい女の子がランダムに生成されます。

※注意：HTMLのヒアドキュメント内に改行を入れていると正常に動作しない場合があります。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>かわいい女の子画像自動生成ゲーム</title>
    <style>
      #canvas {
        border: 3px solid black;
      }
    </style>
  </head>
  <body>
    <h1>かわいい女の子画像自動生成ゲーム</h1>
    <p>画面をタップするとかわいい女の子がランダムに生成されます。</p>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      
      function generateGirl() {
        const hairColors = ["#000", "#963", "#f09", "#f6c"];
        const hairColor = hairColors[Math.floor(Math.random() * 4)];
        const skinColors = ["#ffdfb6", "#ffcba8", "#ffba84", "#ffaf7a"];
        const skinColor = skinColors[Math.floor(Math.random() * 4)];
        const eyeColors = ["#118ab2", "#06d6a0", "#ffd166", "#ef476f"];
        const eyeColor = eyeColors[Math.floor(Math.random() * 4)];
        
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = hairColor;
        ctx.fillRect(75, 25, 150, 150);
        ctx.fillStyle = skinColor;
        ctx.fillRect(100, 140, 100, 100);
        ctx.fillStyle = eyeColor;
        ctx.beginPath();
        ctx.ellipse(125, 180, 20, 30, 0, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.ellipse(175, 180, 20, 30, 0, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillStyle = "#000";
        ctx.beginPath();
        ctx.ellipse(130, 180, 5, 8, 0, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.ellipse(180, 180, 5, 8, 0, 0, 2 * Math.PI);
        ctx.fill();
      }
      
      generateGirl();
      
      canvas.addEventListener("click", generateGirl);
    </script>
  </body>
</html>

※注意：HTMLのヒアドキュメント内に改行を入れていると正常に動作しない場合があります。