トライフォースinトライフォースシェルピンスキーのギャスケット(Sierpinski gasket)を表示します。図形は徐々に拡大されていきます。色は黄色です。's game

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

No:4856

4476

←

Prev Next

→

トライフォースinトライフォースシェルピンスキーのギャスケット(Sierpinski gas..ALL
Developer もちきなこ｜Date and time 23/6/28 22:54:53
Build time 23.511 sec｜Game capacity 2.021KB｜

Script

はい、トライフォースinトライフォースのシェルピンスキーのギャスケットを表示するHTMLファイルを作成します。以下が該当のコードです。

このHTMLファイルを開くと、初期配置で黄色のシェルピンスキーのギャスケットが描画されます。ウィンドウのサイズを変更するとギャスケットが拡大縮小され、ウィンドウがリサイズされたときにも再描画されます。

←

Prev　Next

→ 　

Back　

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

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

はい、トライフォースinトライフォースのシェルピンスキーのギャスケットを表示するHTMLファイルを作成します。以下が該当のコードです。

```html
<!DOCTYPE html>
<html>
<head>
  <title>トライフォースinトライフォース</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

const depth = 8; // ギャスケットの深さ
    const size = 400; // キャンバスのサイズ

// ギャスケットの描画
    function drawGasket(x, y, len, depth) {
      if (depth === 0) {
        ctx.fillStyle = "yellow";
        ctx.fillRect(x, y, len, len);
      } else {
        const halfLen = len / 2;
        drawGasket(x, y, halfLen, depth - 1);
        drawGasket(x + halfLen, y, halfLen, depth - 1);
        drawGasket(x + halfLen / 2, y + halfLen, halfLen, depth - 1);
      }
    }

// キャンバスの初期化
    function clearCanvas() {
      ctx.clearRect(0, 0, size, size);
    }

// ウィンドウのリサイズに対応
    function resizeCanvas() {
      const windowSize = Math.min(window.innerWidth, window.innerHeight);
      canvas.width = windowSize;
      canvas.height = windowSize;
    }

// ギャスケットの初期描画
    function init() {
      resizeCanvas();
      drawGasket(0, 0, size, depth);
    }

// ウィンドウのリサイズ時にキャンバスを再描画
    window.addEventListener("resize", function() {
      clearCanvas();
      init();
    });

// 初期描画
    init();
  </script>
</body>
</html>
```