Mal/mr-crocs-adventures
1
0
Fork 0
mirror of https://git.leinelab.org/Mal/mr-crocs-adventures.git synced 2025-09-11 02:57:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

Graveyard terrain and background tiles implemented

Browse Source
This commit is contained in:
Mal
2025-05-16 23:08:35 +02:00
parent e97c04ed19
commit fc990c12aa
25 changed files with 504 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
js/Game.js
View File

@@ -69,8 +69,8 @@ export class Game
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.mrCroc.draw(this.context, this.camera);
for (const effect of this.level.fullscreenEffects) {
effect.update(timestamp);
@@ -238,9 +238,9 @@ export class Game
this.isPaused = false;
for (const effect of this.level.fullscreenEffects) {
effect.init();
}
for (const effect of this.level.fullscreenEffects) {
effect.init();
}
window.requestAnimationFrame(loopFunction);
}

24
js/GraphicSet.js
View File

@@ -1,4 +1,4 @@
let GraphicSet = [
const GraphicSet = [
{
name: 'Nature',
tileset: 'landscape01.jpg',
@@ -9,6 +9,7 @@ let GraphicSet = [
tilePreview: 5,
primaryTiles: 8,
gravity: 9.806,
tilesetBackground: null,
},
{
name: 'Moon',
@@ -20,6 +21,7 @@ let GraphicSet = [
tilePreview: 1,
primaryTiles: 2,
gravity: 2.4515,
tilesetBackground: null,
},
{
name: 'Death Star',
@@ -31,6 +33,7 @@ let GraphicSet = [
tilePreview: 3,
primaryTiles: 6,
gravity: 9.806,
tilesetBackground: null,
},
{
name: 'Nature 2.0',
@@ -42,6 +45,7 @@ let GraphicSet = [
tilePreview: 46,
primaryTiles: 3,
gravity: 9.806,
tilesetBackground: null,
},
{
name: 'Io',
@@ -53,6 +57,7 @@ let GraphicSet = [
tilePreview: 2,
primaryTiles: 6,
gravity: 1.796,
tilesetBackground: null,
},
{
name: 'Southpole',
@@ -64,7 +69,24 @@ let GraphicSet = [
tilePreview: 2,
primaryTiles: 7,
gravity: 9.806,
tilesetBackground: null,
},
{
name: 'Graveyard',
tileset: 'graveyard.png',
tiles: 304,
scale: 1,
backgroundColor: '#000000',
backgroundImage: 'background-graveyard.jpg',
tilePreview: 2,
primaryTiles: 19,
gravity: 9.806,
tilesetBackground: {
path: 'graveyard-background.png',
tiles: 2,
scale: 1,
}
}
];
export default GraphicSet;

23
js/Level.js
View File

@@ -6,10 +6,15 @@ export default class Level
{
static FACTOR_GRAVITY = 4.903;
/**
* @param {Terrain} terrain
*/
constructor(terrain)
{
/** @type {Terrain} */
this.terrain = terrain;
this.fullscreenEffects = [];
this.fullscreenEffects = [];
this.gravity = 2.0;
}
@@ -78,7 +83,7 @@ export default class Level
this.gravity = gravity;
}
static createFromFile(filename, callback = () => {})
static createFromFile(filename, onLoad = () => {})
{
let loader = new FileLoader(filename);
loader.onLoad = (data) => {
@@ -86,6 +91,12 @@ export default class Level
const level = new Level(Terrain.createFromJson(json));
level.setGravity(json.gravity / Level.FACTOR_GRAVITY);
for (const oldEffect of level.fullscreenEffects) {
oldEffect.destroy();
}
level.fullscreenEffects = [];
if (json.hasOwnProperty('effects')) {
const effectFactory = new FullscreenEffectFactory();
@@ -96,7 +107,7 @@ export default class Level
}
}
callback(level);
onLoad(level);
}
loader.loadContent();
}
@@ -109,6 +120,12 @@ export default class Level
const level = new Level(terrain);
level.setGravity(data.gravity / Level.FACTOR_GRAVITY);
for (const oldEffect of level.fullscreenEffects) {
oldEffect.destroy();
}
level.fullscreenEffects = [];
if (data.hasOwnProperty('effects')) {
const effectFactory = new FullscreenEffectFactory();

4
js/effects/FullscreenEffect.js
View File

@@ -11,6 +11,10 @@ export class FullscreenEffect
{
}
destroy()
{
}
update(timestamp)
{
}

8
js/effects/RainEffect.js
View File

@@ -48,4 +48,12 @@ export class RainEffect extends FullscreenEffect
}
}
}
destroy()
{
super.destroy();
this.sound.pause();
this.sound.remove();
}
}

8
js/effects/SnowEffect.js
View File

@@ -48,4 +48,12 @@ export class SnowEffect extends FullscreenEffect
}
}
}
destroy()
{
super.destroy();
this.audio.pause();
this.audio.remove();
}
}

