3AHAT0P · korifey91 · Jan 18, 2020 · Jan 19, 2020 · Jan 19, 2020 · Jan 19, 2020
diff --git a/index.html b/index.html
@@ -7,12 +7,12 @@
     <link rel="stylesheet" href="index.css">
 </head>
 <body>
-    <app id="root">
-        <div><canvas id="main"></canvas></div>
-        <div><canvas id="current"></canvas></div>
-        <div><canvas id="tileSet"></canvas></div>
-        <div><canvas id="tileMap"></canvas></div>
-    </app>
+<!--    <app id="root">-->
+<!--        <div><canvas id="main"></canvas></div>-->
+<!--        <div><canvas id="current"></canvas></div>-->
+<!--        <div><canvas id="tileSet"></canvas></div>-->
+<!--        <div><canvas id="tileMap"></canvas></div>-->
+<!--    </app>-->
     <script src="index.js" type="module"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,10 +1,12 @@
-import MainTileSet from './content/tilesets/MainTileSet.js';
-import MainTileMap from './content/tilemaps/MainTileMap.js';
-import CustomCanvas from './src/canvases/СustomCanvas.js';
-import ResizeableCanvasMixin from './src/canvases/mixins/resizeable.js';
-import TileableCanvasMixin from './src/canvases/mixins/tileable.js';
-import DrawableCanvasMixin from './src/canvases/mixins/drawable.js';
+import TileSet from './src/TileSet/index.js';
+import TileMap from './src/TileMap/index.js';
+import CustomCanvas from './src/Сanvas/index.js';
+import ResizeableCanvasMixin from './src/Сanvas/mixins/resizeableCanvas.js';
+import TileableCanvasMixin from './src/Сanvas/mixins/tileableCanvas.js';
+import DrawableCanvasMixin from './src/Сanvas/mixins/drawableCanvas.js';
 import drawImageFromMap from './src/utils/drawImageFromMap.js';
+import Character from './src/utils/classes/Character.js';
+import Scene from './src/Scene';
 
 const MainCanvas = DrawableCanvasMixin(TileableCanvasMixin(ResizeableCanvasMixin(CustomCanvas)));
 
@@ -36,7 +38,7 @@ const main = async () => {
   const mainCanvas = await MainCanvas.create({ el: document.getElementById('main'), size: { width: 512, height: 512 } });
   const saveButton = createButton(document.body, 'Save', () => saveMap(mainCanvas));
   const currentTileCanvas = await CustomCanvas.create({ el: document.getElementById('current'), size: { width: 64, height: 64 } });
-  const mainTileSet = await MainTileSet.create({ el: document.getElementById('tileSet') });
+  const mainTileSet = await TileSet.create({ el: document.getElementById('tileSet') });
 
   mainTileSet.addEventListener(':multiSelect', ({ tiles }) => {
     mainCanvas.updateCurrentTiles(tiles);
@@ -49,7 +51,77 @@ const main = async () => {
     }
   });
 
-  const tileMap = await MainTileMap.create({ el: document.getElementById('tileMap'), size: { width: 512, height: 512 } });
+  const tileMap = await TileMap.create({ el: document.getElementById('tileMap'), size: { width: 512, height: 512 } });
 }
 
