Level class created and gravity editable.
This commit is contained in:
Mal
parent
cec3cc726f
commit
a7ecbf9d2e
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
57
js/module.js
57
js/module.js
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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 ],
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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]]}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import TilorswiftEvent from "./TilorswiftEvent.js";
|
||||
|
||||
export default class TilorswiftGravityUpdatedEvent extends Event
|
||||
{
|
||||
constructor(gravity) {
|
||||
super(TilorswiftEvent.GRAVITY_UPDATED);
|
||||
this.gravity = gravity;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import TilorswiftEvent from "./TilorswiftEvent.js";
|
||||
|
||||
export default class TilorswiftMenuGravityClickedEvent extends Event
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super(TilorswiftEvent.MENU_GRAVITY_CLICKED);
|
||||
}
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 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;
|
||||
let level = Level.createFromFile('../levels/moonbase.json');
|
||||
|
||||
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 + '")';
|
||||
if (GraphicSet[level.terrain.tileset.setId].backgroundImage !== null) {
|
||||
document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[level.getTilesetId()].backgroundImage + '")';
|
||||
}
|
||||
|
||||
document.body.style.backgroundColor = GraphicSet[terrainData.tileset].backgroundColor;
|
||||
let image = new Image();
|
||||
image.src = Setting.TILESET_LOCATION + GraphicSet[level.terrain.tileset.setId].tileset;
|
||||
|
||||
image.onload = function () {
|
||||
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());
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -232,7 +232,7 @@ body {
|
|||
}
|
||||
|
||||
.dialog-input {
|
||||
width: 100%;
|
||||
width: 480px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue