Resolved merge conflicts with merging my Pose Classifier integration code with...

Resolved merge conflicts with merging my Pose Classifier integration code with Leannas restructuring and start screen integration.

gamejs/game.js

+function Game() {
+    // Current Sprite Selection from User -- might not be needed
+    let currUserSprite;
+
+    // Four numbers that define the transform, i hat and j hat
+    const i_x = 1;
+    const i_y = 0.5;
+    const j_x = -1;
+    const j_y = 0.5;
+
+    // Symmetric 2D array to store instances of TileClass
+    const tile_arr_size = 12;
+    let tileArr = new Array(tile_arr_size).fill(null).map(() => new Array(tile_arr_size).fill(null));
+    let playerSprite;
+    let playerSprite_curTgc; // the current tgc coordinates that the player is at
+    let playerSprite_curTileType; // The tile type that the player is currently sitting on
+
+    // Sprite size
+    const w = 64;
+    const h = 64;
+
+    // what the current cursor calculation is based off
+    let maxWinWidth = 1920;
+    let maxWinHeight = 1080;
+
+    // TODO: replace
+    let tools = ["Fix Sidewalk", "Add Curb Ramp"];
+    let currentToolIndex = 0; // keyPressed() has logic to make sure that index doens't go outisde of tools array bounds
+
+    /*
+        0 --> grass block (use for where houses go for now)
+        1 --> road tile
+        2 --> sidewalk tile
+        3 --> sidewalk rotated 180 degrees
+        4 --> broken sidewalk
+        5 --> broken sidewalk rotated 180 degrees
+        6 --> sidewalk corner topLeft (no curb ramp)
+        7 --> sidewalk corner botLeft (no curb ramp)
+        8 --> sidewalk corner botRight (no curb ramp)
+        9 --> sidewalk corner topRight (no curb ramp)
+    */
+
+    // Hardcoding tile placement for the first level
+    // x and y here are just the grid coordinates
+    const startingTileIndex = {
+        x: 3,
+        y: 0
+    };
+    const endingTileIndex = {
+        x: 3,
+        y: 11
+    };
+    const levelOne = [
+        [0, 0, 0, 2, 1, 1, 1, 1, 2, 0, 0, 0],
+        [0, 0, 0, 2, 1, 1, 1, 1, 2, 0, 0, 0],
+        [0, 0, 0, 2, 1, 1, 1, 1, 2, 0, 0, 0],
+        [3, 3, 5, 6, 1, 1, 1, 1, 9, 3, 5, 3],
+        [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],
+        [3, 5, 3, 7, 1, 1, 1, 1, 8, 3, 3, 3],
+        [0, 0, 0, 2, 1, 1, 1, 1, 4, 0, 0, 0],
+        [0, 0, 0, 2, 1, 1, 1, 1, 4, 0, 0, 0],
+        [0, 0, 0, 2, 1, 1, 1, 1, 2, 0, 0, 0],
+    ]; // Currently 10 by 10
+
+
+    this.setup = function() {
+        // createCanvas(maxWinWidth, maxWinHeight);
+        new Canvas(maxWinWidth, maxWinHeight);
+        imageMode(CENTER);
+
+        // Create our player sprite
+        playerSprite = new Sprite();
+        playerSprite.width = w;
+        playerSprite.height = h;
+        playerSprite.image = 'assets/tile_pngs/grass.png';
+
+        playerSprite_curTgc = startingTileIndex; // An object: {x: _, y: _}
+        playerSprite.x = toScreenCoords(playerSprite_curTgc).x;
+        playerSprite.y = toScreenCoords(playerSprite_curTgc).y;
+
+        // Now loop through our tile map and draw
+        // each tile accoridng to our levelOne matrix
+        // mapping
+        for (let i = 0; i < tile_arr_size; i++) {
+            for (let j = 0; j < tile_arr_size; j++) {
+                let tile_type = levelOne[i][j];
+                let tsc = toScreenCoords({
+                    x: i,
+                    y: j
+                });
+
+                switch (tile_type) {
+                    case 0: // grass block (use for where houses go for now)
+                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "city", "none");
+                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, grassTile, "decoration", "normal");
+                        tileArr[i][j].display(tileArr[i][j].sprite);
+                        break;
+                    case 1: // road tile
+                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "vertical");
+                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, roadTile, "road", "normal");
+                        tileArr[i][j].display(tileArr[i][j].sprite);
+                        break;
+                    case 2: // sidewalk tile
+                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "horizontal");
+                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalk, "sidewalk", "normal");
+                        tileArr[i][j].display(tileArr[i][j].sprite);
+                        break;
+                    case 3: // sidewalk rotated 180 degrees
+                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
+                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkRotated180, "sidewalk", "rotated180");
+                        tileArr[i][j].display(tileArr[i][j].sprite);
+                        break;
+                    case 4: // broken sidewalk
+                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
+                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkBroken, "broken_sidewalk", "normal");
+                        tileArr[i][j].display(tileArr[i][j].sprite);
+                        break;
+                    case 5: // broken sidewalk rotated 180 degrees
+                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
+                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkBrokenRotated180, "broken_sidewalk", "rotated180");
+                        tileArr[i][j].display(tileArr[i][j].sprite);
+                        break;
+                    case 6: // sidewalk corner topLeft (no curb ramp)
+                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
+                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkCornerTopLeft, "sidewalk_corner", "normal");
+                        tileArr[i][j].display(tileArr[i][j].sprite);
+                        break;
+                    case 7: // sidewalk corner botLeft (no curb ramp)
+                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
+                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkCornerBotLeft, "sidewalk_corner", "rotated90"); // TODO: Replace with rotated versions
+                        tileArr[i][j].display(tileArr[i][j].sprite);
+                        break;
+                    case 8: // sidewalk corner botRight (no curb ramp)
+                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
+                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkCornerBotRight, "sidewalk_corner", "rotated180"); // TODO: Replace with rotated versions
+                        tileArr[i][j].display(tileArr[i][j].sprite);
+                        break;
+                    case 9: // sidewalk corner topRight (no curb ramp)
+                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "road", "4way");
+                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, sidewalkCornerTopRight, "sidewalk_corner", "rotated270"); // TODO: Replace with rotated versions
+                        tileArr[i][j].display(tileArr[i][j].sprite);
+                        break;
+                    default:
+                        // Otherwise, default to road
+                        // grid[i][j] = new GridTile(j * gridSize, i * gridSize, gridSize, "city", "none");
+                        tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, roadTile, "road", "normal");
+                        tileArr[i][j].display(tileArr[i][j].sprite);
+                }
+                // tileArr[i][j] = new TileClass(i, j, tsc.x, tsc.y, roadTile);
+                // tileArr[i][j].display(tileArr[i][j].sprite);
+            }
+        }
+    }
+
+    this.draw = function() {
+        currUserSprite = sidewalk;
+        background('#588dbe');
+
+        translate(width / 2, height / 3);
+
+        // For now, use simple text to show which
+        // tool you have selected
+        // Top-left corner
+        // textAlign(LEFT, TOP);
+        textSize(16);
+        // fill(255);
+        // stroke(0);
+        // strokeWeight(4);
+        text(`Current Tool: ${tools[currentToolIndex]}`, -300, -10);
+
+        // Draw the player in their current pos
+
+        let curPlayerScreenCords = toScreenCoords(playerSprite_curTgc);
+        playerSprite.x = curPlayerScreenCords.x;
+        playerSprite.y = curPlayerScreenCords.y;
+
+        let tgc = screenToGridCoords({
+            x: mouseX,
+            y: mouseY
+        });
+
+        for (let i = 0; i < tile_arr_size; i++) {
+            for (let j = 0; j < tile_arr_size; j++) {
+                tileArr[i][j].display(tileArr[i][j].sprite);
+
+                // hover highlighting
+                if (tgc.x == i && tgc.y == j && tileArr[i][j].sprite == roadTile) {
+                    tileArr[i][j].display(roadHighlightedTile);
+
+                } else {
+                    tileArr[i][j].display(tileArr[i][j].sprite);
+                }
+
+            }
+        }
+    }
+
+
+
+
+    this.mouseClicked = function() {
+        let {
+            x: tgc_x,
+            y: tgc_y
+        } = screenToGridCoords({
+            x: mouseX,
+            y: mouseY
+        });
+        if (!isValidGridCoords(tgc_x, tgc_y)) {
+            return;
+        }
+
+        /* Type can either be
+            - decoration (grass, house, etc)
+            - road
+            - sidewalk
+            - broken_sidewalk
+            - sidewalk_corner
+            - sidewalk_corner_curbRamp
+        */
+        /* Orientation can either be
+            - normal (rotated 0 degrees)
+            - rotated90
+            - rotated180
+            - rotated270
+        */
+        // TODO: Make a fixed_sidewalk sprite
+        tile_type = tileArr[tgc_x][tgc_y].type;
+        tile_orientation = tileArr[tgc_x][tgc_y].orientation;
+
+        // Depending on what type of tile you clicked on,
+        // update the sprite accordingly
+        if (tile_type === "broken_sidewalk" && tools[currentToolIndex] === "Fix Sidewalk") {
+            // If broken sidewalk is clicked, then
+            // repair to make fixed sidewalk
+            updateTileType(tgc_x, tgc_y, "sidewalk");
+
+            // Check to see this tile's orientation to make sure we
+            // place down the right sprite
+            if (tile_orientation === "normal") {
+                updateTileSprite(tgc_x, tgc_y, sidewalk);
+            } else if (tile_orientation === "rotated180") {
+                updateTileSprite(tgc_x, tgc_y, sidewalkRotated180);
+            }
+        } else if (tile_type === "sidewalk_corner" && tools[currentToolIndex] === "Add Curb Ramp") {
+            // If sidewalk corner is clicked, then
+            // replace with curb ramp
+            updateTileType(tgc_x, tgc_y, "sidewalk_corner_curbRamp");
+
+            // Check to see this tile's orientation to make sure we
+            // place down the right sprite
+            if (tile_orientation === "normal") {
+                updateTileSprite(tgc_x, tgc_y, sidewalkCurbRampTopLeft);
+            } else if (tile_orientation === "rotated90") {
+                updateTileSprite(tgc_x, tgc_y, sidewalkCurbRampBotLeft);
+            } else if (tile_orientation === "rotated90") {
+                updateTileSprite(tgc_x, tgc_y, sidewalkCurbRampBotRight);
+            } else {
+                updateTileSprite(tgc_x, tgc_y, sidewalkCurbRampTopRight);
+            }
+        }
+    }
+
+
+
+    this.keyPressed = function() {
+        if (key === 'r') {
+            tileArr = rotateMatrixClockwise(tileArr);
+        }
+
+        if (key === 't') {
+            // Cycle to the next tool in our tools array (and wrap back around if
+            // we have reached the end of our tools array)
+            currentToolIndex = (currentToolIndex + 1) % tools.length;
+
+            // TODO: Change the cursor to an image that matches the current tool
+            // type can either be predefined image or path to image
+            // cursor(type, x, y)
+        }
+    }
+
+    this.keyReleased = function() {
+
+        // why is the player not showing up?
+
+        // it seems to be a reference issue
+        let playerSprite_newTcgCords_x = playerSprite_curTgc.x;
+        let playerSprite_newTcgCords_y = playerSprite_curTgc.y;
+        if (key === 'w') {
+            playerSprite_newTcgCords_y -= 1;
+        } else if (key === 's') {
+            playerSprite_newTcgCords_y += 1;
+        } else if (key === 'a') {
+            playerSprite_newTcgCords_x -= 1;
+        } else if (key === 'd') {
+            playerSprite_newTcgCords_x += 1;
+        }
+
+        // Check to make sure that the new coords are valid, if not, then don't
+        // allow the player to move to that tile
+        let tileType_playerIsOn = tileArr[playerSprite_curTgc.x][playerSprite_curTgc.y].type;
+        let tileType_nextTile = tileArr[playerSprite_newTcgCords_x][playerSprite_newTcgCords_y].type;
+
+        // console.log(`\nCurrent tile: ${tileType_playerIsOn}`);
+        // console.log(`Next tile: ${tileType_nextTile}`);
+
+        // console.log(`tileType_nextTile !== "broken_sidewalk": ${tileType_nextTile !== "broken_sidewalk"}`);
+        // console.log(`tileType_nextTile !== "grass": ${tileType_nextTile !== "grass"}`);
+        // console.log(`(tileType_nextTile !== "road" && tileType_playerIsOn !== "sidewalk_corner") : ${(tileType_nextTile !== "road" && tileType_playerIsOn !== "sidewalk_corner") }`);
+        // console.log(`(tileType_nextTile !== "sidewalk_corner" && tileType_playerIsOn !== "road"): ${(tileType_nextTile !== "sidewalk_corner" && tileType_playerIsOn !== "road")}`);
+        // console.log(`(tileType_nextTile !== "sidewalk" && tileType_playerIsOn !== "road"): ${(tileType_nextTile !== "sidewalk" && tileType_playerIsOn !== "road")}`);
+
+
+        // check redundancy later here
+        if (tileType_nextTile == "road" && tileType_playerIsOn == "sidewalk_corner_curbRamp") {
+            playerSprite_curTgc.x = playerSprite_newTcgCords_x;
+            playerSprite_curTgc.y = playerSprite_newTcgCords_y;
+            return;
+        }
+
+        if (tileType_nextTile == "sidewalk_corner_curbRamp" && tileType_playerIsOn == "road") {
+            playerSprite_curTgc.x = playerSprite_newTcgCords_x;
+            playerSprite_curTgc.y = playerSprite_newTcgCords_y;
+            return;
+        }
+
+        if (tileType_nextTile == "road" && tileType_playerIsOn == "road") {
+            playerSprite_curTgc.x = playerSprite_newTcgCords_x;
+            playerSprite_curTgc.y = playerSprite_newTcgCords_y;
+            return;
+        }
+
+        if (tileType_nextTile == "sidewalk_corner_curbRamp") {
+            playerSprite_curTgc.x = playerSprite_newTcgCords_x;
+            playerSprite_curTgc.y = playerSprite_newTcgCords_y;
+            return;
+        }
+
+        // I think we only want to walk on sidwalk no?
+        if (tileType_playerIsOn != "road" &&
+            (tileType_nextTile == "sidewalk" || tileType_nextTile == "sidewalk_corner")) {
+            console.log("The movement has been allowed...");
+            playerSprite_curTgc.x = playerSprite_newTcgCords_x;
+            playerSprite_curTgc.y = playerSprite_newTcgCords_y;
+        }
+    }
+
+
+
+
+    function rotateMatrixClockwise(matrix) {
+        let rotatedMatrix = new Array(tile_arr_size).fill(null).map(() => new Array(tile_arr_size).fill(null));
+
+        for (let i = 0; i < tile_arr_size; i++) {
+            for (let j = 0; j < tile_arr_size; j++) {
+                let newX = j;
+                let newY = tile_arr_size - 1 - i;
+                let tile = matrix[i][j];
+                let screenCoord = toScreenCoords({
+                    x: newX,
+                    y: newY
+                });
+                rotatedMatrix[newX][newY] = new TileClass(newX, newY, screenCoord.x, screenCoord.y, tile.sprite);
+            }
+        }
+        return rotatedMatrix;
+    }
+
+    // Helper function to check if grid coordinates are within bounds
+    function isValidGridCoords(tgc_x, tgc_y) {
+        return tgc_x >= 0 && tgc_x < tile_arr_size && tgc_y >= 0 && tgc_y < tile_arr_size;
+    }
+
+    // Helper function to update tile sprite
+    function updateTileSprite(tgc_x, tgc_y, sprite) {
+        tileArr[tgc_x][tgc_y].sprite = sprite;
+    }
+
+    // Helper function to update tile type
+    function updateTileType(tgc_x, tgc_y, type) {
+        tileArr[tgc_x][tgc_y].type = type;
+    }
+
+    function invertMatrix(a, b, c, d) {
+        /*
+          Invert a 2d matrix, with a, b, c, and d being
+          [ a  b ]
+          [ c  d ]
+        */
+        const det = (1 / (a * d - b * c));
+
+        return {
+            a: det * d,
+            b: det * -b,
+            c: det * -c,
+            d: det * a,
+        }
+    }
+
+    function toGridCoords(screen) {
+        const a = i_x * 0.5 * w;
+        const b = j_x * 0.5 * w;
+        const c = i_y * 0.5 * h;
+        const d = j_y * 0.5 * h;
+
+        const inv = invertMatrix(a, b, c, d);
+
+        return {
+            // offset mouse cursor to align with block
+            x: screen.x * inv.a + screen.y * inv.b - 25.75,
+            y: screen.x * inv.c + screen.y * inv.d + 4.15,
+        }
+    }
+
+    function toScreenCoords(tile) {
+        return {
+            x: tile.x * i_x * 0.5 * w + tile.y * j_x * 0.5 * w,
+            y: tile.x * i_y * 0.5 * h + tile.y * j_y * 0.5 * h,
+        }
+    }
+
+    // Helper function to convert screen coordinates to grid coordinates
+    function screenToGridCoords(screen) {
+        let tgc = toGridCoords(screen);
+        return {
+            x: Math.floor(tgc.x),
+            y: Math.floor(tgc.y)
+        };
+    }
+
+
+}

