AI game creator

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

No:3924

3758

←

Prev Next

→

hyperbola
Developer anonymous｜Date and time 70/1/1 9:49:18
Build time unknown sec｜Game capacity 2.958KB｜

Script

関数のプロットをするゲームを作りました。以下が実装したHTMLファイルです。

a = b =

このゲームは、「双曲線関数」という関数のプロットをするゲームです。プレイヤーは、aとbの値を入力し、Playボタンを押すことでグラフが描画されます。双曲線関数は、y = a * sinh(b * x) で表されます。xは-10から10まで0.1刻みで変化し、その値に対応するyを計算して、グラフ上にプロットします。画面をリセットするためのreset関数も実装しています。スマホでも操作できるように、入力欄・ボタンのスタイルを調整し、全体的にシンプルなデザインにしました。

←

Prev　Next

→ 　

Back　

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

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

関数のプロットをするゲームを作りました。以下が実装したHTMLファイルです。

```
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双曲線関数のプロットゲーム</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    canvas {
      height: 100%;
      width: 100%;
    }
    .wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    .input-wrapper {
      display: flex;
      margin-bottom: 10px;
    }
    .label {
      margin-right: 5px;
    }
    input[type="number"] {
      border: none;
      border-bottom: 1px solid black;
      outline: none;
      margin: 0 10px;
      text-align: center;
      font-size: 16px;
      width: 60px;
    }
    button {
      padding: 5px 10px;
      border-radius: 5px;
      border: none;
      background-color: #007aff;
      color: white;
      font-size: 16px;
      cursor: pointer;
    }
    button:hover {
      background-color: #0057e7;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <div class="wrapper">
    <div class="input-wrapper">
      <label class="label" for="a-input">a = </label>
      <input type="number" id="a-input" value="1" step="0.1">
      <label class="label" for="b-input">b = </label>
      <input type="number" id="b-input" value="1" step="0.1">
    </div>
    <button id="play-button">Play</button>
  </div>
  <script>
    const canvas = document.getElementById("canvas");
    const context = canvas.getContext("2d");

function plot(a, b) {
      for (let x = -10; x <= 10; x += 0.1) {
        const y = a * Math.sinh(b * x);
        const px = canvas.width / 2 + x * 20;
        const py = canvas.height / 2 - y * 20;
        context.fillRect(px, py, 2, 2)
      }
    }

function reset() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    }

document.getElementById("play-button").addEventListener("click", function() {
      reset();
      const a = parseFloat(document.getElementById("a-input").value);
      const b = parseFloat(document.getElementById("b-input").value);
      plot(a, b);
    });
  </script>
</body>
</html>
```