15
js/effects/ThunderstormEffect.js
View File

@@ -18,6 +18,7 @@ export class ThunderstormEffect extends FullscreenEffect
new Audio('js/effects/thunder04.mp3'),
];
this.currentSound = 0;
this.isActive = true;
}
shuffleSounds(iterations = 10)
@@ -60,6 +61,10 @@ export class ThunderstormEffect extends FullscreenEffect
setTimeout(
() => {
if (!this.isActive) {
return;
}
if (this.currentSound === 0) {
this.shuffleSounds();
}
@@ -85,4 +90,14 @@ export class ThunderstormEffect extends FullscreenEffect
context.fillStyle = 'rgba(255, 255, 255, ' + this.currentAlpha + ')';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}
destroy()
{
this.isActive = false;
for (const sound of this.sounds) {
sound.pause();
sound.remove();
}
}
}

4
js/module.js
View File

@@ -75,6 +75,10 @@ function loadLevel(level)
if (graphicSet.backgroundImage !== null) {
loader.addImage(Setting.GRAPHICS_LOCATION + graphicSet.backgroundImage);
}
if (graphicSet.tilesetBackground !== null) {
loader.addImage(Setting.TILESET_LOCATION + graphicSet.tilesetBackground.path);
}
}
loader.load();

138
js/retro/RetroArchitecture.js
View File

