AI game creator

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

No:47192

←

Prev Next

→

Infanent hotel
Developer User18896｜Date and time 24/2/27 17:56:36
Build time 1.533 sec｜Game capacity 0.215KB｜

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ファイルに埋め込むJavaScriptコードの例です。

c1:
c2:
n:
k:
線の色:

このコードは、HTMLの `<canvas>` 要素を使用して正葉曲線を描画します。各パラメータはスライダーまたはセレクトボックスを介してユーザーが変更できます。パラメータが変更されると、`updateParams` 関数が呼び出されて新しいパラメータで正葉曲線が再描画されます。

←

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ファイルに埋め込むJavaScriptコードの例です。

```HTML
<!DOCTYPE html>
<html>
<head>
  <title>正葉曲線</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>

// パラメータの設定
    var c1 = 2;  // cの値
    var c2 = 1;  // cの値
    var a = c1 / c2;  // aの値
    var n = 100;  // nの値
    var k = 1;  // kの値
    var lineColor = "red";  // 線の色

// 正葉曲線の描画関数
    function drawFlower() {
      var theta = 0;
      var scale = 100;

context.clearRect(0, 0, canvas.width, canvas.height);
      context.beginPath();
      context.moveTo(
        (a * Math.sin(n * theta) * Math.cos(k * theta) * scale) + (canvas.width / 2),
        (a * Math.sin(n * theta) * Math.sin(k * theta) * scale) + (canvas.height / 2)
      );

for (theta = 0; theta <= (Math.PI * 2); theta += 0.01) {
        context.lineTo(
          (a * Math.sin(n * theta) * Math.cos(k * theta) * scale) + (canvas.width / 2),
          (a * Math.sin(n * theta) * Math.sin(k * theta) * scale) + (canvas.height / 2)
        );
      }

context.strokeStyle = lineColor;
      context.stroke();
    }

// 正葉曲線の初回描画
    drawFlower();

// バーの入力に基づいてパラメータを更新して再描画する関数
    function updateParams() {
      c1 = parseInt(document.getElementById("c1Slider").value);
      c2 = parseInt(document.getElementById("c2Slider").value);
      a = c1 / c2;
      n = parseInt(document.getElementById("nSlider").value);
      k = parseInt(document.getElementById("kSlider").value);
      lineColor = document.getElementById("colorSelect").value;

drawFlower();
    }
  </script>

<div>
    <label for="c1Slider">c1:</label>
    <input type="range" id="c1Slider" min="0" max="10" step="1" value="2" oninput="updateParams()">
    <br>
    <label for="c2Slider">c2:</label>
    <input type="range" id="c2Slider" min="0" max="10" step="1" value="1" oninput="updateParams()">
    <br>
    <label for="nSlider">n:</label>
    <input type="range" id="nSlider" min="0" max="200" step="1" value="100" oninput="updateParams()">
    <br>
    <label for="kSlider">k:</label>
    <input type="range" id="kSlider" min="0" max="10" step="1" value="1" oninput="updateParams()">
    <br>
    <label for="colorSelect">線の色:</label>
    <select id="colorSelect" onchange="updateParams()">
      <option value="red">赤</option>
      <option value="blue">青</option>
      <option value="green">緑</option>
    </select>
  </div>
</body>
</html>
```