Otome game , into the anime lookism's game

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

No:41515

←

Prev Next

→

Otome game , into the anime lookism
Developer User18604｜Date and time 24/2/8 2:42:53
Build time 1.408 sec｜Game capacity 0.069KB｜

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.

以下が、要件に従って実装したHTMLファイルの例です。このプログラムでは、プレイヤーが自由にnとkの値を設定できます。また、曲線の線の色も選択できます。

Color:

これは、「正葉関数」を描画するプログラムです。プレイヤーがnとkの値を調整すると、描画される曲線が変化します。また、プレイヤーは色も選択することができます。

←

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>以下が、要件に従って実装したHTMLファイルの例です。このプログラムでは、プレイヤーが自由にnとkの値を設定できます。また、曲線の線の色も選択できます。

```html
<!DOCTYPE html>
<html>
<head>
<style>
#canvas {
  width: 100%;
  height: 500px;
}
</style>
</head>
<body>
  <div>
    <label for="n">n: </label>
    <input type="range" id="n" min="1" max="10" value="1" step="1">
  </div>
  
  <div>
    <label for="k">k: </label>
    <input type="range" id="k" min="1" max="10" value="1" step="1">
  </div>
  
  <div>
    <label for="color">Color: </label>
    <input type="color" id="color" value="#000000">
  </div>
  
  <canvas id="canvas"></canvas>
  
  <script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    
    function drawLeafCurve(n, k, color) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      ctx.strokeStyle = color;
      
      for (let theta = 0; theta <= 2 * Math.PI; theta += 0.01) {
        const r = Math.sin(n * theta / k);
        const x = canvas.width / 2 + r * Math.cos(theta) * 100;
        const y = canvas.height / 2 + r * Math.sin(theta) * 100;
        
        if (theta === 0) {
          ctx.moveTo(x, y);
        } else {
          ctx.lineTo(x, y);
        }
      }
      
      ctx.closePath();
      ctx.stroke();
    }
    
    const nInput = document.getElementById("n");
    const kInput = document.getElementById("k");
    const colorInput = document.getElementById("color");
    
    nInput.addEventListener("input", () => {
      drawLeafCurve(parseInt(nInput.value), parseInt(kInput.value), colorInput.value);
    });
    
    kInput.addEventListener("input", () => {
      drawLeafCurve(parseInt(nInput.value), parseInt(kInput.value), colorInput.value);
    });
    
    colorInput.addEventListener("input", () => {
      drawLeafCurve(parseInt(nInput.value), parseInt(kInput.value), colorInput.value);
    });
    
    drawLeafCurve(parseInt(nInput.value), parseInt(kInput.value), colorInput.value);
  </script>
</body>
</html>
```