gamejs/gameover.js

+function GameOver() {
+    var oGame;
+
+    this.setup = function() {
+        // find a different scene using the SceneManager
+        oGame = this.sceneManager.findScene(Game).oScene;
+    }
+
+    this.draw = function() {
+        // read the injected bkImage property
+        image(this.sceneManager.bkImage, 0, 0);
+
+        // invoke a method from a different scene
+        oGame.displayGlobalBalls();
+
+        fill("black");
+        textSize(map(sin(frameCount * 0.1), 0, 1, 24, 32));
+        textAlign(CENTER);
+        text("GAME OVER", width / 2, height / 2);
+
+        textSize(12);
+        text("Score: " + oGame.getScore(), width / 2, height / 2 + 20);
+
+        text("Press any key to restart game...", width / 2, height - 20);
+    }
+
+    this.keyPressed = function() {
+        this.sceneManager.showScene(Intro);
+    }
+}
\ No newline at end of file

gamejs/intro.js

+function Intro() {
+    let startButton;
+
+    this.setup = function() {
+        startButton = new Sprite();
+        startButton.image = 'assets/img/startButton.png';
+        startButton.image.offset.y = 80;
+        // Add collider with offset
+        startButton.addCollider(0, 80, 194, 87);
+    }
+
+    this.draw = function() {
+        image(this.sceneManager.bkImage, 0, 0);
+    
+        if (startButton.mouse.hovering()){
+            mouse.cursor = 'grab';
+            startButton.image = 'assets/img/startButtonHovered.png';
+            startButton.image.offset.y = 80;
+
+        if (startButton.mouse.pressing()){
+            console.log('start button pressed!');
+            startButton.visible = false;
+            this.sceneManager.showScene(Game, 1);
+            mouse.cursor = 'default';
+        }
+
+        } else {
+            mouse.cursor = 'default';
+            startButton.image = 'assets/img/startButton.png';
+            startButton.image.offset.y = 80;
+        }
+    
+    }
+
+
+}
\ No newline at end of file

