Merge pull request #6 from katestarks/template

Template

index.html

@@ -6,6 +6,8 @@
     <title>Game Title Here</title>
     <link rel="stylesheet" type="text/css" href="https://gitcdn.xyz/repo/katestarks/GameJamOct2019/master/css/style.css" />
     <script src="js/phaser.min.js"></script>
+    <script src="https://gitcdn.xyz/repo/katestarks/GameJamOct2019/master/js/utils/alignGrid.js"></script>
+    <script src="https://gitcdn.xyz/repo/katestarks/GameJamOct2019/master/js/utils/sceneMap.js"></script>
     <script src="https://gitcdn.xyz/repo/katestarks/GameJamOct2019/master/js/main.js" type="text/javascript"></script>
     <script src="https://gitcdn.xyz/repo/katestarks/GameJamOct2019/master/js/sceneMain.js"></script>
 </head>

js/main.js

@@ -1,5 +1,6 @@
 var game;
-window.onload = function () {
+
+window.onload = () => {
 
     var config = {
         type: Phaser.AUTO,
@@ -21,6 +22,6 @@ window.onload = function () {
         scene: [SceneMain]
     }
 
-    var game = new Phaser.Game(config);
+    game = new Phaser.Game(config);
 
 }

js/sceneMain.js

@@ -1,14 +1,18 @@
 class SceneMain extends Phaser.Scene {
+
     constructor() {
         super('SceneMain');
     }
-    preload() {
 
+    preload() {
         this.load.image('hero', 'images/hero.png');
-        this.load.image('star', 'images/star.png')
+        this.load.image('door', 'images/door.png');
+        this.load.image('light', 'images/light.png');
+        this.load.image('wall', 'images/wall.png');
+
     }
-    create() {
 
+    create() {
         // vars to set obj in the center of the game screen
         this.centerX = this.game.config.width/2;
         this.centerY = this.game.config.height/2;
@@ -22,19 +26,66 @@ class SceneMain extends Phaser.Scene {
         // Darkness rectangle
 
 
-        // placing hero in the center of the screen
+        // placing sprites in the center of the screen
         this.hero = this.physics.add.sprite(this.centerX, this.centerY, 'hero');
+        this.door = this.physics.add.sprite(this.centerX, this.centerY, 'door');
+        this.light = this.physics.add.sprite(this.centerX, this.centerY, 'light');
+
+        // Attention future people - do this for a dynamic group of sprites with collision
+        this.wallGroup  = this.physics.add.group();
+        this.wallGroup.enableBody = true;
+        this.wallGroup.physicsBodyType = Phaser.Physics.ARCADE;
 
         // collider between hero and edge of the scene
         this.hero.body.collideWorldBounds = true;
 
         // generate keyboard keys
         this.cursors = this.input.keyboard.createCursorKeys();
 
+
+        // create grid on the game scene
+        this.gridConfig = {rows: 10, cols: 10, scene: this};
+        this.alignGrid = new AlignGrid(this.gridConfig);
+
+        // let the grid visible with index number
+        this.alignGrid.show();
+        this.alignGrid.showNumbers();
+
+        // generate game screen from bi-dimensional array on sceneMap
+        let count = 0;
+        let wall;
+        levels.levelTwo.forEach(row => {
+            row.forEach(position => {
+                switch(position) {
+                    case 'f':
+                        break;
+                    case 'w':
+                            // Attention future people - do this for a dynamic group of sprites with collision
+                            wall = this.wallGroup.create(this.centerX, this.centerY, 'wall');
+                            wall.body.immovable = true;
+                            this.alignGrid.placeAtIndex(count, wall);
+                        break;
+                    case 'd':
+                        this.alignGrid.placeAtIndex(count, this.door);
+                        break;
+                    case 't':
+                        this.alignGrid.placeAtIndex(count, this.light);
+                        break;
+                    case 'h':
+                        this.alignGrid.placeAtIndex(count, this.hero);
+                        break;
+                }
+                count++;
+            })
+        })
+        // Attention future people - do this for a dynamic group of sprites with collision
+        this.physics.add.collider(this.wallGroup, this.hero)
+
         // Lightswitch scale and initial alpha
         this.lightswitch.setScale(2);
         this.setLightToAlpha(this.distanceFromHero(this.lightswitch), 250)
 
+
     }
 
     update() {

js/utils/alignGrid.js

@@ -0,0 +1,82 @@
+class AlignGrid {
+
+    constructor(config) {
+        this.config = config;
+
+        if (!config.scene) {
+            console.log('missing scene');
+            return;
+        }
+
+        if (!config.rows) {
+            config.rows = 5;
+        }
+
+        if (!config.cols) {
+            config.cols = 5;
+        }
+
+        if (!config.height) {
+            config.height = game.config.height;
+        }
+
+        if (!config.width) {
+            config.width = game.config.width;
+        }
+
+        this.scene = config.scene;
+        // cell width
+        this.cw = config.width / config.cols;
+        // cell height
+        this.ch = config.height / config.rows;
+    }
+
+    show() {
+        this.graphics = this.scene.add.graphics();
+        this.graphics.lineStyle(2, 0xff0000);
+
+        for (var i = 0; i < this.config.width; i += this.cw) {
+            this.graphics.moveTo(i, 0);
+            this.graphics.lineTo(i, this.config.height);
+        }
+
+        for (var i = 0; i < this.config.height; i += this.ch) {
+            this.graphics.moveTo(0, i);
+            this.graphics.lineTo(this.config.width, i);
+        }
+
+        this.graphics.strokePath();
+    }
+
+    placeAt(xx, yy, obj) {
+        // calc position based upon the cellwidth and cellheight
+        var x2 = (this.cw * xx) + (this.cw / 2);
+        var y2 = (this. ch * yy) + (this.ch / 2);
+
+        obj.x = x2;
+        obj.y = y2;
+    }
+
+    placeAtIndex(index, obj) {
+        var yy = Math.floor(index / this.config.cols);
+        var xx = index - (yy * this.config.cols);
+
+        this.placeAt(xx, yy, obj);
+    }
+
+    showNumbers() {
+        this.show();
+        var indexCount = 0;
+
+        for (var i = 0; i < this.config.rows; i++) {
+            for (var j = 0; j < this.config.cols; j++) {
+                var numText = this.scene.add.text(0, 0, indexCount, {color: '#ff0000'});
+                numText.setOrigin(0.5, 0.5);
+                this.placeAtIndex(indexCount, numText);
+
+                indexCount++;
+            }
+        }
+    }
+
+}

js/utils/sceneMap.js

@@ -0,0 +1,26 @@
+const levels = {
+    levelOne: [
+        ['f','f','f','f','f','f','f','f','f','f'],
+        ['f','f','f','f','f','f','f','f','f','f'],
+        ['f','f','f','f','f','f','f','f','f','f'],
+        ['f','f','f','f','f','f','f','f','f','f'],
+        ['h','f','f','f','f','f','f','f','f','t'],
+        ['f','f','f','f','f','f','f','f','f','f'],
+        ['f','f','f','f','f','f','f','f','f','f'],
+        ['f','f','f','f','f','f','f','f','f','f'],
+        ['f','f','f','f','f','f','f','f','f','f'],
+        ['f','f','d','f','f','f','f','f','f','f']
+    ],
+    levelTwo: [
+        ['f','f','f','f','f','d','f','f','f','f'],
+        ['f','f','f','f','f','f','f','f','f','f'],
+        ['f','f','f','f','w','f','f','f','f','f'],
+        ['f','f','f','f','w','f','f','f','f','f'],
+        ['h','f','f','f','w','f','f','f','f','t'],
+        ['f','f','f','f','w','f','f','f','f','f'],
+        ['f','f','f','f','w','f','f','f','f','f'],
+        ['f','f','f','f','w','f','f','f','f','f'],
+        ['f','f','f','f','f','f','f','f','f','f'],
+        ['f','f','f','f','f','f','f','f','f','f']
+    ]
+}