isometric

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/phaserjs"></script>
</head>

<body>
    <script>

        let testbox
        let map = [
            [0, 0, 0, 0, 0, 0, 1, 1, 1, 1],
            [0, 0, 0, 0, 0, 0, 1, 1, 1, 1],
            [0, 0, 1, 1, 1, 1, 1, 1, 1, 1],
            [0, 0, 1, 1, 1, 1, 1, 1, 1, 1],
            [0, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [0, 0, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        ]

        let map_tile

        class Scene1 extends Phaser.Scene {
            preload() {

            }

            create() {
                let offset = { x: 0, y: 0 }
                let tile_size = 64
                let tile_height = 8
                for (let y = 0; y < map.length; y++) {
                    for (let x = 0; x < map[y].length; x++) {
                        if (map[y][x] > 0) {
                            map_tile = this.add.isobox(x * (tile_size / 2) - (y * (tile_size / 2)) + offset.x, y * (tile_size / 4) + (x * (tile_size / 4)) + offset.y, tile_size, tile_height).setInteractive()
                            map_tile.on('pointerdown', function (pointer) {
                                this.setFillStyle(0xff0000);
                                console.log(x, y)
                            });

                            map_tile.on('pointerover', function (pointer) {

                                this.setFillStyle(0x00ff00, 0xffff00, 0xff0000);

                            });

                            map_tile.on('pointerout', function (pointer) {

                                this.setFillStyle(0xeeeeee, 0x999999, 0xcccccc);

                            });

                            map_tile.on('pointerup', function (pointer) {

                                this.setFillStyle(0xeeeeee, 0x999999, 0xcccccc);

                            });
                        }
                    }
                }

                const cursors = this.input.keyboard.createCursorKeys();
                this.cameras.main.centerOn(0, 150);
                const controlConfig = {
                    camera: this.cameras.main,
                    left: cursors.left,
                    right: cursors.right,
                    up: cursors.up,
                    down: cursors.down,
                    zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
                    zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
                    acceleration: 0.02,
                    drag: 0.0005,
                    maxSpeed: 0.7
                };

                this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
            }

            update(time, delta) {
                this.controls.update(delta);
            }
        }

        const config = {
            type: Phaser.AUTO,
            width: 800,
            height: 600,
            scene: Scene1
        };

        const game = new Phaser.Game(config);
    </script>
</body>

</html>