Aurelia Gist - CreateJS

app.html

<template>
  <canvas id="demoCanvas" width="500" height="300"></canvas>
</template>

app.js

import {Game} from 'game';

export class App {
  static inject = [Game];
  
  constructor(game) {
    this.game = game;
  }
  
  attached() {
    this.game.main();
  }

}

content-manager.js

// let createjs = window.createjs;
// import createjs from 'createjs';
import {GameState} from 'game-state';


export class ContentManager {
/*
  static inject = [GameState];
  
  preloader;
  manifest;
  totalLoaded;
  
  constructor(gameState) {
    this.gameState = gameState;
  }
  

  performPreload() {
    // this.manifest = [
    //   { src: "assets/milo.txt", id: "miloJson" },
    //   { src: "img/honeycomb_open.png", id: "bmpTile" },
    //   { src: "img/honeycomb_closed.png", id: "bmpTileClosed" },
    //   { src: "img/game_screen_with_milo_1366x768.jpg", id: "bmpGameScreen" },
    //   { src: "sounds/buzz.mp3", id: "buzz" },
    //   { src: "sounds/burp.mp3", id: "burp" },
    //   { src: "sounds/yelp.mp3", id: "yelp" },
    //   { src: "sounds/pop1.wav", id: "pop1" },
    //   { src: "sounds/pop2.wav", id: "pop2" },
    //   { src: "sounds/crowdcheer.wav", id: "crowdcheer" },
    //   { src: "sounds/outahere.wav", id: "outahere" },
    //   { src: "levels/level0.txt", id: "level0" },
    //   { src: "levels/level1.txt", id: "level1" },
    //   { src: "levels/level2.txt", id: "level2" },
    //   { src: "levels/level3.txt", id: "level3" },
    //   { src: "levels/level4.txt", id: "level4" },
    //   { src: "levels/level5.txt", id: "level5" },
    //   { src: "levels/level6.txt", id: "level6" },
    //   { src: "levels/level7.txt", id: "level7" },
    //   { src: "levels/level8.txt", id: "level8" },
    //   { src: "levels/level9.txt", id: "level9" }
    // ];

    this.manifest = [
      { src: "https://bitbucket.org/matt.duffield/milo-the-mosquito/raw/f8a6c249e37d6d57fd5b846d85ec8f7cdbfb6229/milo-the-mosquito/assets/milo.txt", id: "miloJson" },
      { src: "https://bytebucket.org/matt.duffield/milo-the-mosquito/raw/f8a6c249e37d6d57fd5b846d85ec8f7cdbfb6229/milo-the-mosquito/img/honeycomb_open.png?token=95bdfe23049f78e009c0484a146a742d6812bed8", id: "bmpTile" },
      { src: "https://bytebucket.org/matt.duffield/milo-the-mosquito/raw/f8a6c249e37d6d57fd5b846d85ec8f7cdbfb6229/milo-the-mosquito/img/honeycomb_closed.png?token=06ae544afe670a49ba753fad2f7878b24ce93903", id: "bmpTileClosed" },
      // { src: "img/game_screen_with_milo_1366x768.jpg", id: "bmpGameScreen" },
      // { src: "sounds/buzz.mp3", id: "buzz" },
      // { src: "sounds/burp.mp3", id: "burp" },
      // { src: "sounds/yelp.mp3", id: "yelp" },
      // { src: "sounds/pop1.wav", id: "pop1" },
      // { src: "sounds/pop2.wav", id: "pop2" },
      // { src: "sounds/crowdcheer.wav", id: "crowdcheer" },
      // { src: "sounds/outahere.wav", id: "outahere" },
      // { src: "levels/level0.txt", id: "level0" },
      // { src: "levels/level1.txt", id: "level1" },
      // { src: "levels/level2.txt", id: "level2" },
      // { src: "levels/level3.txt", id: "level3" },
      // { src: "levels/level4.txt", id: "level4" },
      // { src: "levels/level5.txt", id: "level5" },
      // { src: "levels/level6.txt", id: "level6" },
      // { src: "levels/level7.txt", id: "level7" },
      // { src: "levels/level8.txt", id: "level8" },
      // { src: "levels/level9.txt", id: "level9" }
    ];

    this.preloader = new createjs.PreloadJS();

    this.preloader.onProgress = this.handleProgress;
    this.preloader.onComplete = this.handleComplete;
    this.preloader.onFileLoad = this.handleFileLoad;
    this.preloader.loadManifest(this.manifest);
  }

  handleProgress(e) {
    this.gameState.stage.removeChild(this.gameState.progressText);
    this.gameState.progressText = new createjs.Text("Loading " + this.totalLoaded + " assets...", "36px GraffitiPaintBrush", "#990000");
    this.gameState.progressText.x = 20;
    this.gameState.progressText.y = 20;
    this.gameState.stage.addChild(this.gameState.progressText);
    this.gameState.stage.update();
  }

  handleComplete(e) {

  }

  handleFileLoad(e) {

    switch (e.type) {
        case createjs.PreloadJS.IMAGE:
            var img = new Image();
            img.src = e.src;
            img.onload = this.handleLoadComplete;
            window[e.id] = new createjs.Bitmap(img);
            break;
        case createjs.PreloadJS.SOUND:
            var snd = new Audio();
            snd.src = e.src;
            //snd.onload = handleLoadComplete;
            window[e.id] = snd;
            this.handleLoadComplete(e);
            //window[e.id] = new createjs.Audio(snd);
            break;
        default:
            if (e.id == "miloJson") {
                try {
                    eval("var miloJson=" + e.result);// Convert to an object.
                } catch (e) {
                    
                }
                var ss = new createjs.SpriteSheet(miloJson);
                this.gameState.bmpMilo = new createjs.BitmapAnimation(ss);
                this.gameState.bmpMilo.name = "milo";

                // Set up looping
                ss.getAnimation("fly").next = "stand";
                ss.getAnimation("die").next = "dead";
                this.gameState.bmpMilo.gotoAndPlay("stand");
                this.gameState.bmpMilo.scaleX = bmpMilo.scaleY = MILO_SCALE;
            }
            else {
                this.gameState.currentLevel = e.result;
                this.gameState.levels.push(e.result);
            }
            this.handleLoadComplete(e);
            break;
    }
  }

  handleLoadComplete(e) {
    this.totalLoaded++;

    if (this.manifest.length == this.totalLoaded) {
        // All of our content is ready...
        createjs.Tween.get(this)
          .wait(1000)
          .call(this.gameState.startGame, null, this);
          // .call(this.showHome, null, this);
    }
  }
*/
}

