Minimum whole area wood problem's game

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

No:7413

1779

←

Prev Next

→

Minimum whole area wood problem
Developer User3997｜Date and time 23/7/7 15:35:44
Build time 31.262 sec｜Game capacity 5.917KB｜

Script

了解しました。以下に提案するゲームは、最小全域木問題を題材にしたミニゲームです。

このゲームでは、画面をクリックすることで頂点が追加され、頂点間の距離が辺として表示されます。最小全域木の概念に基づき、エリア外側から頂点を選択することで最小全域木の長さが計算され、表示されます。再度ゲームをプレイするには、右クリックしてエリア外側の頂点を選択してください。なお、絵文字の代わりに "🌳" を使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解しました。以下に提案するゲームは、最小全域木問題を題材にしたミニゲームです。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>最小全域木ゲーム</title>
    <style>
        #gameArea {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="gameArea"></div>

var vertices = [];
        var selectedVertices = [];

var score = 0;

gameArea.addEventListener("click", function(e) {
            var newVertex = document.createElement("div");
            newVertex.innerHTML = "🌳";
            newVertex.style.position = "absolute";
            newVertex.style.left = (e.pageX - 10) + "px";
            newVertex.style.top = (e.pageY - 10) + "px";
            vertices.push(newVertex);
            gameArea.appendChild(newVertex);

if (vertices.length >= 2) {
                var lastVertexIndex = vertices.length - 1;
                for (var i = 0; i < lastVertexIndex; i++) {
                    var newEdge = document.createElement("div");
                    newEdge.classList.add("edge");
                    newEdge.style.position = "absolute";
                    newEdge.style.left = (parseInt(vertices[i].style.left) + 10) + "px";
                    newEdge.style.top = (parseInt(vertices[i].style.top) + 10) + "px";
                    newEdge.style.width = Math.sqrt(Math.pow(parseInt(vertices[i].style.left) - parseInt(vertices[lastVertexIndex].style.left), 2) +
                                                    Math.pow(parseInt(vertices[i].style.top) - parseInt(vertices[lastVertexIndex].style.top), 2)) + "px";
                    newEdge.style.transformOrigin = "top left";
                    newEdge.style.transform = "rotate(" + Math.atan2(parseInt(vertices[i].style.top) - parseInt(vertices[lastVertexIndex].style.top),
                                                                      parseInt(vertices[i].style.left) - parseInt(vertices[lastVertexIndex].style.left)) + "rad)";
                    gameArea.appendChild(newEdge);
                    edges.push(newEdge);
                }
            }

if (score === 0) {
                alert("最小全域木ゲームを始めます！ 木を構成する辺を順に選択してください。(エリアの外側からクリックして終了)");
            }
            score++;
        });

function removeEdges() {
            for (var i = 0; i < edges.length; i++) {
                gameArea.removeChild(edges[i]);
            }
        }

function removeVertices() {
            for (var i = 0; i < vertices.length; i++) {
                gameArea.removeChild(vertices[i]);
            }
        }

function calculateTreeLength(selectedEdges) {
            var sum = 0;
            for (var i = 0; i < selectedEdges.length; i++) {
                sum += parseInt(selectedEdges[i].style.width, 10);
            }
            return sum;
        }

gameArea.addEventListener("contextmenu", function(e) {
            e.preventDefault();

if (vertices.length < 3) {
                alert("頂点を3つ以上設置してください");
                return;
            }

if (score > 1) {
                removeEdges();
                removeVertices();
            }

if (selectedEdges.length === 0) {
                alert("エリア外側の頂点を選択してください");
                return;
            }

var totalLength = calculateTreeLength(selectedEdges);
            alert("最小全域木の長さ: " + totalLength.toFixed(2));

score = 0;
            edges = [];
            selectedEdges = [];
            vertices = [];
            selectedVertices = [];
        });

gameArea.addEventListener("mousemove", function(e) {
            if (vertices.length > 1) {
                var closestEdgeIndex = null;
                var closestEdgeDistance = Infinity;
                for (var i = 0; i < edges.length; i++) {
                    var edge = edges[i];
                    var edgeRect = edge.getBoundingClientRect();
                    var distance = Math.sqrt(Math.pow(e.pageX - ((edgeRect.right - edgeRect.left) / 2 + edgeRect.left), 2) +
                                             Math.pow(e.pageY - ((edgeRect.bottom - edgeRect.top) / 2 + edgeRect.top), 2));
                    if (distance < closestEdgeDistance) {
                        closestEdgeIndex = i;
                        closestEdgeDistance = distance;
                    }
                }

if (closestEdgeIndex !== null) {
                    selectedEdges = [edges[closestEdgeIndex]];
                    for (var i = 0; i < edges.length; i++) {
                        if (i !== closestEdgeIndex) {
                            edges[i].style.opacity = "0.2";
                        }
                    }
                } else {
                    selectedEdges = edges;
                    for (var i = 0; i < edges.length; i++) {
                        edges[i].style.opacity = "1";
                    }
                }
            }
        });
    </script>
</body>
</html>
```

このゲームでは、画面をクリックすることで頂点が追加され、頂点間の距離が辺として表示されます。最小全域木の概念に基づき、エリア外側から頂点を選択することで最小全域木の長さが計算され、表示されます。再度ゲームをプレイするには、右クリックしてエリア外側の頂点を選択してください。

なお、絵文字の代わりに "🌳" を使用しています。