gamejs/start.js

+function preload() {
+    bkImageWCharacter = loadImage("assets/img/bk.png");
+    bkImage = loadImage("assets/img/bkNoCharacter.png");
+    grassTile = loadImage("assets/tile_pngs/grass.png");  // Road
+    grassTile = loadImage("assets/tile_pngs/grass.png");  // Road
+    roadTile = loadImage("assets/tile_pngs/TileDefault.png");  // Road
+    roadHighlightedTile = loadImage("assets/tile_pngs/TileHighlight.png");  // Highlighted Road
+    sidewalk = loadImage("assets/tile_pngs/side_walk_normal.png");  // Sidewalk
+    sidewalkRotated180 = loadImage("assets/tile_pngs/side_walk_rotated180.png");  // Sidewalk rotated 180
+    sidewalkBroken = loadImage("assets/tile_pngs/side_walkBroken_normal.png");  // Broken sidewalk
+    sidewalkBrokenRotated180 = loadImage("assets/tile_pngs/side_walkBroken_rotated180.png");  // Broken sidewalk rotated 180
+    sidewalkCornerTopLeft = loadImage("assets/tile_pngs/sidewalkCorner_topLeft.png");  // Corner Top Left
+    sidewalkCornerBotLeft = loadImage("assets/tile_pngs/sidewalkCorner_topLeft.png");  // Corner Bot Left (rot 90)
+    sidewalkCornerBotRight = loadImage("assets/tile_pngs/sidewalkCorner_topLeft.png");  // Corner Bot Right (rot 180)
+    sidewalkCornerTopRight = loadImage("assets/tile_pngs/sidewalkCorner_topLeft.png");  // Corner Top Right (rot 270)
+    sidewalkCurbRampTopLeft = loadImage("assets/tile_pngs/sidewalkCornerCurbRamp_topLeft.png");  // Corner w Curb Ramp Top Left
+    sidewalkCurbRampBotLeft = loadImage("assets/tile_pngs/sidewalkCornerCurbRamp_topLeft.png");  // Corner w Curb Ramp Bot Left (rot 90)
+    sidewalkCurbRampBotRight = loadImage("assets/tile_pngs/sidewalkCornerCurbRamp_topLeft.png");  // Corner w Curb Ramp Bot Right (rot 180)
+    sidewalkCurbRampTopRight = loadImage("assets/tile_pngs/sidewalkCornerCurbRamp_topLeft.png");  // Corner w Curb Ramp Top Right (rot 270)
+    roundaboutTile = loadImage("assets/tile_pngs/RoundBout280.png");
+}
+
+function setup() {
+    bkImage.resize(1920,1080);
+    bkImageWCharacter.resize(1920,1080);
+    grassTile.resize(64, 64);
+    grassTile.resize(64, 64);
+    roadTile.resize(64, 64);
+    roadHighlightedTile.resize(64, 64);
+    sidewalk.resize(64, 64);
+    sidewalkRotated180.resize(64, 64);
+    sidewalkBroken.resize(64, 64);
+    sidewalkBrokenRotated180.resize(64, 64);
+    sidewalkCornerTopLeft.resize(64, 64);
+    sidewalkCornerBotLeft.resize(64, 64);
+    sidewalkCornerBotRight.resize(64, 64);
+    sidewalkCornerTopRight.resize(64, 64);
+    roundaboutTile.resize(252, 252);
+    
+    createCanvas(bkImage.width, bkImage.height);
+
+    var mgr = new SceneManager();
+    mgr.bkImage = bkImageWCharacter; // inject bkImage property
+    mgr.wire();
+    mgr.showScene(Intro);
+}
\ No newline at end of file

