diff --git a/images/door.png b/images/door.png new file mode 100644 index 0000000..86aef76 Binary files /dev/null and b/images/door.png differ diff --git a/images/light.png b/images/light.png new file mode 100644 index 0000000..2b43587 Binary files /dev/null and b/images/light.png differ diff --git a/images/wall.png b/images/wall.png new file mode 100644 index 0000000..656eb4b Binary files /dev/null and b/images/wall.png differ diff --git a/index.html b/index.html index de32b83..d129282 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@ Game Title Here + + diff --git a/js/main.js b/js/main.js index 1aedfeb..354b4eb 100644 --- a/js/main.js +++ b/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); } \ No newline at end of file diff --git a/js/sceneMain.js b/js/sceneMain.js index a41779e..3bbbf40 100644 --- a/js/sceneMain.js +++ b/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,8 +26,15 @@ 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; @@ -31,10 +42,50 @@ class SceneMain extends Phaser.Scene { // 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() { diff --git a/js/utils/alignGrid.js b/js/utils/alignGrid.js new file mode 100644 index 0000000..e9493a2 --- /dev/null +++ b/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++; + } + } + } + +} diff --git a/js/utils/sceneMap.js b/js/utils/sceneMap.js new file mode 100644 index 0000000..2ea6c94 --- /dev/null +++ b/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'] + ] +}