Restructure of Index file

[jm1021]

Problems with index file...

1. Initialization of Game Object code was not properly conjoined.
2. Possible problems in timing on Game Object initialization
3. Functions could be more clear.

[jm1021]

Before Code

<script type="module">
    import GameEnv from '{{site.baseurl}}/assets/js/alienWorld/GameEnv.js';
    import GameObject from '{{site.baseurl}}/assets/js/alienWorld/GameObject.js';
    import Background from '{{site.baseurl}}/assets/js/alienWorld/Background.js';
    import Character from '{{site.baseurl}}/assets/js/alienWorld/Character.js';
    import Platform from '{{site.baseurl}}/assets/js/alienWorld/Platform.js';
    import { initDog } from '{{site.baseurl}}/assets/js/alienWorld/CharacterDog.js';
    import { initMonkey } from '{{site.baseurl}}/assets/js/alienWorld/CharacterMonkey.js';

    // Prepare Background Image
    const backgroundImg = new Image();
    backgroundImg.src = '{{backgroundFile}}';  // Jekyll/Liquid puts filename here

    // Prepare HTML with Background Canvas
    const backgroundCanvas = document.createElement("canvas");
    backgroundCanvas.id = "background";
    document.querySelector("#canvasContainer").appendChild(backgroundCanvas);

    // Prepare Dog Image
    const dogImg = new Image();
    dogImg.src = '{{dogSpriteImage}}';

    // Prepare HTML with Dog Canvas
    const dogCanvas = document.createElement("canvas");
    dogCanvas.id = "characters";
    document.querySelector("#canvasContainer").appendChild(dogCanvas);

    // Prepare Monkey Image
    const monkeyImg = new Image();
    monkeyImg.src = "{{monkeySpriteImage}}";

    // Prepare HTML with Monkey Canvas
    const monkeyCanvas = document.createElement("canvas");
    monkeyCanvas.id = "characters";
    document.querySelector("#canvasContainer").appendChild(monkeyCanvas);

    // Setup Globals
    GameEnv.gameSpeed = 2;
    GameEnv.controls = document.getElementById("controls");
    GameEnv.gravity = 3;

    // The background onload is critcal for timing
    backgroundImg.onload = function () {

        // Background object(s)
        const backgroundSpeedRatio = 0.2
        var backgroundObj = new Background(backgroundCanvas, backgroundImg, backgroundSpeedRatio);

        // Character object(s)
        const dogSpeedRatio = 0.2
        var dogObj = initDog(dogCanvas, dogImg, dogSpeedRatio);
        const monkeySpeedRatio = 0.7
        var monkeyObj = initMonkey(monkeyCanvas, monkeyImg, monkeySpeedRatio);

        //var platform = new Platform(0, GameEnv.bottom - 50, GameEnv.innerWidth, 10);

        // Game loop
        function gameLoop() {
            for (var gameObj of GameObject.gameObjectArray){
                gameObj.update();
                gameObj.draw();
            }
            requestAnimationFrame(gameLoop);  // cycle game, aka recursion
        }

        // Window resize event
        function setSize() {
            GameEnv.setGameEnv();  // Update GameEnv dimensions

            // Call the sizing method on all game objects
            for (let gameObj of GameObject.gameObjectArray){
                gameObj.size();
            }
        }

        // Listen for window resize events and trigger the handleResize function
        window.addEventListener('resize', setSize);

        // Start game
        setSize();
        gameLoop();
    }

[jm1021]

After code, addresses issue in ticket.

