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

No:7393

4907

TSP
Developer User3997｜Date and time 23/7/7 13:17:42
Build time 21.853 sec｜Game capacity 4.13KB｜

以下は、巡回セールスマン問題をゲーム化したサンプルプログラムです。HTMLファイルを作成し、以下のコードを記述してください。

巡回セールスマン問題

以上のコードでは、HTML5のCanvas要素を使用して巡回セールスマン問題をゲーム化しています。四角形のキャンバス上に点が配置され、それを訪れる順序（ルート）をクリック操作で選択することで、距離が短くなるように最適化するゲームとなっています。 - ゲームのルール： - キャンバス上の任意の空白の部分をクリックすると、新しい点が追加されます。 - 現在のルート（順序）で描画された直線の距離が表示されます。 - ルートの距離が最短になるように、クリックする順序を選択してください。 - Resetボタンを押すと、ゲームがリセットされます。実際にHTMLファイルを作成し、上記のコードをコピペして実行してみてください。

→ 　

5　

5　

[PR]現在の売れ筋グッズランキング

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

(C)2023 HisashiApp

以下は、巡回セールスマン問題をゲーム化したサンプルプログラムです。HTMLファイルを作成し、以下のコードを記述してください。

```html
<!DOCTYPE html>
<html>
<head>
  <title>巡回セールスマン問題</title>
  <style>
    #canvas {
      border: 1px solid black;
      width: 300px;
      height: 300px;
    }
  </style>
</head>
<body>
  <h1>巡回セールスマン問題</h1>
  
  <div id="canvas"></div>

<script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    const size = 300;
    const points = [
      { x: 100, y: 100 },
      { x: 200, y: 200 },
      { x: 50, y: 250 },
      { x: 250, y: 50 }
    ];
    let order = [];
    let recordDistance;
    let bestOrder;

function setup() {
      canvas.width = size;
      canvas.height = size;

order = shuffle(points.length);
      recordDistance = calculateDistance(points, order);
      bestOrder = order.slice();

drawPoints();
      drawLines(order);
    }

function shuffle(n) {
      const array = Array.from(Array(n).keys());
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
    }

function calculateDistance(points, order) {
      let sum = 0;
      for (let i = 0; i < order.length - 1; i++) {
        const cityAIndex = order[i];
        const cityBIndex = order[i + 1];
        const cityA = points[cityAIndex];
        const cityB = points[cityBIndex];
        const d = Math.sqrt((cityB.x - cityA.x) ** 2 + (cityB.y - cityA.y) ** 2);
        sum += d;
      }
      return sum;
    }

function drawPoints() {
      ctx.clearRect(0, 0, size, size);
      for (let i = 0; i < points.length; i++) {
        const { x, y } = points[i];
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, Math.PI * 2);
        ctx.fill();
        ctx.closePath();
      }
    }

function drawLines(order) {
      ctx.beginPath();
      ctx.moveTo(points[order[0]].x, points[order[0]].y);
      for (let i = 1; i < order.length; i++) {
        const { x, y } = points[order[i]];
        ctx.lineTo(x, y);
      }
      ctx.lineTo(points[order[0]].x, points[order[0]].y);
      ctx.stroke();
      ctx.closePath();

const distance = calculateDistance(points, order);
      if (distance < recordDistance) {
        recordDistance = distance;
        bestOrder = order.slice();
      }

ctx.font = "14px Arial";
      ctx.fillText(`Distance: ${distance.toFixed(2)}`, 10, size - 10);
    }

function mouseClicked(event) {
      const rect = canvas.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;

points.push({ x, y });
      order.push(order.length);
      drawPoints();
      drawLines(order);
    }

function reset() {
      points.length = 4;
      order.length = 0;
      order = shuffle(points.length);
      recordDistance = calculateDistance(points, order);
      bestOrder = order.slice();
      drawPoints();
      drawLines(order);
    }

canvas.addEventListener("click", mouseClicked);
    setup();
  </script>
</body>
</html>
```

以上のコードでは、HTML5のCanvas要素を使用して巡回セールスマン問題をゲーム化しています。四角形のキャンバス上に点が配置され、それを訪れる順序（ルート）をクリック操作で選択することで、距離が短くなるように最適化するゲームとなっています。

- ゲームのルール：
  - キャンバス上の任意の空白の部分をクリックすると、新しい点が追加されます。
  - 現在のルート（順序）で描画された直線の距離が表示されます。
  - ルートの距離が最短になるように、クリックする順序を選択してください。
  - Resetボタンを押すと、ゲームがリセットされます。

実際にHTMLファイルを作成し、上記のコードをコピペして実行してみてください。