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

No:4533

901

←

Prev Next

→

Panda VS Sushi
Developer User3589｜Date and time 23/6/28 3:25:48
Build time 14.853 sec｜Game capacity 1.073KB｜

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を含んだプログラムです。canvasを使用して様々な幾何学模様を表示し、タップすることで模様が変更されます。線の色はランダムになっています。

✡️幾何学模様✡️ゲーム

このコードでは、canvas要素を使って幾何学模様を描画しています。画面をタップすると、表示される幾何学模様がランダムに変化します。表示される幾何学模様は円、四角形、三角形の3つの形状から選ばれます。線の色はランダムに生成されます。

←

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を含んだプログラムです。canvasを使用して様々な幾何学模様を表示し、タップすることで模様が変更されます。線の色はランダムになっています。

```html
<!DOCTYPE html>
<html>
<head>
    <title>幾何学模様ゲーム</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h1>✡️幾何学模様✡️ゲーム</h1>
    <canvas id="canvas" width="400" height="400"></canvas>

const shapes = [
            { type: 'circle', radius: 50 },
            { type: 'square', size: 80 },
            { type: 'triangle', size: 100 }
        ];

let currentShape = shapes[0];

function drawShape() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.beginPath();

switch (currentShape.type) {
                case 'circle':
                    context.arc(canvas.width / 2, canvas.height / 2, currentShape.radius, 0, 2 * Math.PI);
                    break;
                case 'square':
                    context.rect(canvas.width / 2 - currentShape.size / 2, canvas.height / 2 - currentShape.size / 2, currentShape.size, currentShape.size);
                    break;
                case 'triangle':
                    context.moveTo(canvas.width / 2, canvas.height / 2 - currentShape.size / 2);
                    context.lineTo(canvas.width / 2 - currentShape.size / 2, canvas.height / 2 + currentShape.size / 2);
                    context.lineTo(canvas.width / 2 + currentShape.size / 2, canvas.height / 2 + currentShape.size / 2);
                    context.closePath();
                    break;
            }

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

function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

canvas.addEventListener('click', function () {
            const currentIndex = shapes.indexOf(currentShape);
            if (currentIndex < shapes.length - 1) {
                currentShape = shapes[currentIndex + 1];
            } else {
                currentShape = shapes[0];
            }
            drawShape();
        });

drawShape();
    </script>
</body>
</html>
```