Mal/mr-crocs-adventures
Mal/mr-crocs-adventures
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Level class created and gravity editable.

Browse Source
This commit is contained in:
Mal 2020-02-16 00:53:03 +01:00
parent cec3cc726f
commit a7ecbf9d2e
20 changed files with 277 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
js/ImageLoader.js Normal file
View File

@ -0,0 +1,32 @@
export default class ImageLoader
{
images = [];
numberImagesLoaded = 0;
update()
{
this.numberImagesLoaded++;
if (this.numberImagesLoaded === this.images.length) {
window.dispatchEvent(new Event('imagesloaded'));
}
}
getCurrentProgress()
{
return this.numberImagesLoaded / this.images.length;
}
addImage(imagePath)
{
let image = new Image();
image.src = imagePath;
image.addEventListener(
'load', () => {
this.update();
}
);
this.images.push(image);
}
}

87
js/Level.js Normal file
View File

@ -0,0 +1,87 @@
import FileLoader from "./FileLoader.js";
import Terrain from "../tilorswift/js/Terrain.js";
export default class Level
{
constructor(terrain)
{
this.terrain = terrain;
this.gravity = 2.0;
}
getTilesetId()
{
return this.terrain.tileset.setId;
}
getBackgroundColor()
{
return this.terrain.backgroundColor;
}
getBackgroundImage()
{
return this.terrain.backgroundImage;
}
getRows()
{
return this.terrain.tilesY;
}
getColumns()
{
return this.terrain.tilesX;
}
getStartX()
{
return this.terrain.entranceTileX;
}
getStartY()
{
return this.terrain.entranceTileY;
}
getTargetX()
{
return this.terrain.targetTileX;
}
getTargetY()
{
return this.terrain.targetTileY;
}
getTilesetMatrix()
{
return this.terrain.fields;
}
hasEntrancePoint()
{
return this.terrain.hasEntrancePoint();
}
hasTargetPoint()
{
return this.terrain.hasTargetPoint();
}
setGravity(gravity)
{
this.gravity = gravity;
}
static createFromFile(filename)
{
let loader = new FileLoader(filename);
let levelData = JSON.parse(loader.getContent());
let terrain = Terrain.createFromJson(levelData);
let level = new Level(terrain);
level.setGravity(levelData.gravity);
return level;
}
}

0
js/events/ImageCollectionLoadedEvent.js
View File

57
js/module.js
View File

