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); } );