<script type="module">
    import GameEnv from '{{site.baseurl}}/assets/js/alienWorld/GameEnv.js';
    import GameObject from '{{site.baseurl}}/assets/js/alienWorld/GameObject.js';
    import Background from '{{site.baseurl}}/assets/js/alienWorld/Background.js';
    import Character from '{{site.baseurl}}/assets/js/alienWorld/Character.js';
    import { initPlatform } from '{{site.baseurl}}/assets/js/alienWorld/Platform.js';
    import { initDog } from '{{site.baseurl}}/assets/js/alienWorld/CharacterDog.js';
    import { initMonkey } from '{{site.baseurl}}/assets/js/alienWorld/CharacterMonkey.js';

    // Create a function to load an image and return a Promise
    async function loadImage(src) {
        return new Promise((resolve, reject) => {
        const image = new Image();
        image.src = src;
        image.onload = () => resolve(image);
        image.onerror = reject;
        });
    }

    // Game loop
    function gameLoop() {
        for (var gameObj of GameObject.gameObjectArray){
            gameObj.update();
            gameObj.draw();
        }
        requestAnimationFrame(gameLoop);  // cycle game, aka recursion
    }

    // Window resize
    window.addEventListener('resize', function () {
        GameEnv.setGameEnv();  // Update GameEnv dimensions

        // Call the sizing method on all game objects
        for (var gameObj of GameObject.gameObjectArray){
            gameObj.size();
        }
    });

    // Toggle "canvas filter property" between alien and normal
    var isFilterEnabled = true;
    const defaultFilter = getComputedStyle(document.documentElement).getPropertyValue('--default-canvas-filter');
    toggleCanvasEffect.addEventListener("click", function () {
        for (var gameObj of GameObject.gameObjectArray){
            if (isFilterEnabled) {  // toggle off
                gameObj.canvas.style.filter = "none";  // remove filter
            } else { // toggle on
                gameObj.canvas.style.filter = defaultFilter;  // remove filter
            }
        }
        isFilterEnabled = !isFilterEnabled;  // switch boolean value
    });
  

    // Setup and store Game Objects
    async function setupGame() {   
        try {
            // Open image files for Game Objects
            const [backgroundImg, platformImg, dogImg, monkeyImg] = await Promise.all([
                loadImage('{{backgroundFile}}'),
                loadImage('{{platformFile}}'),
                loadImage('{{dogSpriteImage}}'),
                loadImage('{{monkeySpriteImage}}'),
            ]);

            // Setup Globals
            GameEnv.gameSpeed = 2;
            GameEnv.gravity = 3;

            // Prepare HTML with Background Canvas
            const backgroundCanvas = document.createElement("canvas");
            backgroundCanvas.id = "background";
            document.querySelector("#canvasContainer").appendChild(backgroundCanvas);
            // Background object
            const backgroundSpeedRatio = 0.2
            new Background(backgroundCanvas, backgroundImg, backgroundSpeedRatio);

            // Prepare HTML with Platform Canvas
            const platformCanvas = document.createElement("canvas");
            platformCanvas.id = "platform";
            document.querySelector("#canvasContainer").appendChild(platformCanvas);
            // Platform object
            const platformSpeedRatio = 0.2;
            initPlatform(platformCanvas, platformImg, platformSpeedRatio);

            // Prepare HTML with Dog Canvas
            const dogCanvas = document.createElement("canvas");
            dogCanvas.id = "characters";
            document.querySelector("#canvasContainer").appendChild(dogCanvas);
            // Dog object
            const dogSpeedRatio = 0.2
            initDog(dogCanvas, dogImg, dogSpeedRatio, document.getElementById("controls"));

            // Prepare HTML with Monkey Canvas
            const monkeyCanvas = document.createElement("canvas");
            monkeyCanvas.id = "characters";
            document.querySelector("#canvasContainer").appendChild(monkeyCanvas);
            // Monkey object
            const monkeySpeedRatio = 0.7
            initMonkey(monkeyCanvas, monkeyImg, monkeySpeedRatio);              
 
            //var platform = new Platform(0, GameEnv.bottom - 50, GameEnv.innerWidth, 10);
        
        // Trap errors on failed image loads
        } catch (error) {
            console.error('Failed to load one or more images:', error);
        }
    }
  
    // Call and wait for Game Objects to be ready
    await setupGame();

    // Trigger a resize at start up
    window.dispatchEvent(new Event('resize'));

    // Start the game
    gameLoop();

[jm1021]

Addressed issues and restructured code.

[jm1021]

It is believe we can adequately train students to add to and strip down from this code to make there own environment leveraging off of key Class definitions made in project.