Architecture implemented.

This commit is contained in:
Mal 2020-01-23 23:09:03 +01:00
parent fb762d1778
commit 388799c97e
5 changed files with 158 additions and 3 deletions

View File

@ -10,6 +10,7 @@ export default class Movable
}; };
this.position = new GeometryPoint(); this.position = new GeometryPoint();
this.speed = speed; this.speed = speed;
this.fallSpeed = 0;
} }
playAnimation(animation, timestamp) playAnimation(animation, timestamp)
@ -33,6 +34,11 @@ export default class Movable
this.position.x += this.speed * delta; this.position.x += this.speed * delta;
} }
getRect()
{
return this.animations[this.currentAnimation].getRect();
}
draw(context) draw(context)
{ {
this.animations[this.currentAnimation].setFootPosition(this.position.x, this.position.y); this.animations[this.currentAnimation].setFootPosition(this.position.x, this.position.y);

View File

@ -1,6 +1,7 @@
import RetroSprite from "./retro/RetroSprite.js"; import RetroSprite from "./retro/RetroSprite.js";
import Key from "./Key.js"; import Key from "./Key.js";
import MrCroc from "./MrCroc.js"; import MrCroc from "./MrCroc.js";
import RetroArchitecture from "./retro/RetroArchitecture.js";
const MEDIA_READY_EVENT = 'mediaready'; const MEDIA_READY_EVENT = 'mediaready';
const IMAGE_READY_EVENT = 'imgready'; const IMAGE_READY_EVENT = 'imgready';
@ -56,6 +57,7 @@ function MainLoop(timestamp)
ground.draw(context); ground.draw(context);
mrCroc.draw(context); mrCroc.draw(context);
architecture.draw(context);
lastRendered = timestamp; lastRendered = timestamp;
} }
@ -68,10 +70,12 @@ const FPS = 60;
const FRAME_DURATION = 1000 / FPS; const FRAME_DURATION = 1000 / FPS;
const GAME_SPEED = 1; const GAME_SPEED = 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 lastRendered = undefined; let lastRendered = undefined;
let lastTimestamp = undefined; let lastTimestamp = undefined;
let context; let context;
let ground, mrCroc; let ground, mrCroc, architecture;
let KeyLeft = new Key('ArrowLeft'); let KeyLeft = new Key('ArrowLeft');
let KeyRight = new Key('ArrowRight'); let KeyRight = new Key('ArrowRight');
@ -94,10 +98,13 @@ let imgBackground = new Image();
imgBackground.src = 'graphics/ground.jpg'; imgBackground.src = 'graphics/ground.jpg';
loader.addImage(imgBackground); loader.addImage(imgBackground);
let imgArch = new Image();
imgArch.src = 'graphics/tileset.png';
loader.addImage(imgArch);
window.addEventListener( window.addEventListener(
'imagesloaded', 'imagesloaded',
() => { () => {
console.log('Loaded');
ground = new RetroSprite('graphics/ground.jpg', 4); ground = new RetroSprite('graphics/ground.jpg', 4);
ground.position.y = window.innerHeight - ground.getRect().height; ground.position.y = window.innerHeight - ground.getRect().height;
@ -107,9 +114,11 @@ window.addEventListener(
context = canvas.getContext('2d'); context = canvas.getContext('2d');
architecture = RetroArchitecture.createFromJson(LEVEL);
mrCroc = new MrCroc(); mrCroc = new MrCroc();
mrCroc.position.x = 100; mrCroc.position.x = 100;
mrCroc.position.y = window.innerHeight - ground.getHeight(); mrCroc.position.y = 480;
ground.draw(context); ground.draw(context);
window.requestAnimationFrame(MainLoop); window.requestAnimationFrame(MainLoop);

View File

@ -1,4 +1,5 @@
import RetroSprite from "./RetroSprite.js"; import RetroSprite from "./RetroSprite.js";
import GeometryRect from "../geometry/GeometryRect.js";
export default class RetroAnimation extends RetroSprite export default class RetroAnimation extends RetroSprite
{ {
@ -18,6 +19,10 @@ export default class RetroAnimation extends RetroSprite
return this.frameWidth; return this.frameWidth;
} }
getRect() {
return new GeometryRect(this.position.x, this.position.y, this.frameWidth, this.canvas.height);
}
setFootPosition(x, y) { setFootPosition(x, y) {
this.position.x = x - this.frameWidth * 0.5; this.position.x = x - this.frameWidth * 0.5;
this.position.y = y - this.canvas.height; this.position.y = y - this.canvas.height;

View File

@ -0,0 +1,126 @@
import RetroSprite from "./RetroSprite.js";
import GeometryRect from "../geometry/GeometryRect.js";
import RetroArchitectureTile from "./RetroArchitectureTile.js";
export default class RetroArchitecture
{
constructor(tilesetSprite, tiles, columns, rows)
{
this.tileset = tilesetSprite;
this.tiles = tiles;
this.rows = rows;
this.columns = columns;
this.matrix = [];
this.tileWidth = this.tileset.getWidth() / this.tiles;
this.tileHeight = this.tileset.getHeight();
this.init();
}
init()
{
for (let y = 0; y < this.rows; y++) {
this.matrix.push(Array(this.columns).fill(null));
}
}
hasRectCollision(rect)
{
let posX = Math.floor(rect.position.x / this.tileWidth) - 2;
let posY = Math.floor(rect.position.y / this.tileHeight) - 2;
let rangeX = parseInt( posX + rect.width / this.tileWidth) + 4;
let rangeY = parseInt(posY + rect.height / this.tileHeight) + 4;
for (let y = Math.max(0, posY); y < rangeY; y++) {
for (let x = Math.max(0, posX); x < rangeX; x++) {
if (this.matrix[y][x] !== null) {
if (this.matrix[y][x].rect.getRectIntersection(rect) !== null) {
return true;
}
}
}
}
return false;
}
getTileForPosition(position)
{
let x = parseInt(position.x / this.tileWidth);
let y = parseInt(position.y / this.tileHeight);
if (x < 0 || x >= this.columns || y < 0 || y >= this.rows) {
return null;
}
return {x: x, y: y};
}
getGroundHeight(position)
{
let tilePosition = this.getTileForPosition(position);
while (tilePosition !== null && tilePosition.y < this.rows) {
if (this.matrix[tilePosition.y][tilePosition.x] !== null) {
return tilePosition.y * this.tileHeight
}
tilePosition.y++;
}
return this.tileHeight * this.rows;
}
draw(context)
{
for (let y = 0; y < this.rows; y++) {
for (let x = 0; x < this.columns; x++) {
let field = this.matrix[y][x];
if (field !== null) {
context.drawImage(
this.tileset.canvas,
field.tile * this.tileWidth,
0,
this.tileWidth,
this.tileHeight,
x * this.tileWidth,
y * this.tileHeight,
this.tileWidth,
this.tileHeight
);
}
}
}
}
static createFromJson(json)
{
let data = JSON.parse(json);
let tileset = new RetroSprite(data.tileset, data.scale);
let architecture = new RetroArchitecture(
tileset,
data.tiles,
data.columns,
data.rows
);
for (let y = 0; y < data.rows; y++) {
for (let x = 0; x < data.columns; x++) {
if (data.matrix[y][x] !== null) {
architecture.matrix[y][x] = new RetroArchitectureTile(
data.matrix[y][x],
x * architecture.tileWidth,
y * architecture.tileHeight,
architecture.tileWidth,
architecture.tileHeight
)
}
}
}
return architecture;
}
}

View File

@ -0,0 +1,9 @@
import GeometryRect from "../geometry/GeometryRect.js";
export default class RetroArchitectureTile
{
constructor(tile, x, y, width, height) {
this.tile = tile;
this.rect = new GeometryRect(x, y, width, height);
}
}