game-state.js

export class GameState {
  
  OPEN = 0;
  WALL = 1;
  EXIT = 2;
  MILO = 3;  

  ARCADE = 0;
  FREEPLAY = 1;

  MILO_SCALE = 1;
  MILO_X_OFFSET = -5;
  MILO_Y_OFFSET = -14;
  MILO_HEIGHT = 52;

  stage;
  screen_width;
  screen_height;
  game_playing = false;
  imgMilo = new Image();
  imgTile = new Image();
  imgTileClosed = new Image();
  img_count = 4;
  load_count = 0;

  bmpTile;
  bmpTileClosed;
  bmpMilo;  
  
  closedTiles = [];
  currentLevel = '';
  currentGamePlay = 0;
  
  miloPosition = {};
  
  tile_width = 60;
  tile_height = 52;
  x_offset = 30;
  tile_x_margin = 360;
  y_offset = -2;  
  
  score = 20000;
  hiScore = 0;
  scoreContainer;
  score_height = 350;
  score_width = 250;
  scoreLabel;
  scoreText;
  progressText;
  bmpStartScreen;
  gameContainer;
  gameOverContainer;  
  
  constructor() {
    this.setLevel0();
  }
  
  setLevel0() {
    let level = `
..............
.XXXXXXXXXXXX.
.XXXXXXXXXXXX.
.XXXXXXXXXXXX.
.XXX#XXXXX#XX.
.XXXXXXXXXXXX.
.XXXXXXMXXXXX.
.XXX#XXXXX#XX.
.XXXXXXXXXXXX.
.XXXXXXXXXXXX.
.XXXXXXXXXXXX.
.XXXXXXXXXXXX.
.XXXXXXXXXXXX.
..............
`;
    this.currentLevel = level;
  }
}

game.js

let createjs = window.createjs;
// import createjs from 'createjs';
import {GameState} from 'game-state';
import {ContentManager} from 'content-manager';
import {GridManager} from 'grid-manager';

export class Game {
  static inject = [GameState, ContentManager, GridManager];
  
  constructor(gameState, contentManager, gridManager) {
    this.gameState = gameState;
    this.contentManager = contentManager;
    this.gridManager = gridManager;
  }
  
  main() {
    
    
    
    // this.contentManager.performPreload();
  }
  
  startGame() {
    this.gameState.stage = new createjs.Stage('demoCanvas');

    if (this.gameState.gameContainer === undefined) {
        this.gameState.gameContainer = new createjs.Container();
    }
    this.gameState.gameContainer.removeAllChildren();
    this.gameState.closedTiles = [];
    this.gameState.score = 20000;

    createjs.Ticker.addEventListener("tick", this.handleTick.bind(this));

    // displayScore();

    if (this.gameState.currentGamePlay == this.gameState.ARCADE) {
        // Arcade mode.
        this.gridManager.buildGrid();
    }
    else {
        // Free play mode.
        // generateBarriers();
    }


    this.gameState.game_playing = true;
    this.gameState.stage.update();    
  }
  
  handleTick() {
    this.gameState.stage.update();
  }
}

grid-manager.js

