❄❄結晶❄❄ コッホ雪片を表示します。画面をタップする度に、頂点の数が増加します。コッホ雪片の色は水色です。's game

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

No:4879

1375

←

Prev Next

→

❄❄結晶❄❄ コッホ雪片を表示します。画面をタップする度に、頂点の数が増加します。コッ..ALL
Developer もちきなこ｜Date and time 23/6/28 23:11:19
Build time 14.762 sec｜Game capacity 1.345KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body{
        background-color: #000;
    }
    canvas {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
    }
  </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

const ctx = canvas.getContext("2d");

let vertices = [
        [0, canvas.height / 2],
        [canvas.width, canvas.height / 2]
    ];

canvas.addEventListener("click", addVertex);

function addVertex(event) {
        const x = event.clientX;
        const y = event.clientY;
        vertices.splice(vertices.length - 1, 0, [x, y]);
        drawSnowflake();
    }

function drawLine(x1, y1, x2, y2) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.strokeStyle = "#00FFFF";
        ctx.lineWidth = 1;
        ctx.stroke();
    }

function drawSnowflake() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (let i = 0; i < vertices.length - 1; i++) {
            const [x1, y1] = vertices[i];
            const [x2, y2] = vertices[i + 1];
            drawLine(x1, y1, x2, y2);
        }
    }

drawSnowflake();
</script>
</body>
</html>