Homework 3

public/index.html

@@ -10,7 +10,8 @@
     <div class="wrap">
       <div class="logo"></div>
       <div class="canvas-wrap">
-        <h3>Loading...</h3>
+        <canvas id='game' width="600" height="600"></canvas>
+        <h3 id='loading'>Loading...</h3>
         <div class="border">
           <div class="top-left"></div>
           <div class="top"></div>

src/client/ClientEngine.js

@@ -0,0 +1,73 @@
+/* eslint-disable object-curly-newline */
+/* eslint-disable guard-for-in */
+/* eslint-disable no-restricted-syntax */
+import EventSourceMixin from '../common/EventSourceMixin';
+
+class ClientEngine {
+  constructor(canvas) {
+    console.log(canvas);
+    Object.assign(this, {
+      canvas,
+      stx: null,
+      imageLoaders: [],
+      sprites: {},
+      images: [],
+    });
+
+    this.ctx = canvas.getContext('2d');
+    this.loop = this.loop.bind(this);
+  }
+
+  start() {
+    this.loop();
+  }
+
+  loop(timestamp) {
+    const { ctx, canvas } = this;
+    ctx.fillStyle = 'black';
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    this.trigger('render', timestamp);
+    this.initNextFrame();
+  }
+
+  initNextFrame() {
+    window.requestAnimationFrame(this.loop);
+  }
+
+  loadSprites(spritesGroup) {
+    this.emageLoaders = [];
+    for (const groupName in spritesGroup) {
+      const group = spritesGroup[groupName];
+      this.sprites[groupName] = group;
+      for (const spriteName in group) {
+        const { img } = group[spriteName];
+        if (!this.images[img]) {
+          this.imageLoaders.push(this.loadImage(img));
+        }
+      }
+    }
+    return Promise.all(this.imageLoaders);
+  }
+
+  loadImage(url) {
+    return new Promise((resolve) => {
+      const i = new Image();
+      this.images[url] = i;
+      i.onload = () => resolve(i);
+      i.src = url;
+    });
+  }
+
+  renderSpriteFrame(data) {
+    const { sprite, frame, x, y, w, h } = data;
+    const spriteCfg = this.sprites[sprite[0]][sprite[1]];
+    const [fx, fy, fw, fh] = spriteCfg.frames[frame];
+    const img = this.images[spriteCfg.img];
+
+    this.ctx.drawImage(img, fx, fy, fw, fh, x, y, w, h);
+  }
+}
+Object.assign(ClientEngine.prototype, EventSourceMixin);
+
+export default ClientEngine;

src/client/ClientGame.js

@@ -0,0 +1,39 @@
+/* eslint-disable no-unused-vars */
+import ClientEngine from './ClientEngine';
+import sprites from '../configs/sprites';
+import ClientWorld from './ClientWorld';
+import levelCfg from '../configs/world.json';
+
+export default class ClientGame {
+  constructor(cfg) {
+    Object.assign(this, { cfg });
+
+    this.engine = this.createEngine();
+    this.map = this.createWorld();
+    this.initEngine();
+  }
+
+  createEngine() {
+    return new ClientEngine(document.getElementById(this.cfg.tagId));
+  }
+
+  createWorld() {
+    return new ClientWorld(this, this.engine, levelCfg);
+  }
+
+  initEngine() {
+    this.engine.loadSprites(sprites).then(() => {
+      this.engine.on('render', (_, _timestamp) => {
+        this.map.init();
+      });
+      this.engine.start();
+    });
+  }
+
+  static init(cfg) {
+    if (!ClientGame.game) {
+      ClientGame.game = new ClientGame(cfg);
+      console.log('Game INIT');
+    }
+  }
+}

src/client/ClientWorld.js

@@ -0,0 +1,29 @@
+class ClientWorld {
+  constructor(game, engine, levelCfg) {
+    Object.assign(this, {
+      game,
+      engine,
+      levelCfg,
+      height: levelCfg.map.length,
+      width: levelCfg.map[0].length,
+    });
+  }
+
+  init() {
+    const { map } = this.levelCfg;
+    map.forEach((cfgRow, y) => {
+      cfgRow.forEach((cfgCell, x) => {
+        this.engine.renderSpriteFrame({
+          sprite: ['terrain', ...cfgCell], // Было 5 минут, потом исправлю
+          frame: 0,
+          x: x * 48, // Было 5 минут, потом исправлю
+          y: y * 48,
+          w: 48,
+          h: 48,
+        });
+      });
+    });
+  }
+}
+
+export default ClientWorld;

src/common/EventSourceMixin.js

@@ -0,0 +1,29 @@
+export default {
+  pushEvent(event, sub) {
+    const subs = this.subscribers || (this.subscribers = {});
+    (subs[event] || (subs[event] = [])).push(sub);
+  },
+
+  on(event, callback) {
+    this.pushEvent(event, [true, callback]);
+  },
+
+  once(event, callback) {
+    this.pushEvent(event, [false, callback]);
+  },
+
+  un(event, subToUn) {
+    const subs = this.subscribers;
+    if (subs && subs[event]) subs[event] = subs[event].filter((sub) => sub !== subToUn);
+  },
+
+  trigger(event, data = null) {
+    const subs = this.subscribers;
+    if (subs && subs[event]) {
+      // вызываем все обработчики
+      subs[event].forEach((sub) => sub[1](event, data, this));
+      // удаляем все одноразовые обработчики
+      subs[event] = subs[event].filter((sub) => sub[0]);
+    }
+  },
+};

src/configs/sprites.js

@@ -0,0 +1,26 @@
+import terrainIMG from '../assets/terrain.png';
+
+export default {
+  terrain: {
+    grass: {
+      img: terrainIMG,
+      frames: [[896, 256, 64, 64]],
+    },
+    water: {
+      img: terrainIMG,
+      frames: [[0, 576, 64, 64]],
+    },
+    wall: {
+      img: terrainIMG,
+      frames: [[448, 64, 64, 64]],
+    },
+    spawn: {
+      img: terrainIMG,
+      frames: [[384, 640, 64, 64]],
+    },
+    npcSpawn: {
+      img: terrainIMG,
+      frames: [[896, 576, 64, 64]],
+    },
+  },
+};