index.html

@@ -6,19 +6,32 @@
     <title>Sketch</title>
     <link rel="stylesheet" type="text/css" href="style.css">
 
-    <script src="libraries/p5.min.js"></script>
-    <script src="libraries/p5.sound.min.js"></script>
+    <!-- <script src="libraries/p5.min.js"></script>
+    <script src="libraries/p5.sound.min.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/addons/p5.sound.min.js"></script>
 
     <!-- ml5.js -->
     <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>
-
+   
     <!-- Version 3 of p5play -->
     <script src="https://p5play.org/v3/planck.min.js"></script>
     <script src="https://p5play.org/v3/p5play.js"></script>
-  </head>
+   
+    <script src="libraries/scenemanager.js"></script>
+    <script src="libraries/TileClass.js"></script>
+
+    <script src="gamejs/intro.js"></script>
+    <script src="gamejs/game.js"></script>
+    <script src="gamejs/gameover.js"></script>
+    <script src="gamejs/start.js"></script>
+ 
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta charset="utf-8" />
 
+  </head>
   <body>
-    <script src="TileClass.js"></script> <!-- Ensure MyClass.js is loaded before sketch.js -->
-    <script src="sketch.js"></script>
+    <main>
+    </main>
   </body>
-</html>
+</html>
\ No newline at end of file

