mirror of
https://git.leinelab.org/Mal/mr-crocs-adventures.git
synced 2025-09-11 02:57:36 +02:00
Loading of levels is working now
This commit is contained in:
277
js/module.js
277
js/module.js
@@ -1,235 +1,14 @@
|
||||
'use strict';
|
||||
|
||||
import Key from "./Key.js";
|
||||
import MrCroc from "./MrCroc.js";
|
||||
import RetroArchitecture from "./retro/RetroArchitecture.js";
|
||||
import Camera from "./Camera.js";
|
||||
import Gisela from "./Gisela.js";
|
||||
import Setting from "./Setting.js";
|
||||
import FrameRateMeasurer from "./FrameRateMeasurer.js";
|
||||
import GraphicSet from "./GraphicSet.js";
|
||||
import ImageLoader from "./ImageLoader.js";
|
||||
import Level from "./Level.js";
|
||||
import InterfaceEvent from "./events/InterfaceEvent.js";
|
||||
import UrlParam from "./UrlParam.js";
|
||||
import UserInterface from "./ui/UserInterface.js";
|
||||
import TextMessageGisela from "./ui/TextMessageGisela.js";
|
||||
import TextMessageMrCroc from "./ui/TextMessageMrCroc.js";
|
||||
import {LoadLevelDialog} from "./ui/LoadLevelDialog.js";
|
||||
import {EventBus} from "./events/EventBus.js";
|
||||
import {Game} from "./Game.js";
|
||||
|
||||
class Game
|
||||
{
|
||||
static GAME_SPEED = 1
|
||||
|
||||
constructor(level) {
|
||||
this.level = level;
|
||||
this.fps = 0;
|
||||
this.frameDuration = 0;
|
||||
this.lastRendered = undefined;
|
||||
this.lastTimestamp = undefined;
|
||||
this.canvas = document.getElementById('canvas');
|
||||
this.context = this.canvas.getContext('2d');
|
||||
this.mrCroc = new MrCroc();
|
||||
this.gisela = new Gisela();
|
||||
this.architecture = RetroArchitecture.createFromData(this.level);
|
||||
this.camera = new Camera();
|
||||
this.gameFinished = false;
|
||||
this.hasPlayerLeftArchitecture = false;
|
||||
this.textBoxGameStart = new TextMessageMrCroc('Mr. Croc: "Where is Gisela? I have to find her!"', this.context);
|
||||
this.textBoxGameFinished = new TextMessageGisela(
|
||||
'Gisela: "Thanks for showing up, Mr. Croc, but I\'m not in danger."',
|
||||
this.context
|
||||
);
|
||||
this.userInterface = new UserInterface();
|
||||
this.isPaused = false;
|
||||
|
||||
this.KeyLeft = new Key('ArrowLeft');
|
||||
this.KeyRight = new Key('ArrowRight');
|
||||
this.KeyJump = new Key('Space');
|
||||
this.KeyLoad = new Key('KeyL');
|
||||
|
||||
this.loader = new ImageLoader();
|
||||
this.loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-right.png');
|
||||
this.loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-left.png');
|
||||
this.loader.addImage(Setting.TILESET_LOCATION + GraphicSet[this.level.getTilesetId()].tileset);
|
||||
this.loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-right.png');
|
||||
this.loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-left.png');
|
||||
|
||||
new FrameRateMeasurer();
|
||||
}
|
||||
|
||||
render(timestamp)
|
||||
{
|
||||
if (timestamp - this.lastRendered < this.frameDuration) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.gisela.currentAnimation !== 'LOOK_LEFT' && this.mrCroc.position.x < this.gisela.position.x) {
|
||||
this.gisela.currentAnimation = 'LOOK_LEFT';
|
||||
} else if (this.gisela.currentAnimation !== 'LOOK_RIGHT' && this.mrCroc.position.x >= this.gisela.position.x) {
|
||||
this.gisela.currentAnimation = 'LOOK_RIGHT';
|
||||
}
|
||||
|
||||
this.context.clearRect(0, 0, window.innerWidth, window.innerHeight);
|
||||
this.architecture.draw(this.context, this.camera);
|
||||
this.mrCroc.draw(this.context, this.camera);
|
||||
this.gisela.draw(this.context, this.camera);
|
||||
this.userInterface.draw(this.context);
|
||||
|
||||
this.lastRendered = timestamp;
|
||||
}
|
||||
|
||||
canBeFinished()
|
||||
{
|
||||
return (
|
||||
!this.gameFinished &&
|
||||
this.mrCroc.isJumping === false &&
|
||||
this.architecture.isMovableInsideTargetPosition(this.mrCroc)
|
||||
);
|
||||
}
|
||||
|
||||
handlePhysics(delta, timestamp)
|
||||
{
|
||||
let ceilingHeight = Math.max(
|
||||
this.architecture.getCeilingHeight(this.mrCroc.getPositionHeadLeft()),
|
||||
this.architecture.getCeilingHeight(this.mrCroc.getPositionHeadRight()),
|
||||
);
|
||||
|
||||
let groundHeight = Math.min(
|
||||
this.architecture.getGroundHeight(this.mrCroc.getPositionFootLeft()),
|
||||
this.architecture.getGroundHeight(this.mrCroc.getPositionFootRight())
|
||||
);
|
||||
|
||||
/* Handle falling */
|
||||
this.mrCroc.position.y += this.mrCroc.fallSpeed;
|
||||
this.mrCroc.fallSpeed += this.level.gravity * delta;
|
||||
|
||||
/* Handle ground collision */
|
||||
if (this.mrCroc.position.y > groundHeight && this.mrCroc.fallSpeed > 0) {
|
||||
this.mrCroc.position.y = groundHeight;
|
||||
this.mrCroc.fallSpeed = 0;
|
||||
}
|
||||
|
||||
/* Handle ceiling collision */
|
||||
if (this.mrCroc.position.y - this.mrCroc.getHeight() <= ceilingHeight) {
|
||||
this.mrCroc.fallSpeed = 0;
|
||||
this.mrCroc.position.y = ceilingHeight + this.mrCroc.getHeight() + 1;
|
||||
}
|
||||
|
||||
this.handlePlayerMovement(delta, timestamp, groundHeight);
|
||||
}
|
||||
|
||||
updateCamera()
|
||||
{
|
||||
this.camera.focusPosition(
|
||||
this.mrCroc.position.x - this.mrCroc.getWidth() * 0.5,
|
||||
this.mrCroc.position.y - this.mrCroc.getHeight() * 0.5,
|
||||
20
|
||||
);
|
||||
this.camera.lockCameraIntoBorders();
|
||||
}
|
||||
|
||||
handlePlayerMovement(delta, timestamp, groundHeight)
|
||||
{
|
||||
/* Jumping */
|
||||
if (!this.mrCroc.isJumping && this.mrCroc.fallSpeed === 0 && this.mrCroc.position.y === groundHeight && this.KeyJump.isPressed()) {
|
||||
this.mrCroc.jump();
|
||||
} else if (!this.KeyJump.isPressed()) {
|
||||
this.mrCroc.isJumping = false;
|
||||
}
|
||||
|
||||
/* Movement left and right */
|
||||
if (!this.hasPlayerLeftArchitecture && this.KeyLeft.isPressed()) {
|
||||
let lastWallLeft = Math.min(
|
||||
this.architecture.getWallLeft(this.mrCroc.getPositionHeadLeft()),
|
||||
this.architecture.getWallLeft(this.mrCroc.getPositionFootLeft())
|
||||
);
|
||||
|
||||
this.mrCroc.moveLeft(timestamp, delta);
|
||||
|
||||
if (this.mrCroc.position.x <= lastWallLeft + this.mrCroc.getWidth() * 0.5) {
|
||||
this.mrCroc.position.x = lastWallLeft + this.mrCroc.getWidth() * 0.5 + 1;
|
||||
}
|
||||
} else if (!this.hasPlayerLeftArchitecture && this.KeyRight.isPressed()) {
|
||||
let lastWallRight = Math.max(
|
||||
this.architecture.getWallRight(this.mrCroc.getPositionHeadRight()),
|
||||
this.architecture.getWallRight(this.mrCroc.getPositionFootRight())
|
||||
);
|
||||
|
||||
this.mrCroc.moveRight(timestamp, delta);
|
||||
|
||||
if (this.mrCroc.position.x >= lastWallRight - this.mrCroc.getWidth() * 0.5) {
|
||||
this.mrCroc.position.x = lastWallRight - this.mrCroc.getWidth() * 0.5 - 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.hasPlayerLeftArchitecture && !this.architecture.isInsideArchitecture(this.mrCroc.position)) {
|
||||
this.hasPlayerLeftArchitecture = true;
|
||||
|
||||
setTimeout(
|
||||
() => {
|
||||
this.architecture.setMovableToStartPosition(this.mrCroc);
|
||||
this.hasPlayerLeftArchitecture = false;
|
||||
}, 2000
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
finish()
|
||||
{
|
||||
this.gameFinished = true;
|
||||
this.KeyLeft.pressed = false;
|
||||
this.KeyRight.pressed = false;
|
||||
this.KeyJump.pressed = false;
|
||||
this.lastTimestamp = undefined;
|
||||
this.lastRendered = undefined;
|
||||
this.textBoxGameFinished.updateLines(window.innerWidth - 40, this.context);
|
||||
this.textBoxGameFinished.animate(75);
|
||||
this.userInterface.addTextBox(this.textBoxGameFinished);
|
||||
}
|
||||
|
||||
init(loopFunction) {
|
||||
this.canvas.width = window.innerWidth;
|
||||
this.canvas.height = window.innerHeight;
|
||||
this.canvas.style.backgroundAttachment = 'fixed';
|
||||
this.canvas.style.backgroundSize = 'cover';
|
||||
this.canvas.style.backgroundPosition = 'center center';
|
||||
|
||||
if (GraphicSet[this.level.getTilesetId()].backgroundImage !== null) {
|
||||
this.canvas.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[this.level.getTilesetId()].backgroundImage +'")';
|
||||
}
|
||||
|
||||
this.canvas.style.backgroundColor = this.level.getBackgroundColor();
|
||||
|
||||
window.addEventListener(
|
||||
'resize',
|
||||
function () {
|
||||
this.canvas.width = window.innerWidth;
|
||||
this.canvas.height = window.innerHeight;
|
||||
}
|
||||
);
|
||||
|
||||
this.textBoxGameStart.animate(75, 1000);
|
||||
this.textBoxGameStart.show(1000);
|
||||
this.textBoxGameStart.hide(10000);
|
||||
this.userInterface.addTextBox(this.textBoxGameStart);
|
||||
|
||||
this.camera.borderRight = this.architecture.columns * this.architecture.tileWidth;
|
||||
this.camera.borderBottom = this.architecture.rows * this.architecture.tileHeight;
|
||||
|
||||
this.architecture.setMovableToStartPosition(this.mrCroc);
|
||||
this.architecture.setMovableToTargetPosition(this.gisela);
|
||||
|
||||
window.addEventListener(
|
||||
InterfaceEvent.FRAME_RATE_MEASURED,
|
||||
(event) => {
|
||||
this.fps = event.frameRate;
|
||||
this.frameDuration = 1000.0 / this.fps;
|
||||
window.requestAnimationFrame(loopFunction);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mainLoop(timestamp)
|
||||
{
|
||||
@@ -261,8 +40,8 @@ function mainLoop(timestamp)
|
||||
window.requestAnimationFrame(mainLoop);
|
||||
}
|
||||
dialog.onLoad = (data) => {
|
||||
game = new Game(Level.createFromJson(data));
|
||||
game.init();
|
||||
EventBus.clear();
|
||||
loadLevel(Level.createFromJson(data));
|
||||
}
|
||||
|
||||
game.isPaused = true;
|
||||
@@ -271,6 +50,34 @@ function mainLoop(timestamp)
|
||||
window.requestAnimationFrame(mainLoop);
|
||||
}
|
||||
|
||||
function loadLevel(level)
|
||||
{
|
||||
const loader = new ImageLoader();
|
||||
loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-right.png');
|
||||
loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-left.png');
|
||||
loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-right.png');
|
||||
loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-left.png');
|
||||
loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-left.png');
|
||||
|
||||
for (const graphicSet of GraphicSet) {
|
||||
loader.addImage(Setting.TILESET_LOCATION + graphicSet.tileset);
|
||||
|
||||
if (graphicSet.backgroundImage !== null) {
|
||||
loader.addImage(Setting.GRAPHICS_LOCATION + graphicSet.backgroundImage);
|
||||
}
|
||||
}
|
||||
|
||||
loader.load();
|
||||
|
||||
EventBus.addEventListener(
|
||||
'imagesloaded',
|
||||
() => {
|
||||
game = new Game(level);
|
||||
game.init(mainLoop);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const LEVEL = [
|
||||
'level01.json',
|
||||
'moon.json',
|
||||
@@ -278,19 +85,13 @@ const LEVEL = [
|
||||
'terrain8.json',
|
||||
];
|
||||
|
||||
let game;
|
||||
|
||||
const urlGetter = new UrlParam();
|
||||
|
||||
const levelIndex = urlGetter.getInt('level');
|
||||
const level = Level.createFromFile(
|
||||
Setting.LEVELS_LOCATION + LEVEL[levelIndex < 0 || levelIndex >= LEVEL.length ? 0 : levelIndex]
|
||||
|
||||
loadLevel(
|
||||
Level.createFromFile(
|
||||
Setting.LEVELS_LOCATION + LEVEL[levelIndex < 0 || levelIndex >= LEVEL.length ? 0 : levelIndex]
|
||||
)
|
||||
);
|
||||
|
||||
let game = new Game(level);
|
||||
|
||||
window.addEventListener(
|
||||
'imagesloaded',
|
||||
() => {
|
||||
game.init(mainLoop);
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user