-main();
+// main();
+async function test() {
+  // const canvas = document.createElement('canvas');
+  // canvas.width = 500;
+  // canvas.height = 500;
+  // document.body.append(canvas);
+  // const ctx = canvas.getContext('2d');
+  const scene = new Scene(document.body);
+  const player = await Character.create({
+        coreElement: scene,
+        position: { x: 0, y: 0 },
+        mainSettings: {
+          mainFlipbook: './content/sources/PNG/Knight/knight.png',
+          speed: 300,
+        },
+        moveSettings: {
+          moveFlipbook: [
+            './content/sources/PNG/Knight/Run/run1.png',
+            './content/sources/PNG/Knight/Run/run2.png',
+            './content/sources/PNG/Knight/Run/run3.png',
+            './content/sources/PNG/Knight/Run/run4.png',
+            './content/sources/PNG/Knight/Run/run5.png',
+            './content/sources/PNG/Knight/Run/run6.png',
+            './content/sources/PNG/Knight/Run/run7.png',
+            './content/sources/PNG/Knight/Run/run8.png',
+          ],
+        },
+        jumpSettings: {
+          jumpFlipbook: [
+            './content/sources/PNG/Knight/Jump/jump1.png',
+            './content/sources/PNG/Knight/Jump/jump2.png',
+            './content/sources/PNG/Knight/Jump/jump3.png',
+            './content/sources/PNG/Knight/Jump/jump4.png',
+            './content/sources/PNG/Knight/Jump/jump5.png',
+            './content/sources/PNG/Knight/Jump/jump6.png',
+            './content/sources/PNG/Knight/Jump/jump7.png',
+          ],
+        },
+        attackSettings: {
+          attackFlipbook: [
+            './content/sources/PNG/Knight/Attack/attack0.png',
+            './content/sources/PNG/Knight/Attack/attack1.png',
+            './content/sources/PNG/Knight/Attack/attack2.png',
+            './content/sources/PNG/Knight/Attack/attack4.png',
+          ],
+        },
+      });
+
+  scene.addHero(player);
+  scene.start();
+//   const tick = () => {
+//     // setTimeout(this.tick, 1000);
+//     requestAnimationFrame(tick);
+//     ctx.clearRect(0, 0, canvas.width, canvas.height);
+//     ctx.drawImage(
+//       player.render(),
+//       0,
+//       0,
+//       player.width,
+//       player.height,
+//       0,
+//       0,
+//       player.width,
+//       player.height,
+//     );
+//   };
+//   tick();
+}
+
+test();
+
diff --git a/src/Scene/index.js b/src/Scene/index.js
@@ -0,0 +1,126 @@
+import { Character } from '../utils/classes';
+
+/**
+ * @class Scene - The core of a game.
+ */
+export default class Scene {
+  // _hero = null;
+  // _ctx = null;
+  _staticObjects = [];
+  _dynamicObjects = [];
+
+  /**
+   * @constructor Scene
+   * @param {HTMLElement} element - a place where game will be rendering
+   * @param {number} [width=500] - width of a game viewport
+   * @param {number} [height=500] - height of a game viewport
+   */
+  constructor(element, width, height) {
+    this._canvas = document.createElement('canvas');
+    this._canvas.width = width || 500;
+    this._canvas.height = height || 500;
+    element.append(this._canvas);
+    this._ctx = this._canvas.getContext('2d');
+  }
+
+  /**
+   * Method to add a main Hero to a game
+   * @param {Character} hero - Instance of the Character class which would be the main hero of a game.
+   */
+  addHero(hero) {
+    if (hero instanceof Character) {
+      this._hero = hero;
+    }
+    else throw new Error('Hero should be an instance of the Character class.')
+  }
+
+  /**
+   *
+   * @param object
+   * @param {string} type - dynamic or static
+   */
+  addObject(object, type) {
+    if (object && type === 'static') this._staticObjects.push(object);
+    if (object && type === 'dynamic') this._dynamicObjects.push(object);
+  }
+
+  start() {
+    this._paused = false;
+    this._render();
+  }
+
+  pause() {
+    this._paused = true;
+  }
+
+  checkBeyondPosition(x, y, width, height) {
+    if (x <= 0) return false;
+    if (x + width >= this._canvas.width) return false;
+    if (y < 0) return false;
+    return y + height < this._canvas.height;
+  }
+
+  /**
+   * If object has collision with any static object returns true.
+   * @param {Character} object
+   * @returns {boolean}
+   */
+  checkMoveCollisions(object) {
+    return this._staticObjects.some(obj => this._detectCollision(object, obj))
+  }
+
+  /**
+   * If object has collision with any dynamic object returns true.
+   * It means that object receives a damage.
+   * @param {Character} object
+   * @returns {boolean}
+   */
+  checkDamageCollisions(object) {
+    return this._dynamicObjects.some(obj => this._detectCollision(object, obj))
+  }
+
+  _render() {
+    if (this._paused) return;
+
+    requestAnimationFrame(this._render.bind(this));
+    this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+    this._renderBackground();
+    this._renderObjects();
+    this._renderHero();
+  }
+
+  _renderBackground() {}
+
+  _renderObjects() {
+    this._staticObjects.forEach(staticObject => this._renderObject(staticObject));
+    this._dynamicObjects.forEach(dynamicObject => this._renderObject(dynamicObject));
+  }
+
+  _renderHero() {
+    this._renderObject(this._hero);
+  }
+
+  _renderObject(object) {
+    const { position, width, height } = object;
+    this._ctx.drawImage(
+      object.render(),
+      0,
+      0,
+      width,
+      height,
+      position.x,
+      position.y,
+      width,
+      height,
+    );
+  }
+
+  _detectCollision(a, b) {
+    const ax2 = a.position.x + a.width;
+    const ay2 = a.position.y + a.height;
+    const bx2 = b.position.x + b.width;
+    const by2 = b.position.y + b.height;
+
+    return !(ax2 < b.x || a.x > bx2 || ay2 < b.y || a.y > by2);
+  }
+}
diff --git a/content/tilemaps/MainTileMap.js → src/TileMap/index.js b/content/tilemaps/MainTileMap.js → src/TileMap/index.js
@@ -1,14 +1,14 @@
-import { DrawableCanvas } from '../../src/canvases/mixins/drawable.js';
+import { DrawableCanvas } from '../Сanvas/mixins/drawableCanvas.js';
 