libraries/scenemanager.js

+//
+// p5 SceneManager helps you create p5.js sketches with multiple states / scenes
+// Each scene is a like a sketch within the main sketch. You focus on creating
+// the scene like a regular sketch and SceneManager ensure scene switching
+// routing the main setup(), draw(), mousePressed(), etc. events to the 
+// appropriate current scene.
+//
+// Author: Marian Veteanu
+// http://github.com/mveteanu
+//
+function SceneManager(p)
+{
+    this.scenes = [];
+    this.scene = null;
+    
+    // Wire relevant p5.js events, except setup()
+    // If you don't call this method, you need to manually wire events
+    this.wire = function()
+    {
+        const P5Events = [ "mouseClicked", 
+                "mousePressed", 
+                "mouseReleased", 
+                "mouseMoved", 
+                "mouseDragged", 
+                "doubleClicked", 
+                "mouseWheel", 
+                "keyPressed", 
+                "keyReleased", 
+                "keyTyped", 
+                "touchStarted", 
+                "touchMoved", 
+                "touchEnded", 
+                "deviceMoved", 
+                "deviceTurned", 
+                "deviceShaken" ];
+
+        var me = this;
+        var o = p != null ? p : window;
+
+        // Wire draw manually for speed reasons...
+        o.draw = function(){ me.draw(); };
+
+        // This loop will wire automatically all P5 events to each scene like this:
+        // o.mouseClicked = function() { me.handleEvent("mouseClicked"); }
+        for(var i = 0; i < P5Events.length; i++)
+        {
+            let sEvent = P5Events[i]; // let is necesary to set the scope at the level of for
+            o[sEvent] = function() { me.handleEvent(sEvent) };
+        }
+        
+        return me;
+    }
+
+
+    // Add a scene to the collection
+    // You need to add all the scenes if intend to call .showNextScene()
+    this.addScene = function( fnScene )
+    {
+        var oScene = new fnScene(p);
+
+        // inject p as a property of the scene
+        this.p = p;
+        
+        // inject sceneManager as a property of the scene
+        oScene.sceneManager = this;
+
+        var o = {   fnScene: fnScene, 
+                    oScene: oScene,
+                    hasSetup : "setup" in oScene,
+                    hasEnter : "enter" in oScene,
+                    hasDraw : "draw" in oScene,
+                    setupExecuted : false,
+                    enterExecuted : false };
+
+        this.scenes.push(o);
+        return o;
+    }
+
+    // Return the index of a scene in the internal collection
+    this.findSceneIndex = function( fnScene )
+    {
+        for(var i = 0; i < this.scenes.length; i++)
+        {
+            var o = this.scenes[i]; 
+            if ( o.fnScene == fnScene )
+                return i;
+        }
+
+        return -1;
+    }
+
+    // Return a scene object wrapper
+    this.findScene = function( fnScene )
+    {
+        var i = this.findSceneIndex( fnScene );
+        return i >= 0 ? this.scenes[i] : null;
+    }
+
+    // Returns true if the current displayed scene is fnScene
+    this.isCurrent = function ( fnScene )
+    {
+        if ( this.scene == null )
+            return false;
+
+        return this.scene.fnScene == fnScene;
+    }
+
+    // Show a scene based on the function name
+    // Optionally you can send arguments to the scene
+    // Arguments will be retrieved in the scene via .sceneArgs property
+    this.showScene = function( fnScene, sceneArgs )
+    {
+        var o = this.findScene( fnScene );
+
+        if ( o == null )
+            o = this.addScene( fnScene );
+        
+        // Re-arm the enter function at each show of the scene
+        o.enterExecuted = false;
+
+        this.scene = o;
+
+        // inject sceneArgs as a property of the scene
+        o.oScene.sceneArgs = sceneArgs;
+    }
+
+    // Show the next scene in the collection
+    // Useful if implementing demo applications 
+    // where you want to advance scenes automatically
+    this.showNextScene = function( sceneArgs )
+    {
+        if ( this.scenes.length == 0 )
+            return;
+
+        var nextSceneIndex = 0;
+
+        if ( this.scene != null )
+        {
+            // search current scene... 
+            // can be optimized to avoid searching current scene...
+            var i = this.findSceneIndex( this.scene.fnScene );
+            nextSceneIndex = i < this.scenes.length - 1 ? i + 1 : 0;
+        }
+
+        var nextScene = this.scenes[nextSceneIndex];
+        this.showScene( nextScene.fnScene, sceneArgs );
+    }
+    
+    // This is the SceneManager .draw() method
+    // This will dispatch the main draw() to the 
+    // current scene draw() method
+    this.draw = function()
+    {
+        // take the current scene in a variable to protect it in case
+        // it gets changed by the user code in the events such as setup()...
+        var currScene = this.scene;
+        
+        if ( currScene == null )
+            return;
+
+        if ( currScene.hasSetup && !currScene.setupExecuted  )
+        {
+            currScene.oScene.setup();
+            currScene.setupExecuted = true;
+        }
+
+        if ( currScene.hasEnter && !currScene.enterExecuted  )
+        {
+            currScene.oScene.enter();
+            currScene.enterExecuted = true;
+        }
+
+        if ( currScene.hasDraw )
+        {
+            currScene.oScene.draw();
+        }
+    }
+
+
+    // Handle a certain event for a scene... 
+    // It is used by the anonymous functions from the wire() function
+    this.handleEvent = function(sEvent)
+    {
+        if ( this.scene == null || this.scene.oScene == null )
+            return;
+
+        var fnSceneEvent = this.scene.oScene[sEvent];
+        if (fnSceneEvent)
+            fnSceneEvent.call(this.scene.oScene);
+    }
+
+    // Legacy method... preserved for maintaining compatibility
+    this.mousePressed = function()
+    {
+        this.handleEvent("mousePressed");
+    }
+
+    // Legacy method... preserved for maintaining compatibility
+    this.keyPressed = function()
+    {
+        this.handleEvent("keyPressed");
+    }
+
+}