Gravity and ground height.

This commit is contained in:
Mal
2020-01-25 13:11:25 +01:00
parent 388799c97e
commit 0cd532f45a
8 changed files with 316 additions and 27 deletions

View File

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