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

No:4940

7338

←

Prev Next

→

じゃばくんの✡️幾何学模様✡️ 様々な幾何学模様を表示します。幾何学模様は、JavaScr..ALL
Developer もちきなこ｜Date and time 23/6/29 1:15:42
Build time 26.898 sec｜Game capacity 2.998KB｜

Script

了解です。以下に示すのは、HTMLファイル内にJavaScriptを含んだプログラムです。canvasを使用して様々な幾何学模様を表示し、タップすることで模様が変更されます。線の色はランダムになっています。

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

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

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```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>
```