Architecture implemented.
This commit is contained in:
parent
fb762d1778
commit
388799c97e
|
@ -10,6 +10,7 @@ export default class Movable
|
|||
};
|
||||
this.position = new GeometryPoint();
|
||||
this.speed = speed;
|
||||
this.fallSpeed = 0;
|
||||
}
|
||||
|
||||
playAnimation(animation, timestamp)
|
||||
|
@ -33,6 +34,11 @@ export default class Movable
|
|||
this.position.x += this.speed * delta;
|
||||
}
|
||||
|
||||
getRect()
|
||||
{
|
||||
return this.animations[this.currentAnimation].getRect();
|
||||
}
|
||||
|
||||
draw(context)
|
||||
{
|
||||
this.animations[this.currentAnimation].setFootPosition(this.position.x, this.position.y);
|
||||
|
|
15
js/module.js
15
js/module.js
|
@ -1,6 +1,7 @@
|
|||
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';
|
||||
|
@ -56,6 +57,7 @@ function MainLoop(timestamp)
|
|||
|
||||
ground.draw(context);
|
||||
mrCroc.draw(context);
|
||||
architecture.draw(context);
|
||||
lastRendered = timestamp;
|
||||
}
|
||||
|
||||
|
@ -68,10 +70,12 @@ const FPS = 60;
|
|||
const FRAME_DURATION = 1000 / FPS;
|
||||
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 lastTimestamp = undefined;
|
||||
let context;
|
||||
let ground, mrCroc;
|
||||
let ground, mrCroc, architecture;
|
||||
|
||||
let KeyLeft = new Key('ArrowLeft');
|
||||
let KeyRight = new Key('ArrowRight');
|
||||
|
@ -94,10 +98,13 @@ let imgBackground = new Image();
|
|||
imgBackground.src = 'graphics/ground.jpg';
|
||||
loader.addImage(imgBackground);
|
||||
|
||||
let imgArch = new Image();
|
||||
imgArch.src = 'graphics/tileset.png';
|
||||
loader.addImage(imgArch);
|
||||
|
||||
window.addEventListener(
|
||||
'imagesloaded',
|
||||
() => {
|
||||
console.log('Loaded');
|
||||
ground = new RetroSprite('graphics/ground.jpg', 4);
|
||||
ground.position.y = window.innerHeight - ground.getRect().height;
|
||||
|
||||
|
@ -107,9 +114,11 @@ window.addEventListener(
|
|||
|
||||
context = canvas.getContext('2d');
|
||||
|
||||
architecture = RetroArchitecture.createFromJson(LEVEL);
|
||||
|
||||
mrCroc = new MrCroc();
|
||||
mrCroc.position.x = 100;
|
||||
mrCroc.position.y = window.innerHeight - ground.getHeight();
|
||||
mrCroc.position.y = 480;
|
||||
ground.draw(context);
|
||||
|
||||
window.requestAnimationFrame(MainLoop);
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import RetroSprite from "./RetroSprite.js";
|
||||
import GeometryRect from "../geometry/GeometryRect.js";
|
||||
|
||||
export default class RetroAnimation extends RetroSprite
|
||||
{
|
||||
|
@ -18,6 +19,10 @@ export default class RetroAnimation extends RetroSprite
|
|||
return this.frameWidth;
|
||||
}
|
||||
|
||||
getRect() {
|
||||
return new GeometryRect(this.position.x, this.position.y, this.frameWidth, this.canvas.height);
|
||||
}
|
||||
|
||||
setFootPosition(x, y) {
|
||||
this.position.x = x - this.frameWidth * 0.5;
|
||||
this.position.y = y - this.canvas.height;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue