pathfinding/index.html at master · Xavosorcerer/pathfinding · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />

    <!-- import the webpage's javascript file -->
    <script src="/phaser.js"></script>
  </head>
  <body>
    <script>
      var RGBToHEX = function(r, g, b) {
        return (r << 16) | (g << 8) | b;
      };
      var config = {
        type: Phaser.AUTO,
        width: 1001,
        height: 701,
        scene: {
          preload: preload,
          create: create,
          update: update
        }
      };
      var game = new Phaser.Game(config);

      function preload() {
        this.load.image(
          "sky",
          "https://cdn.glitch.com/d02a816e-9196-4268-81af-3743e1d4c491%2Fsky.png?v=1575320804898"
        );
        this.load.image(
          "block",
          "https://cdn.glitch.com/d02a816e-9196-4268-81af-3743e1d4c491%2FBasic_square.svg?v=1575998325347"
        );
        this.load.image(
          "wall",
          "https://cdn.glitch.com/d02a816e-9196-4268-81af-3743e1d4c491%2Fwall.jfif?v=1575998325407"
        );
      }
      var grid = []; //holds the actual image objects
      var blockType = []; // wall or block?
      var needEnter = true;
      var enterPos = [];
      var needExit = true;
      var exitPos = [];
      function create() {
        this.add.image(500, 350, "sky").setScale(2, 2);
        //var grid = this.add.group();
        for (var r = 0; r < 10; r++) {
          grid[r] = [];
          blockType[r] = [];
          for (var c = 0; c < 7; c++) {
            var brick = this.add
              .image(r * 100, c * 100, "block")
              .setDisplaySize(100, 100)
              //.setScale(0.12, 0.16) // scale could be 0.13 0.17
              .setOrigin(0, 0);
            brick.setInteractive();
            grid[r][c] = brick;
            blockType[r][c] = "block";
          }
        }
        this.input.on(
          "pointerdown",
          (uno, dos) => {
            if (dos[0] !== undefined) {
              var row = dos[0].x / 100;
              var column = dos[0].y / 100;
              //grid[row][column].visible = false;
              if (blockType[row][column] == "block") {
                if (needEnter) {
                  grid[row][column].setTint(RGBToHEX(0, 255, 0));
                  needEnter = false;
                  blockType[row][column] = "enter";
                  enterPos = [row, column];
                } else if (needExit) {
                  grid[row][column].setTint(RGBToHEX(255, 0, 0));
                  needExit = false;
                  blockType[row][column] = "exit";
                  exitPos = [row, column];
                } else {
                  grid[row][column].setTexture("wall").setDisplaySize(100, 100);
                  blockType[row][column] = "wall";
                }
              } else if (blockType[row][column] == "wall") {
                grid[row][column].setTexture("block").setDisplaySize(100, 100);
                blockType[row][column] = "block";
              }
              else if (blockType[row][column] == "enter") {
                grid[row][column].setTexture("block").setDisplaySize(100, 100);
                blockType[row][column] = "block";
                grid[row][column].setTint(RGBToHEX(255, 255, 255));
                needEnter = true;
              }
              else if (blockType[row][column] == "exit") {
                grid[row][column].setTexture("block").setDisplaySize(100, 100);
                blockType[row][column] = "block";
                grid[row][column].setTint(RGBToHEX(255, 255, 255));
                needExit = true;
              }
              /* for (var i = -1; i <= 1; i++) {
                    for (var o = -1; o <= 1; o++) {
                      if (
                        grid[row + i] !== undefined &&
                        grid[row + i][column + o]
                      ) {
                        grid[row + i][column + o].visible = false;
                        //grid[row + i][column + o].loadTexture("wall");
                      }
                    }
                  }*/
            }
          },
          this
        );
      }
      function update() {}
      function updateGrid() {}
    </script>
  </body>
</html>