@ -3,45 +3,13 @@
import Key from "./Key.js";
import MrCroc from "./MrCroc.js";
import RetroArchitecture from "./retro/RetroArchitecture.js";
import FileLoader from "./FileLoader.js";
import Camera from "./Camera.js";
import Gisela from "./Gisela.js";
import Setting from "./Setting.js";
import FrameRateMeasurer from "./FrameRateMeasurer.js";
import GraphicSet from "./GraphicSet.js";
class ImageLoader
{
images = [];
numberImagesLoaded = 0;
update()
{
this.numberImagesLoaded++;
if (this.numberImagesLoaded === this.images.length) {
window.dispatchEvent(new Event('imagesloaded'));
}
}
getCurrentProgress()
{
return this.numberImagesLoaded / this.images.length;
}
addImage(imagePath)
{
let image = new Image();
image.src = imagePath;
image.addEventListener(
'load', () => {
this.update();
}
);
this.images.push(image);
}
}
import ImageLoader from "./ImageLoader.js";
import Level from "./Level.js";
function MainLoop(timestamp)
{
@ -155,15 +123,12 @@ function MainLoop(timestamp)
window.requestAnimationFrame(MainLoop);
}
let level = Level.createFromFile('levels/test(2).json');
const GAME_SPEED = 1;
const GRAVITY = 2;
const GRAVITY = level.gravity;
let fps;
let frameDuration;
let levelJson = new FileLoader('levels/level01.json');
const LEVEL = JSON.parse(levelJson.getContent());
let lastRendered = undefined;
let lastTimestamp = undefined;
let context;
@ -180,7 +145,7 @@ let loader = new ImageLoader();
loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-right.png');
loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-left.png');
loader.addImage(Setting.TILESET_LOCATION + GraphicSet[LEVEL.tileset].tileset);
loader.addImage(Setting.TILESET_LOCATION + GraphicSet[level.getTilesetId()].tileset);
loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-right.png');
new FrameRateMeasurer();
@ -195,11 +160,11 @@ window.addEventListener(
canvas.style.backgroundSize = 'cover';
canvas.style.backgroundPosition = 'center center';
if (GraphicSet[LEVEL.tileset].backgroundImage !== null) {
canvas.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[LEVEL.tileset].backgroundImage +'")';
if (GraphicSet[level.getTilesetId()].backgroundImage !== null) {
canvas.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[level.getTilesetId()].backgroundImage +'")';
}
canvas.style.backgroundColor = LEVEL.backgroundColor;
canvas.style.backgroundColor = level.getBackgroundColor();
window.addEventListener(
'resize',
@ -211,7 +176,7 @@ window.addEventListener(
context = canvas.getContext('2d');
architecture = RetroArchitecture.createFromData(LEVEL);
architecture = RetroArchitecture.createFromData(level);
camera.borderRight = architecture.columns * architecture.tileWidth;
camera.borderBottom = architecture.rows * architecture.tileHeight;
@ -221,7 +186,7 @@ window.addEventListener(
gisela = new Gisela();
architecture.setMovableToTargetPosition(gisela);
fps = 120;
fps = 60;
frameDuration = 1000 / fps;
window.requestAnimationFrame(MainLoop);
}

44
js/retro/RetroArchitecture.js
View File

@ -10,15 +10,15 @@ export default class RetroArchitecture
{
constructor(tilesetSprite, tiles, columns, rows)
{
this.tileset = tilesetSprite;
this.tilesetSprite = tilesetSprite;
this.tiles = tiles;
this.backgroundColor = null;
this.backgroundImage = null;
this.rows = rows;
this.columns = columns;
this.matrix = [];
this.tileWidth = this.tileset.getWidth() / this.tiles;
this.tileHeight = this.tileset.getHeight();
this.tileWidth = this.tilesetSprite.getWidth() / this.tiles;
this.tileHeight = this.tilesetSprite.getHeight();
this.startX = 0;
this.startY = 0;
this.targetX = 0;
@ -202,7 +202,7 @@ export default class RetroArchitecture
tileRect.isContainingPoint(movable.getPositionFootRight());
}
draw(context, camera = null)
draw(context, camera = new Camera())
{
let viewX = parseInt(Math.floor(Math.max(0, camera.position.x) / this.tileWidth));
let viewWidth = parseInt(Math.min(Math.ceil(camera.width), this.columns));
@ -213,7 +213,7 @@ export default class RetroArchitecture
for (let x = viewX; x < viewWidth; x++) {
let field = this.matrix[y][x];
if (field !== null && field !== undefined) {
if (field !== null) {
this.drawField(context, x, y, camera, field);
}
}
@ -223,8 +223,8 @@ export default class RetroArchitecture
drawField(context, x, y, camera, field)
{
context.drawImage(
this.tileset.canvas,
field.tile * this.tileWidth,
this.tilesetSprite.canvas,
field.tile.index * this.tileWidth,
0,
this.tileWidth,
this.tileHeight,
@ -235,10 +235,10 @@ export default class RetroArchitecture
);
}
static createFromData(data)
static createFromData(level)
{
let graphicSet = GraphicSet[data.tileset];
console.log(data);
let graphicSet = GraphicSet[level.getTilesetId()];
let tileset = new RetroSprite(
Setting.TILESET_LOCATION + graphicSet.tileset,
graphicSet.scale
@ -247,29 +247,29 @@ export default class RetroArchitecture
let architecture = new RetroArchitecture(
tileset,
graphicSet.tiles,
data.columns,
data.rows
level.getColumns(),
level.getRows()
);
architecture.setBackgroundColor(graphicSet.backgroundColor);
architecture.setBackgroundImage(graphicSet.backgroundImage);
architecture.startX = data.startX;
architecture.startY = data.startY;
architecture.targetX = data.targetX;
architecture.targetY = data.targetY;
architecture.targetPosition = new GeometryPoint(data.targetX, data.targetY);
architecture.startX = level.getStartX();
architecture.startY = level.getStartY();
architecture.targetX = level.getTargetX();
architecture.targetY = level.getTargetY();
architecture.targetPosition = new GeometryPoint(level.getTargetX(), level.getTargetY());
for (let y = 0; y < data.rows; y++) {
for (let x = 0; x < data.columns; x++) {
if (data.matrix[y][x] > -1) {
for (let y = 0; y < level.getRows(); y++) {
for (let x = 0; x < level.getColumns(); x++) {
if (level.getTilesetMatrix()[y][x].index > -1) {
architecture.matrix[y][x] = new RetroArchitectureTile(
data.matrix[y][x],
level.getTilesetMatrix()[y][x],
x * architecture.tileWidth,
y * architecture.tileHeight,
architecture.tileWidth,
architecture.tileHeight
)
);
}
}
}

4
js/retro/RetroSprite.js
View File

@ -3,10 +3,10 @@ import GeometryRect from "../geometry/GeometryRect.js";
export default class RetroSprite
{
constructor(image, scale = 1)
constructor(imagePath, scale = 1)
{
this.image = new Image();
this.image.src = image;
this.image.src = imagePath;
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
this.position = new GeometryPoint();

5
levels/level.json
View File

@ -1,10 +1,9 @@
{
"tileset": "/mr-crocs-adventures/graphics/tileset/landscape01.jpg",
"tiles": 8,
"scale": 3,
"tileset": 0,
"rows": 10,
"columns": 17,
"backgroundColor": "#6096ff",
"gravity": 2.0,
"matrix": [
[6 ,6 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,4 ,4 ],
[6 ,6 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,4 ,4 ],

2
levels/level01.json
View File

File diff suppressed because one or more lines are too long

2
levels/moon.json
View File

@ -1 +1 @@
{"tileset":1,"rows":"20","columns":51,"startX":2,"startY":16,"targetX":49,"targetY":16,"backgroundColor":"black","matrix":[[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,0,0,0,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,1],[1,1,0,0,1,1,1,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,0,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]]}
{"tileset":1,"rows":"20","columns":51,"startX":2,"startY":16,"targetX":49,"targetY":16,"backgroundColor":"black","gravity":0.5,"matrix":[[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,0,0,0,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,1],[1,1,0,0,1,1,1,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,0,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]]}

1
levels/moonbase.json Normal file
View File

File diff suppressed because one or more lines are too long

22
tilorswift/js/Terrain.js
View File

@ -85,18 +85,14 @@ export default class Terrain
tr.appendChild(td);
}
console.log(index);
if (index === undefined || index >= this.tilesY - 1) {
this.fields.push(row);
this.htmlElement.appendChild(tr);
} else if (index === 0) {
this.fields = [row].concat(this.fields);
console.log(this.fields[0]);
this.htmlElement.insertBefore(tr, this.htmlElement.childNodes[index]);
} else {
this.fields = this.fields.slice(0, index).concat([row]).concat(this.fields.slice(index));
console.log(this.fields[1]);
this.htmlElement.insertBefore(tr, this.htmlElement.childNodes[index]);
}
}
@ -185,20 +181,20 @@ export default class Terrain
return this.targetTileX !== undefined && this.targetTileY !== undefined;
}
static createFromJson(terrainData)
static createFromJson(levelData)
{
let graphicSet = GraphicSet[terrainData.tileset];
let graphicSet = GraphicSet[levelData.tileset];
let tileset = new Tileset(terrainData.tileset);
let terrain = new Terrain(tileset, terrainData.columns, terrainData.rows, graphicSet.backgroundColor);
let tileset = new Tileset(levelData.tileset);
let terrain = new Terrain(tileset, levelData.columns, levelData.rows, graphicSet.backgroundColor);
for (let y = 0; y < terrainData.rows; y++) {
for (let x = 0; x < terrainData.columns; x++) {
terrain.setFieldIndex(x, y, terrainData.matrix[y][x]);
for (let y = 0; y < levelData.rows; y++) {
for (let x = 0; x < levelData.columns; x++) {
terrain.setFieldIndex(x, y, levelData.matrix[y][x]);
if (x === terrainData.startX && y === terrainData.startY) {
if (x === levelData.startX && y === levelData.startY) {
terrain.setEntrancePoint(x, y);
} else if (x === terrainData.targetX && y === terrainData.targetY) {
} else if (x === levelData.targetX && y === levelData.targetY) {
terrain.setTargetPoint(x, y);
}
}

34
tilorswift/js/Tilorswift.js
View File

@ -1,44 +1,42 @@
export default class Tilorswift
{
static getTerrainAsJson(terrain)
static getLevelAsJson(level)
{
console.log('Save da shit.');
let matrix = [];
console.log(terrain.fields.length);
for (let y = 0; y < terrain.fields.length; y++) {
for (let y = 0; y < level.terrain.fields.length; y++) {
let row = [];
for (let x = 0; x < terrain.fields[y].length; x++) {
row.push(terrain.fields[y][x].index);
for (let x = 0; x < level.terrain.fields[y].length; x++) {
row.push(level.terrain.fields[y][x].index);
}
matrix.push(row);
}
let data = {
tileset: terrain.tileset.setId,
rows: terrain.tilesY,
columns: terrain.tilesX,
startX: terrain.entranceTileX,
startY: terrain.entranceTileY,
targetX: terrain.targetTileX,
targetY: terrain.targetTileY,
tileset: level.getTilesetId(),
rows: level.getRows(),
columns: level.getColumns(),
startX: level.getStartX(),
startY: level.getStartY(),
targetX: level.getTargetX(),
targetY: level.getTargetY(),
gravity: level.gravity,
matrix: matrix,
};
return JSON.stringify(data);
}
static saveTerrainToFile(terrain)
static saveLevelToFile(level)
{
if (!terrain.hasEntrancePoint()) {
if (!level.hasEntrancePoint()) {
alert('Es muss ein Startpunkt definiert sein!');
return false;
}
if (!terrain.hasTargetPoint()) {
if (!level.hasTargetPoint()) {
alert('Es muss ein Zielpunkt definiert sein!');
return false;
}
@ -49,7 +47,7 @@ export default class Tilorswift
return false;
}
let json = Tilorswift.getTerrainAsJson(terrain);
let json = Tilorswift.getLevelAsJson(level);
let download = document.createElement('a');
download.setAttribute('download', filename);

5
tilorswift/js/dialog/Dialog.js
View File

@ -41,7 +41,7 @@ export default class Dialog
return button;
}
createInputNumber(label, value = 0, min = 0, max = 999999)
createInputNumber(label, value = 0, min = 0, max = 999999, step = 1)
{
let htmlElement = document.createElement('div');
htmlElement.classList.add('dialog-input-area');
@ -54,6 +54,9 @@ export default class Dialog
htmlElementInput.classList.add('dialog-input');
htmlElementInput.type = 'number';
htmlElementInput.value = value;
htmlElementInput.max = max;
htmlElementInput.min = min;
htmlElementInput.step = step;
htmlElement.appendChild(htmlElementLabel);
htmlElement.appendChild(htmlElementInput);

22
tilorswift/js/dialog/DialogGravity.js Normal file
View File

@ -0,0 +1,22 @@
import Dialog from "./Dialog.js";
import TilorswiftGravityUpdatedEvent from "../events/TilorswiftGravityUpdatedEvent.js";
export default class DialogGravity extends Dialog
{
constructor(gravity)
{
super();
this.setMessage('Gravitation einstellen');
this.inputGravity = this.createInputNumber('Stärke', gravity, 0, 10, 0.01);
this.createButton('Abbrechen');
this.buttonOk = this.createButton('OK');
this.buttonOk.addEventListener(
'click',
() => {
window.dispatchEvent(
new TilorswiftGravityUpdatedEvent(parseFloat(this.inputGravity.value))
);
}
)
}
}

2
tilorswift/js/events/TilorswiftEvent.js
View File

@ -14,6 +14,8 @@ const TilorswiftEvent = {
NEW_TERRAIN: 'newTerrain',
NEW_TERRAIN_CLICKED: 'newTerrainClicked',
TILESET_SELECTED: 'tilesetSelected',
MENU_GRAVITY_CLICKED: 'menuGravityClicked',
GRAVITY_UPDATED: 'gravityUpdated',
};
export default TilorswiftEvent;

9
tilorswift/js/events/TilorswiftGravityUpdatedEvent.js Normal file
View File

@ -0,0 +1,9 @@
import TilorswiftEvent from "./TilorswiftEvent.js";
export default class TilorswiftGravityUpdatedEvent extends Event
{
constructor(gravity) {
super(TilorswiftEvent.GRAVITY_UPDATED);
this.gravity = gravity;
}
}

9
tilorswift/js/events/TilorswiftMenuGravityClickedEvent.js Normal file
View File

@ -0,0 +1,9 @@
import TilorswiftEvent from "./TilorswiftEvent.js";
export default class TilorswiftMenuGravityClickedEvent extends Event
{
constructor()
{
super(TilorswiftEvent.MENU_GRAVITY_CLICKED);
}
}

1
tilorswift/js/menu/TilesetPickerWidget.js
View File

@ -42,6 +42,7 @@ export default class TilesetPickerWidget extends Widget
{
this.tileset = tileset;
this.htmlElementSelector.innerHTML = '';
this.htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px';
this.loadTileset();
}

70
tilorswift/js/module.js
View File

@ -1,5 +1,4 @@
import Terrain from "./Terrain.js";
import FileLoader from "../../js/FileLoader.js";
import TilorswiftEvent from "./events/TilorswiftEvent.js";
import Mouse from "./Mouse.js";
import Tileset from "./Tileset.js";
@ -23,27 +22,27 @@ import DialogNewTerrain from "./dialog/DialogNewTerrain.js";
import TargetPointWidget from "./menu/TargetPointWidget.js";
import GraphicSet from "../../js/GraphicSet.js";
import Setting from "../../js/Setting.js";
import Level from "../../js/Level.js";
import TilorswiftMenuGravityClickedEvent from "./events/TilorswiftMenuGravityClickedEvent.js";
import DialogGravity from "./dialog/DialogGravity.js";
let level = Level.createFromFile('../levels/moonbase.json');
if (GraphicSet[level.terrain.tileset.setId].backgroundImage !== null) {
document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[level.getTilesetId()].backgroundImage + '")';
}
let loader = new FileLoader('../levels/level01.json');
let terrainData = JSON.parse(loader.getContent());
let image = new Image();
image.src = Setting.TILESET_LOCATION + GraphicSet[terrainData.tileset].tileset;
image.src = Setting.TILESET_LOCATION + GraphicSet[level.terrain.tileset.setId].tileset;
image.onload = function () {
let terrain = Terrain.createFromJson(terrainData);
if (GraphicSet[terrainData.tileset].backgroundImage !== null) {
document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[terrainData.tileset].backgroundImage + '")';
}
document.body.style.backgroundColor = GraphicSet[terrainData.tileset].backgroundColor;
document.body.style.backgroundColor = GraphicSet[level.terrain.tileset.setId].backgroundColor;
let map = document.getElementById('map');
map.appendChild(terrain.getElement());
map.appendChild(level.terrain.getElement());
let brush = new Brush();
let tileset = new Tileset(terrainData.tileset);
let tileset = new Tileset(level.terrain.tileset.setId);
let widgetBar = new WidgetBar('widget-bar');
let tilesetPicker = new TilesetPickerWidget(tileset, brush);
@ -70,6 +69,10 @@ image.onload = function () {
menuEdit.addMenuEntry(new MainMenuEntry('Spalten einfügen...', TilorswiftAddColumnsClickedEvent));
mainbar.addMenuGroup(menuEdit);
let menuLevel = new MenuGroup('Level');
menuLevel.addMenuEntry(new MainMenuEntry('Gravitation...', TilorswiftMenuGravityClickedEvent));
mainbar.addMenuGroup(menuLevel);
document.body.appendChild(mainbar.getElement());
window.addEventListener(
@ -78,7 +81,7 @@ image.onload = function () {
if (brush.mode === BrushMode.TERRAIN && !event.getField().isEntrancePoint) {
switch (event.button) {
case 0:
event.getField().setIndex(terrain.brushTileIndex);
event.getField().setIndex(level.terrain.brushTileIndex);
break;
case 2:
event.getField().setIndex(-1);
@ -86,15 +89,15 @@ image.onload = function () {
}
} else if (brush.mode === BrushMode.ENTRANCE) {
if (event.getField().index === -1) {
let coordinates = terrain.getFieldCoordinates(event.getField());
terrain.setEntrancePoint(coordinates.x, coordinates.y);
let coordinates = level.terrain.getFieldCoordinates(event.getField());
level.terrain.setEntrancePoint(coordinates.x, coordinates.y);
brush.mode = BrushMode.TERRAIN;
widgetBar.enableWidgets();
}
} else if (brush.mode === BrushMode.EXIT) {
if (event.getField().index === -1) {
let coordinates = terrain.getFieldCoordinates(event.getField());
terrain.setTargetPoint(coordinates.x, coordinates.y);
let coordinates = level.terrain.getFieldCoordinates(event.getField());
level.terrain.setTargetPoint(coordinates.x, coordinates.y);
brush.mode = BrushMode.TERRAIN;
widgetBar.enableWidgets();
}
@ -113,7 +116,7 @@ image.onload = function () {
TilorswiftEvent.FIELD_ENTERED,
(event) => {
if (mouse.isPressedLeft) {
event.getField().setIndex(terrain.brushTileIndex);
event.getField().setIndex(level.terrain.brushTileIndex);
} else if (mouse.isPressedRight) {
event.getField().setIndex(-1);
}
@ -127,6 +130,13 @@ image.onload = function () {
}
);
window.addEventListener(
TilorswiftEvent.MENU_GRAVITY_CLICKED,
() => {
new DialogGravity(level.gravity);
}
);
window.addEventListener(
TilorswiftEvent.ADD_ROWS_CLICKED,
() => {
@ -141,17 +151,24 @@ image.onload = function () {
}
);
window.addEventListener(
TilorswiftEvent.GRAVITY_UPDATED,
(event) => {
level.gravity = event.gravity;
}
);
window.addEventListener(
TilorswiftEvent.ADD_ROWS,
function (event) {
terrain.addRows(event.beforeRow, event.rowCount);
level.terrain.addRows(event.beforeRow, event.rowCount);
}
);
window.addEventListener(
TilorswiftEvent.ADD_COLUMNS,
function (event) {
terrain.addColumns(event.beforeColumn, event.columnCount);
level.terrain.addColumns(event.beforeColumn, event.columnCount);
}
);
@ -159,12 +176,15 @@ image.onload = function () {
TilorswiftEvent.NEW_TERRAIN,
(event) => {
let tileset = new Tileset(event.tilesetIndex);
terrain = new Terrain(tileset, event.tilesX, event.tilesY, GraphicSet[event.tilesetIndex].backgroundColor);
level.terrain = new Terrain(tileset, event.tilesX, event.tilesY, GraphicSet[event.tilesetIndex].backgroundColor);
document.body.style.backgroundColor = level.getBackgroundColor();
if (GraphicSet[event.tilesetIndex].backgroundImage !== null) {
document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[event.tilesetIndex].backgroundImage + '")';
} else {
document.body.style.backgroundImage = 'none';
}
map.innerHTML = '';
map.appendChild(terrain.getElement());
map.appendChild(level.terrain.getElement());
tilesetPicker.reloadTileset(tileset);
}
);
@ -180,7 +200,7 @@ image.onload = function () {
window.addEventListener(
TilorswiftEvent.MENU_SAVE_CLICKED,
function () {
if (Tilorswift.saveTerrainToFile(terrain)) {
if (Tilorswift.saveLevelToFile(level)) {
window.dispatchEvent(new TilorswiftSavedEvent());
}
}

2
tilorswift/style.css
View File

@ -232,7 +232,7 @@ body {
}
.dialog-input {
width: 100%;
width: 480px;
margin-bottom: 20px;
}