-export default class MainTileMap extends DrawableCanvas {
-  _imageSrcLink = './content/tilemaps/tilemap.png';
+export default class TileMap extends DrawableCanvas {
+  _imageSrcLink = './content/TileMap/tilemap.png';
   _imageSrc = null;
   _sourceTileMapSize = {
     width: null,
     height: null,
   };
 
-  _metadataSrcLink = './content/tilemaps/tilemap.json';
+  _metadataSrcLink = './content/TileMap/tilemap.json';
   _metadataSrc = null;
 
   constructor(options= {}) {

diff --git a/content/tilemaps/tilemap.json → src/TileMap/tilemap.json b/content/tilemaps/tilemap.json → src/TileMap/tilemap.json
diff --git a/content/tilemaps/tilemap.png → src/TileMap/tilemap.png b/content/tilemaps/tilemap.png → src/TileMap/tilemap.png
diff --git a/content/tilesets/MainTileSet.js → src/TileSet/index.js b/content/tilesets/MainTileSet.js → src/TileSet/index.js
@@ -1,14 +1,14 @@
-import { Tileable } from '../../src/canvases/mixins/tileable.js';
-import SelectableCanvasMixin from '../../src/canvases/mixins/selectable.js';
-import ResizeableCanvasMixin from '../../src/canvases/mixins/resizeable.js';
-import buildEvent from '../../src/utils/buildEvent.js';
-import Tile from '../../src/classes/Tile.js';
+import { TileableCanvas } from '../Сanvas/mixins/tileableCanvas.js';
+import SelectableCanvasMixin from '../Сanvas/mixins/selectableCanvas.js';
+import ResizeableCanvasMixin from '../Сanvas/mixins/resizeableCanvas.js';
+import buildEvent from '../utils/buildEvent.js';
+import Tile from '../utils/classes/Tile.js';
 
-export default class MainTileSet extends SelectableCanvasMixin(ResizeableCanvasMixin(Tileable)) {
-  _imageSrcLink = 'content/tilesets/mainTileSet.png';
+export default class TileSet extends SelectableCanvasMixin(ResizeableCanvasMixin(TileableCanvas)) {
+  _imageSrcLink = 'content/TileSet/mainTileSet.png';
   _imageSrc = null;
 
-  _metadataSrcLink = 'content/tilesets/main-tile-set.json';
+  _metadataSrcLink = 'content/TileSet/main-tile-set.json';
   _metadataSrc = null;
 
   _onMultiSelect({ from, to }) {
@@ -78,7 +78,7 @@ export default class MainTileSet extends SelectableCanvasMixin(ResizeableCanvasM
     await Promise.all(promises);
   }
 
-  //TODO need to check if it needed. We have such method in MainTileMap.js
+  //TODO need to check if it needed. We have such method in index.js
   async _loadMetadata() {
     this._metadataSrc = await (await fetch(this._metadataSrcLink)).json();
   }

diff --git a/content/tilesets/mainTileSet.png → src/TileSet/mainTileSet.png b/content/tilesets/mainTileSet.png → src/TileSet/mainTileSet.png