mirror of
https://git.leinelab.org/Mal/mr-crocs-adventures.git
synced 2025-09-11 02:57:36 +02:00
Gravity and ground height.
This commit is contained in:
85
js/module.js
85
js/module.js
@@ -1,10 +1,8 @@
|
||||
import RetroSprite from "./retro/RetroSprite.js";
|
||||
import Key from "./Key.js";
|
||||
import MrCroc from "./MrCroc.js";
|
||||
import RetroArchitecture from "./retro/RetroArchitecture.js";
|
||||
|
||||
const MEDIA_READY_EVENT = 'mediaready';
|
||||
const IMAGE_READY_EVENT = 'imgready';
|
||||
import FileLoader from "./FileLoader.js";
|
||||
import GeometryPoint from "./geometry/GeometryPoint.js";
|
||||
|
||||
class ImageLoader
|
||||
{
|
||||
@@ -52,12 +50,59 @@ function MainLoop(timestamp)
|
||||
mrCroc.moveRight(timestamp, delta);
|
||||
}
|
||||
|
||||
if (lastRendered >= FRAME_DURATION) {
|
||||
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
|
||||
lastGroundHeight = Math.min(
|
||||
architecture.getGroundHeight(mrCroc.getPositionFootLeft()),
|
||||
architecture.getGroundHeight(mrCroc.getPositionFootRight())
|
||||
);
|
||||
|
||||
ground.draw(context);
|
||||
mrCroc.draw(context);
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -69,16 +114,23 @@ function MainLoop(timestamp)
|
||||
const FPS = 60;
|
||||
const FRAME_DURATION = 1000 / FPS;
|
||||
const GAME_SPEED = 1;
|
||||
const GRAVITY = 1;
|
||||
|
||||
const LEVEL = '{"tileset": "graphics/tileset.png", "tiles": 1, "scale": 3, "rows": 9, "columns": 16, "matrix": [[0, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 0], [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 0], [null, null, null, null, null, 0, 0, 0, 0, 0, null, null, null, null, null, 0], [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 0], [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null], [0, 0, 0, 0, 0, null, null, null, null, null, null, null, null, null, null, null], [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null], [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null], [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null]]}';
|
||||
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 ground, mrCroc, architecture;
|
||||
let mrCroc, architecture;
|
||||
|
||||
let KeyLeft = new Key('ArrowLeft');
|
||||
let KeyRight = new Key('ArrowRight');
|
||||
let KeyJump = new Key('Space');
|
||||
|
||||
let loader = new ImageLoader();
|
||||
|
||||
@@ -99,15 +151,12 @@ imgBackground.src = 'graphics/ground.jpg';
|
||||
loader.addImage(imgBackground);
|
||||
|
||||
let imgArch = new Image();
|
||||
imgArch.src = 'graphics/tileset.png';
|
||||
imgArch.src = 'graphics/maria-world.jpg';
|
||||
loader.addImage(imgArch);
|
||||
|
||||
window.addEventListener(
|
||||
'imagesloaded',
|
||||
() => {
|
||||
ground = new RetroSprite('graphics/ground.jpg', 4);
|
||||
ground.position.y = window.innerHeight - ground.getRect().height;
|
||||
|
||||
let canvas = document.getElementById('canvas');
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
@@ -117,9 +166,11 @@ window.addEventListener(
|
||||
architecture = RetroArchitecture.createFromJson(LEVEL);
|
||||
|
||||
mrCroc = new MrCroc();
|
||||
mrCroc.position.x = 100;
|
||||
mrCroc.position.y = 480;
|
||||
ground.draw(context);
|
||||
mrCroc.position.x = 300;
|
||||
mrCroc.position.y = 100;
|
||||
|
||||
architecture.draw(context);
|
||||
mrCroc.draw(context);
|
||||
|
||||
window.requestAnimationFrame(MainLoop);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user