/**
    The grid must be represented as a rectangle.  Every row
    must have the same width.  That doesn't mean that you have
    to have a visual but it does mean that it must be accounted for.
    The same applies for the columns as well.
 */
let createjs = window.createjs;
// import createjs from 'createjs';
import {GameState} from 'game-state';

export class GridManager {
  static inject = [GameState];
  
  grid = [];
  
  constructor(gameState) {
    this.gameState = gameState;
  }
  
  buildGrid() {
    console.log('Building grid.....');
    this.gameState.gameContainer = new createjs.Container();
    this.gameState.gameContainer.name = "gameContainer";

    let lines = this.gameState.currentLevel.trim().split('\n');
    // Determine the number of rows.
    let rowCount = lines.length;
    // Determine the number of columns.
    let colCount = lines[0].trim().length;
console.log(rowCount, colCount);
    // Initialize the number of rows.
    for (var row = 0; row < rowCount; row++) this.grid.push([]);

    // Process each row and add corresponding column.
    for (var row = 0; row < rowCount; row++) {
        for (var col = 0; col < colCount; col++) {
            // Setup grid map.
            if (lines[row][col] === "X" || lines[row][col] === "M") {
                this.grid[row].push(this.gameState.OPEN);

                this.addTile(row, col);

                // now load Milo
                if (lines[row][col] === "M") {
                    // set display properties:
                    this.setMiloPosition(this.gameState.bmpMilo, row, col);
                    // add to the display list:
                    this.gameState.gameContainer.addChild(this.gameState.bmpMilo);

                    this.gameState.miloPosition.x = col;
                    this.gameState.miloPosition.y = row;
                }
            }
            else if (lines[row][col] === "#") {
                this.grid[row].push(this.gameState.WALL);
                this.addWallTile(row, col);
            }
            else {
                this.grid[row].push(this.gameState.EXIT);
            }
        }
    }

    this.gameState.stage.addChild(this.gameState.gameContainer);    
  }
  
  addTile(row, col) {
    // clone the original tile, so we don't need to set shared properties:
    let bmpOpenTileCloned = this.cloneTile({ tile: this.gameState.bmpTile, name: "open", scale: .25, x: col, y: row, onclick: onclick });

    // set display properties:
    this.setTilePosition(this.gameState.bmpOpenTileCloned, row, col);

    // add to the display list:
    this.gameState.gameContainer.addChild(this.gameState.bmpOpenTileCloned);    
  }
  
  addTileWall(row, col) {
    // clone the original tile, so we don't need to set shared properties:
    let bmpTileClosedCloned = this.cloneTile({ tile: this.gameState.bmpTileClosed, name: "closed", scale: .25, x: col, y: row });

    // set display properties:
    this.setTilePosition(this.gameState.bmpTileClosedCloned, row, col);

    // add to the display list:
    this.gameState.gameContainer.addChild(this.gameState.bmpTileClosedCloned);    
  }
  
  setTilePosition(tile, row, col) {
    if (row % 2 == 0) {
        tile.x = (col * this.gameState.tile_width) + this.gameState.tile_x_margin;
        tile.y = (row * this.gameState.tile_height);
    }
    else {
        tile.x = this.gameState.x_offset + (col * this.gameState.tile_width) + this.gameState.tile_x_margin;
        tile.y = (row * this.gameState.tile_height);
    }    
  }
  
  setMiloPosition(tile, row) {
    let posX;
    let posY;
    if (row % 2 == 0) {
        posX = (j * this.gameState.tile_width) + this.gameState.tile_x_margin + this.gameState.MILO_X_OFFSET;
        posY = (row * this.gameState.MILO_HEIGHT) + this.gameState.MILO_Y_OFFSET;
    }
    else {
        posX = this.gameState.x_offset + (j * this.gameState.tile_width) + this.gameState.tile_x_margin + this.gameState.MILO_X_OFFSET;
        posY = (row * this.gameState.MILO_HEIGHT) + this.gameState.MILO_Y_OFFSET;
    }

    // The following ensures that Milo is always the top-most Z-Index.
    this.gameState.gameContainer.setChildIndex(tile, this.gameState.gameContainer.getNumChildren() - 1);
    // Play the "fly" animation.
    tile.gotoAndPlay("fly");
    // Animate the movement.
    createjs.Tween.get(tile).to({ x: posX, y: posY }, 500, createjs.Ease.cubicIn);
    // Play the buzz sound.
    buzz.play();    
  }
  
cloneTile(options) {
    options = options || {};
    options.scale = options.scale || .15;

    var clonedTile = options.tile.clone();
    clonedTile.scaleX = clonedTile.scaleY = options.scale;
    clonedTile.x = options.x;
    clonedTile.y = options.y;
    clonedTile.name = options.name + "_" + options.y + "_" + options.x;
    clonedTile.onPress = options.onclick;
    return clonedTile;
  }  
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>
    
    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>