@@ -5,24 +5,69 @@ import GeometryPoint from "../geometry/GeometryPoint.js";
import GeometryRect from "../geometry/GeometryRect.js";
import GraphicSet from "../GraphicSet.js";
import Setting from "../Setting.js";
import Camera from "../Camera.js";
import Level from "../Level.js";
export default class RetroArchitecture
{
constructor(tilesetSprite, tiles, columns, rows)
/**
* @param {{sprite: RetroSprite, tiles: number}} retroTileset
* @param {number} columns
* @param {number} rows
* @param {{sprite: RetroSprite, tiles: number}} retroTilesetBackground
*/
constructor(retroTileset, columns, rows, retroTilesetBackground = null)
{
this.tilesetSprite = tilesetSprite;
this.tiles = tiles;
/** @type {RetroSprite} */
this.tilesetSprite = retroTileset.sprite;
/** @type {RetroSprite|null} */
this.tilesetSpriteBackground = retroTilesetBackground !== null
? retroTilesetBackground.sprite
: null;
/** @type {number} */
this.tiles = retroTileset.tiles;
/** @type {number} */
this.tilesBackground = retroTilesetBackground !== null
? retroTilesetBackground.tiles
: 0;
/** @type {string|null} */
this.backgroundColor = null;
/** @type {string|null} */
this.backgroundImage = null;
/** @type {number} */
this.rows = rows;
/** @type {number} */
this.columns = columns;
/** @type {Array<Array<RetroArchitectureTile>>} */
this.matrix = [];
/** @type {number} */
this.tileWidth = this.tilesetSprite.getWidth() / this.tiles;
/** @type {number} */
this.tileHeight = this.tilesetSprite.getHeight();
/** @type {number} */
this.startX = 0;
/** @type {number} */
this.startY = 0;
/** @type {number} */
this.targetX = 0;
/** @type {number} */
this.targetY = 0;
/** @type {GeometryPoint} */
this.targetPosition = new GeometryPoint(this.targetX, this.targetY);
this.init();
@@ -41,16 +86,26 @@ export default class RetroArchitecture
}
}
/**
* @param {string|null} color
*/
setBackgroundColor(color)
{
this.backgroundColor = color;
}
/**
* @param {string|null} image
*/
setBackgroundImage(image)
{
this.backgroundImage = image;
}
/**
* @param {GeometryRect} rect
* @returns {GeometryRectCollection}
*/
getCollisionRects(rect)
{
let posX = Math.floor(rect.position.x / this.tileWidth) - 2;
@@ -62,11 +117,16 @@ export default class RetroArchitecture
for (let y = Math.max(0, posY); y < rangeY; y++) {
for (let x = Math.max(0, posX); x < rangeX; x++) {
if (y < this.matrix.length && x < this.matrix[y].length && this.matrix[y][x] !== null) {
if (
y < this.matrix.length &&
x < this.matrix[y].length &&
this.matrix[y][x] !== null && this.matrix[y][x].tile.index > -1
) {
let intersection = this.matrix[y][x].rect.getRectIntersection(rect);
if (intersection !== null) {
collection.addRect(intersection);
}
}
}
}
}
@@ -83,7 +143,7 @@ export default class RetroArchitecture
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] !== null && this.matrix[y][x].tile.index > -1) {
if (this.matrix[y][x].rect.getRectIntersection(rect) !== null) {
return true;
}
@@ -111,7 +171,10 @@ export default class RetroArchitecture
let tilePosition = this.getTileForPosition(position, 0);
while (tilePosition !== null && tilePosition.y > 0) {
if (this.matrix[tilePosition.y][tilePosition.x] !== null) {
if (
this.matrix[tilePosition.y][tilePosition.x] !== null &&
this.matrix[tilePosition.y][tilePosition.x].tile.index > -1
) {
return tilePosition.y * this.tileHeight + this.tileHeight;
}
@@ -126,7 +189,10 @@ export default class RetroArchitecture
let tilePosition = this.getTileForPosition(position);
while (tilePosition !== null && tilePosition.y < this.rows) {
if (this.matrix[tilePosition.y][tilePosition.x] !== null) {
if (
this.matrix[tilePosition.y][tilePosition.x] !== null &&
this.matrix[tilePosition.y][tilePosition.x].tile.index > -1
) {
return tilePosition.y * this.tileHeight;
}
@@ -141,7 +207,10 @@ export default class RetroArchitecture
let tilePosition = this.getTileForPosition(new GeometryPoint(position.x, position.y), 1, 0);
while (tilePosition !== null && tilePosition.x < this.columns) {
if (this.matrix[tilePosition.y][tilePosition.x] !== null) {
if (
this.matrix[tilePosition.y][tilePosition.x] !== null &&
this.matrix[tilePosition.y][tilePosition.x].tile.index > -1
) {
return tilePosition.x * this.tileWidth;
}
@@ -156,7 +225,10 @@ export default class RetroArchitecture
let tilePosition = this.getTileForPosition(new GeometryPoint(position.x, position.y), -1,0);
while (tilePosition !== null && tilePosition.x > 0) {
if (this.matrix[tilePosition.y][tilePosition.x] !== null) {
if (
this.matrix[tilePosition.y][tilePosition.x] !== null &&
this.matrix[tilePosition.y][tilePosition.x].tile.index > -1
) {
return tilePosition.x * this.tileWidth + this.tileWidth;
}
@@ -183,8 +255,8 @@ export default class RetroArchitecture
setMovableToTargetPosition(movable)
{
movable.position.x = this.tileWidth * this.targetX + this.tileWidth * 0.5;
movable.position.y = this.tileHeight * this.targetY + this.tileHeight;
movable.position.x = this.tileWidth * this.targetX + this.tileWidth * 0.5;
movable.position.y = this.tileHeight * this.targetY + this.tileHeight;
}
isMovableInsideTargetPosition(movable)
@@ -213,8 +285,14 @@ export default class RetroArchitecture
for (let x = viewX; x < viewWidth; x++) {
let field = this.matrix[y][x];
if (field !== null) {
if (field === null || field.tile.index === -1) {
continue;
}
if (field.tile.index > -1) {
this.drawField(context, x, y, camera, field);
} else {
this.drawBackgroundField(context, x, y, camera, field);
}
}
}
@@ -235,25 +313,47 @@ export default class RetroArchitecture
);
}
drawBackgroundField(context, x, y, camera, field)
{
context.drawImage(
this.tilesetSpriteBackground.canvas,
-(field.tile.index % 2) * this.tileWidth,
0,
this.tileWidth,
this.tileHeight,
Math.round(x * this.tileWidth - camera.position.x),
Math.round(y * this.tileHeight - camera.position.y),
this.tileWidth,
this.tileHeight,
);
}
getStartPosition()
{
return new GeometryPoint(this.startX * this.tileWidth, this.startY * this.tileHeight);
}
/**
* @param {Level} level
*/
static createFromData(level)
{
let graphicSet = GraphicSet[level.getTilesetId()];
let tileset = new RetroSprite(
const tilesetSprite = new RetroSprite(
Setting.TILESET_LOCATION + graphicSet.tileset,
graphicSet.scale
);
let architecture = new RetroArchitecture(
tileset,
graphicSet.tiles,
const tilesetBackground = level.terrain.tileset.background !== null
? new RetroSprite(level.terrain.tileset.background.image.src)
: null;
const architecture = new RetroArchitecture(
{sprite: tilesetSprite, tiles: graphicSet.tiles},
level.getColumns(),
level.getRows()
level.getRows(),
tilesetBackground === null ? null : {sprite: tilesetBackground, tiles: level.terrain.tileset.background.tiles}
);
architecture.setBackgroundColor(graphicSet.backgroundColor);
@@ -267,7 +367,7 @@ export default class RetroArchitecture
for (let y = 0; y < level.getRows(); y++) {
for (let x = 0; x < level.getColumns(); x++) {
if (level.getTilesetMatrix()[y][x].index > -1) {
if (level.getTilesetMatrix()[y][x].index !== -1) {
architecture.matrix[y][x] = new RetroArchitectureTile(
level.getTilesetMatrix()[y][x],
x * architecture.tileWidth,