mr-crocs-adventures/js/module.js

import Key from "./Key.js";
import MrCroc from "./MrCroc.js";
import RetroArchitecture from "./retro/RetroArchitecture.js";
import FileLoader from "./FileLoader.js";
import GeometryPoint from "./geometry/GeometryPoint.js";

class ImageLoader
{
    images = [];
    numberImagesLoaded = 0;

    update()
    {
        this.numberImagesLoaded++;

        if (this.numberImagesLoaded === this.images.length) {
            window.dispatchEvent(new Event('imagesloaded'));
        }
    }

    getCurrentProgress()
    {
        return this.numberImagesLoaded / this.images.length;
    }

    addImage(image)
    {
        image.addEventListener(
            'load', () => {
                this.update();1
            }
        );

        this.images.push(image);
    }
}

function MainLoop(timestamp)
{
    if (lastRendered === undefined && lastTimestamp === undefined) {
        lastRendered = timestamp;
        lastTimestamp = timestamp;
    }

    let delta = (timestamp - lastTimestamp) / (10 / GAME_SPEED);

    if (KeyLeft.isPressed()) {
        mrCroc.moveLeft(timestamp, delta);
    } else if (KeyRight.isPressed()) {
        mrCroc.moveRight(timestamp, delta);
    }

    lastGroundHeight = Math.min(
        architecture.getGroundHeight(mrCroc.getPositionFootLeft()),
        architecture.getGroundHeight(mrCroc.getPositionFootRight())
    );

    mrCroc.position.y += mrCroc.fallSpeed;

    groundHeight = Math.min(
        architecture.getGroundHeight(mrCroc.getPositionFootLeft()),
        architecture.getGroundHeight(mrCroc.getPositionFootRight())
    );

    if (mrCroc.position.y < lastGroundHeight) {
        mrCroc.fallSpeed += GRAVITY * delta;
    }
    /*

    if (architecture.hasRectCollision(mrCroc.getRect())) {
        mrCroc.position.x = lastPosition.x;
    }
    let archIntersections = architecture.getCollisionRects(mrCroc.getRect());

    let width = archIntersections.getUniqueWidth();

    if (width !== null) {
        if (width.x === mrCroc.position.x) {
            mrCroc.position.x += width.width;
        } else {
            mrCroc.position.x = width.x - mrCroc.getRect().width;
        }
    }

    */

    if (mrCroc.position.y !== lastGroundHeight) {
        if (lastGroundHeight < groundHeight) {
            mrCroc.position.y = lastGroundHeight;
            mrCroc.fallSpeed = 0;
        } else {
            mrCroc.fallSpeed += GRAVITY * delta;
        }
    } else {
        if (!mrCroc.isJumping && mrCroc.fallSpeed === 0 && KeyJump.isPressed()) {
            mrCroc.jump();
        } else if (!KeyJump.isPressed()) {
            mrCroc.isJumping = false;
        }
    }

    if (timestamp - lastRendered >= FRAME_DURATION) {
        context.clearRect(0, 0, window.innerWidth, window.innerHeight);
        architecture.draw(context);
        mrCroc.draw(context);
        lastRendered = timestamp;
    }

    lastTimestamp = timestamp;

    window.requestAnimationFrame(MainLoop);
}

const FPS = 60;
const FRAME_DURATION = 1000 / FPS;
const GAME_SPEED = 1;
const GRAVITY = 1;

let levelJson = new FileLoader('levels/test.json');
const LEVEL = levelJson.getContent();

console.log(LEVEL);

let lastRendered = undefined;
let lastTimestamp = undefined;
let groundHeight = undefined;
let lastGroundHeight = undefined;
let context;
let mrCroc, architecture;

let KeyLeft = new Key('ArrowLeft');
let KeyRight = new Key('ArrowRight');
let KeyJump = new Key('Space');

let loader = new ImageLoader();

let image = new Image();
image.src = 'graphics/mr-croc-stand.png';
loader.addImage(image);

let imgAnimation = new Image();
imgAnimation.src = 'graphics/mr-croc-walk-right.png';
loader.addImage(imgAnimation);

let imgAnimationB = new Image();
imgAnimationB.src = 'graphics/mr-croc-walk-left.png';
loader.addImage(imgAnimationB);

let imgBackground = new Image();
imgBackground.src = 'graphics/ground.jpg';
loader.addImage(imgBackground);

let imgArch = new Image();
imgArch.src = 'graphics/maria-world.jpg';
loader.addImage(imgArch);

window.addEventListener(
    'imagesloaded',
    () => {
        let canvas = document.getElementById('canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        context = canvas.getContext('2d');

        architecture = RetroArchitecture.createFromJson(LEVEL);

        mrCroc = new MrCroc();
        mrCroc.position.x = 300;
        mrCroc.position.y = 100;

        architecture.draw(context);
        mrCroc.draw(context);

        window.requestAnimationFrame(MainLoop);
    }
);