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

No:40888

68

辺の数を指定して図形を作成
Developer User18209｜Date and time 24/2/4 12:17:51
Build time 13.149 sec｜Game capacity 3.023KB｜

了解しました。以下に、指定された要件に基づいて辺の数を指定して図形を作成するゲームのプログラム例を示します。

図形作成ゲーム

辺の数:

このプログラムは、指定された辺の数に基づいて図形を作成するシンプルなゲームです。プレイヤーは辺の数を入力し、「図形作成」ボタンをクリックすることで図形が描画されます。描画された図形は`<canvas>`要素を使用して表示されます。 JavaScriptの`createShape()`関数では、指定された辺の数に基づいて図形を作成します。`<canvas>`要素の2Dコンテキストを取得し、`clearRect()`メソッドでキャンバスをクリアします。その後、`beginPath()`メソッドで新しいパスを開始し、指定された辺の数に基づいてループを実行して図形を描画します。描画された図形は、指定した半径と中心座標（`centerX`および`centerY`）を使用して円形状の座標を計算し、`moveTo()`メソッドと`lineTo()`メソッドを使用して線を引いていきます。最後に、`closePath()`メソッドでパスを閉じ、`lineWidth`プロパティと`strokeStyle`プロパティを設定して線の太さと色を指定し、`stroke()`メソッドで描画します。このプログラムは1枚のHTMLファイルとして実装されており、`
`タグ内にJavaScriptコードが含まれています。JavaScriptコードは指定されたスマホ操作を前提とし、ブラウザ上で実行されます。

→ 　

1　

1　

[PR]現在の売れ筋グッズランキング

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

(C)2023 HisashiApp

了解しました。以下に、指定された要件に基づいて辺の数を指定して図形を作成するゲームのプログラム例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>図形作成ゲーム</title>
</head>
<body>
    <h1>図形作成ゲーム</h1>
    <label for="numSides">辺の数:</label>
    <input type="number" id="numSides" min="3" max="10" step="1">
    <button onclick="createShape()">図形作成</button>

<canvas id="canvas" width="500" height="500"></canvas>

<script>
        function createShape() {
            const canvas = document.getElementById("canvas");
            const numSides = document.getElementById("numSides").value;
            const context = canvas.getContext("2d");
            context.clearRect(0, 0, canvas.width, canvas.height);

context.beginPath();
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const radius = 100;
            const angle = Math.PI * 2 / numSides;
            let x = centerX + radius * Math.cos(0);
            let y = centerY + radius * Math.sin(0);
            context.moveTo(x, y);

for (let i = 1; i <= numSides; i++) {
                x = centerX + radius * Math.cos(angle * i);
                y = centerY + radius * Math.sin(angle * i);
                context.lineTo(x, y);
            }

context.closePath();
            context.lineWidth = 5;
            context.strokeStyle = "black";
            context.stroke();
        }
    </script>
</body>
</html>
```

このプログラムは、指定された辺の数に基づいて図形を作成するシンプルなゲームです。プレイヤーは辺の数を入力し、「図形作成」ボタンをクリックすることで図形が描画されます。描画された図形は`<canvas>`要素を使用して表示されます。

JavaScriptの`createShape()`関数では、指定された辺の数に基づいて図形を作成します。`<canvas>`要素の2Dコンテキストを取得し、`clearRect()`メソッドでキャンバスをクリアします。その後、`beginPath()`メソッドで新しいパスを開始し、指定された辺の数に基づいてループを実行して図形を描画します。

描画された図形は、指定した半径と中心座標（`centerX`および`centerY`）を使用して円形状の座標を計算し、`moveTo()`メソッドと`lineTo()`メソッドを使用して線を引いていきます。最後に、`closePath()`メソッドでパスを閉じ、`lineWidth`プロパティと`strokeStyle`プロパティを設定して線の太さと色を指定し、`stroke()`メソッドで描画します。

このプログラムは1枚のHTMLファイルとして実装されており、`<script>`タグ内にJavaScriptコードが含まれています。JavaScriptコードは指定されたスマホ操作を前提とし、ブラウザ上で実行されます。