1st version of Working Game

2019-09-19 14:13:37 +06:00 · 2019-09-19 14:13:37 +06:00 · 70abaf9d08
commit 70abaf9d08
66 changed files with 8305 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["@babel/env", {
+      "targets": {
+        "browsers": [
+          ">0.25%",
+          "not ie 11",
+          "not op_mini all"
+        ]
+      },
+      "modules": false
+    }]
+  ],
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,13 @@
+# System and IDE files
+Thumbs.db
+.DS_Store
+.idea
+*.suo
+*.sublime-project
+*.sublime-workspace
+
+# Vendors
+node_modules/
+
+# Build
+/npm-debug.log
--- a/assets/1platform.png
+++ b/assets/1platform.png
--- a/assets/bg.png
+++ b/assets/bg.png
--- a/assets/bg_music.mp3
+++ b/assets/bg_music.mp3
--- a/assets/bg_music.ogg
+++ b/assets/bg_music.ogg
--- a/assets/blankBG.png
+++ b/assets/blankBG.png
--- a/assets/btn.png
+++ b/assets/btn.png
--- a/assets/cloud1.png
+++ b/assets/cloud1.png
--- a/assets/cloud2.png
+++ b/assets/cloud2.png
--- a/assets/cloud3.png
+++ b/assets/cloud3.png
--- a/assets/cloud4.png
+++ b/assets/cloud4.png
--- a/assets/cloud5.png
+++ b/assets/cloud5.png
--- a/assets/hand.cur
+++ b/assets/hand.cur
--- a/assets/hand.png
+++ b/assets/hand.png
--- a/assets/jump.mp3
+++ b/assets/jump.mp3
--- a/assets/jump.ogg
+++ b/assets/jump.ogg
--- a/assets/mountai1n.png
+++ b/assets/mountai1n.png
--- a/assets/mountain.png
+++ b/assets/mountain.png
--- a/assets/ocean.png
+++ b/assets/ocean.png
--- a/assets/platform.png
+++ b/assets/platform.png
--- a/assets/platform2.png
+++ b/assets/platform2.png
--- a/assets/platforms.png
+++ b/assets/platforms.png
--- a/assets/player.png
+++ b/assets/player.png
--- a/assets/slide.ogg
+++ b/assets/slide.ogg
--- a/assets/title.png
+++ b/assets/title.png
--- a/dist/assets/1platform.png
+++ b/dist/assets/1platform.png
--- a/dist/assets/bg.png
+++ b/dist/assets/bg.png
--- a/dist/assets/bg_music.mp3
+++ b/dist/assets/bg_music.mp3
--- a/dist/assets/bg_music.ogg
+++ b/dist/assets/bg_music.ogg
--- a/dist/assets/blankBG.png
+++ b/dist/assets/blankBG.png
--- a/dist/assets/btn.png
+++ b/dist/assets/btn.png
--- a/dist/assets/cloud1.png
+++ b/dist/assets/cloud1.png
--- a/dist/assets/cloud2.png
+++ b/dist/assets/cloud2.png
--- a/dist/assets/cloud3.png
+++ b/dist/assets/cloud3.png
--- a/dist/assets/cloud4.png
+++ b/dist/assets/cloud4.png
--- a/dist/assets/cloud5.png
+++ b/dist/assets/cloud5.png
--- a/dist/assets/hand.cur
+++ b/dist/assets/hand.cur
--- a/dist/assets/hand.png
+++ b/dist/assets/hand.png
--- a/dist/assets/jump.mp3
+++ b/dist/assets/jump.mp3
--- a/dist/assets/jump.ogg
+++ b/dist/assets/jump.ogg
--- a/dist/assets/mountai1n.png
+++ b/dist/assets/mountai1n.png
--- a/dist/assets/mountain.png
+++ b/dist/assets/mountain.png
--- a/dist/assets/ocean.png
+++ b/dist/assets/ocean.png
--- a/dist/assets/platform.png
+++ b/dist/assets/platform.png
--- a/dist/assets/platform2.png
+++ b/dist/assets/platform2.png
--- a/dist/assets/platforms.png
+++ b/dist/assets/platforms.png
--- a/dist/assets/player.png
+++ b/dist/assets/player.png
--- a/dist/assets/slide.ogg
+++ b/dist/assets/slide.ogg
--- a/dist/assets/title.png
+++ b/dist/assets/title.png
--- a/dist/bundle.min.js
+++ b/dist/bundle.min.js
--- a/dist/index.html
+++ b/dist/index.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>IPv6 Penguin</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, user-scalable=no, minimal-ui">
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="full-screen" content="yes" />
+ <meta name="screen-orientation" content="portrait" />
+
+
+
+<style media='screen' type='text/css'>
+  *{
+    padding: 0;
+    margin: 0;
+  }
+</style>
+
+
+</head>
+
+
+
+<body>
+
+
+
+<script type="text/javascript" src="bundle.min.js"></script></body>
+</html>
--- a/index.html
+++ b/index.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>IPv6 Penguin</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, user-scalable=no, minimal-ui">
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="full-screen" content="yes" />
+ <meta name="screen-orientation" content="portrait" />
+
+
+
+<style media='screen' type='text/css'>
+  *{
+    padding: 0;
+    margin: 0;
+  }
+</style>
+
+
+</head>
+
+
+
+<body>
+
+
+
+</body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,38 @@
+{
+  "name": "phaser3-project-template",
+  "version": "1.1.0",
+  "description": "A Phaser 3 Project Template",
+  "main": "src/index.js",
+  "scripts": {
+    "build": "webpack --config webpack/prod.js ",
+    "start": "webpack-dev-server --config webpack/base.js --open"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/photonstorm/phaser3-project-template.git"
+  },
+  "author": "Richard Davey <rdavey@gmail.com> (http://www.photonstorm.com)",
+  "license": "MIT",
+  "licenseUrl": "http://www.opensource.org/licenses/mit-license.php",
+  "bugs": {
+    "url": "https://github.com/photonstorm/phaser3-project-template/issues"
+  },
+  "homepage": "https://github.com/photonstorm/phaser3-project-template#readme",
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "babel-loader": "^8.0.5",
+    "clean-webpack-plugin": "^1.0.0",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "raw-loader": "^1.0.0",
+    "terser-webpack-plugin": "^1.2.1",
+    "webpack": "^4.28.3",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14",
+    "webpack-merge": "^4.2.1"
+  },
+  "dependencies": {
+    "phaser": "^3.16.2"
+  }
+}
--- a/src/Config/config.js
+++ b/src/Config/config.js
@ -0,0 +1,22 @@
+import 'phaser';
+
+export default {
+  type: Phaser.AUTO,
+  width: 900,
+  height: 680,
+  scale: {
+    mode: Phaser.Scale.FIT,
+    autoCenter: Phaser.Scale.CENTER_BOTH,
+    width: 900,
+    height: 680
+},
+backgroundColor: 0xBDCDD1,
+// backgroundColor: 0xCFEFFC,
+physics: {
+    default: 'arcade',
+    arcade: {
+        gravity: { y: 0 },
+        debug: false
+    }
+},
+};
--- a/src/Config/options.js
+++ b/src/Config/options.js
@ -0,0 +1,19 @@
+import 'phaser';
+
+export default {
+// platform speed range, in pixels per second
+    platformSpeedRange: [300, 300],    // mountain speed, in pixels per second
+    mountainSpeed: 80,    // spawn range, how far should be the rightmost platform from the right edge
+    // before next platform spawns, in pixels
+    spawnRange: [40, 100],    // platform width range, in pixels
+    platformSizeRange: [90, 300],    // a height range between rightmost platform and next platform to be spawned
+    platformHeightRange: [-5, 5],    // a scale to be multiplied by platformHeightRange
+    platformHeighScale: 20,    // platform max and min height, as screen height ratio
+    platformVerticalLimit: [0.75, 0.9],    // player gravity
+    playerGravity: 900,    // player jump force
+    jumpForce: 400,    // player starting X position
+    playerStartPosition: 200,    // consecutive jumps allowed
+    jumps: 2,    // % of probability a coin appears on the platform
+    coinPercent: 25,    // % of probability a fire appears on the platform
+    firePercent: 25,
+};
--- a/src/Model.js
+++ b/src/Model.js
@ -0,0 +1,31 @@
+export default class Model {
+  constructor() {
+    this._soundOn = true;
+    this._musicOn = true;
+    this._bgMusicPlaying = false;
+  }
+
+  set musicOn(value) {
+    this._musicOn = value;
+  }
+
+  get musicOn() {
+    return this._musicOn;
+  }
+
+  set soundOn(value) {
+    this._soundOn = value;
+  }
+
+  get soundOn() {
+    return this._soundOn;
+  }
+
+  set bgMusicPlaying(value) {
+    this._bgMusicPlaying = value;
+  }
+
+  get bgMusicPlaying() {
+    return this._bgMusicPlaying;
+  }
+}
--- a/src/Scenes/BootScene.js
+++ b/src/Scenes/BootScene.js
@ -0,0 +1,16 @@
+import 'phaser';
+// import Phaser from '../phaser.min';
+
+export default class BootScene extends Phaser.Scene {
+  constructor () {
+    super('Boot');
+  }
+
+  preload () {
+    console.log('booting game...')
+  }
+
+  create () {
+    this.scene.start('Preloader');
+  }
+};
--- a/src/Scenes/GameScene.js
+++ b/src/Scenes/GameScene.js
@ -0,0 +1,316 @@
+import 'phaser';
+// import Phaser from '../phaser.min';
+import config from '../Config/config';
+import gameOptions from '../Config/options';
+
+export default class GameScene extends Phaser.Scene {
+
+  constructor () {
+    super('Game');
+  }
+
+
+  create () {
+
+        //Sound
+    // this.input.setDefaultCursor('url(assets/cursor.cur), pointer');
+    this.model = this.sys.game.globals.model;
+    this.jumpS = this.sound.add('jump', { volume: 1, loop: false });
+    this.bgMusic = this.sound.add('bgMusic', { volume: 0.5, loop: true });
+    if (this.model.musicOn === true && this.model.bgMusicPlaying === false) {
+      // this.bgMusic = this.sound.add('bgMusic', { volume: 0.5, loop: true });
+      this.bgMusic.play();
+      // this.siren.stop();
+      this.model.bgMusicPlaying = true;
+      this.sys.game.globals.bgMusic = this.bgMusic;
+      this.sys.game.globals.siren = this.siren;
+    }
+
+
+        // group with all active mountains.
+        this.mountainGroup = this.add.group();
+
+        // group with all active platforms.
+        this.platformGroup = this.add.group({
+            // once a platform is removed, it's added to the pool
+            removeCallback: function(platform){
+              platform.scene.platformPool.add(platform)
+            }
+          });
+
+        // platform pool
+        this.platformPool = this.add.group({
+            // once a platform is removed from the pool, it's added to the active platforms group
+            removeCallback: function(platform){
+              platform.scene.platformGroup.add(platform)
+            }
+          });
+
+        // adding a mountain
+        this.addMountains()
+
+        // keeping track of added platforms
+        this.addedPlatforms = 0;
+
+        // number of consecutive jumps made by the player so far
+        this.playerJumps = 0;
+
+        var background = this.add.sprite(0, 680, 'ocean').setOrigin(0,1).setScale(.5,.5).setDepth(10);
+
+        // adding a platform to the game, the arguments are platform width, x position and y position
+        this.addPlatform(game.config.width, game.config.width / 2, game.config.height * gameOptions.platformVerticalLimit[1]);
+
+        // adding the player;
+        this.player = this.physics.add.sprite(gameOptions.playerStartPosition, game.config.height * 0.7, "player");
+        this.player.setGravityY(gameOptions.playerGravity);
+        this.player.setDepth(20);
+        // this.player.setScale(1.2);
+
+        // the player is not dying
+        this.dying = false;
+
+        // setting collisions between the player and the platform group
+        this.platformCollider = this.physics.add.collider(this.player, this.platformGroup, function(){
+
+            // play "run" animation if the player is on a platform
+            if(!this.player.anims.isPlaying){
+              this.player.anims.play("run");
+            }
+          }, null, this);
+
+
+    this.titleText = this.add.text(config.width/2, 250, "Game Over!", { 
+      font: "68px Arial Black",
+      wordWrap: { width: 820, useAdvancedWrap: true },
+      color: '#4AB6F5',
+      align: 'center'
+    }).setOrigin(.5);
+
+        this.tutText = this.add.text(config.width/2, 250, "Click or Double Click\nto\nJump", { 
+          font: "58px Arial Black",
+          wordWrap: { width: 720, useAdvancedWrap: true },
+          color: '#4AB6F5',
+          align: 'center'
+        }).setOrigin(.5);
+
+        var tutText = this.tutText;
+        this.tweens.add({
+          targets: this.tutText,
+          ease: 'Sine.easeInOut',
+          repeat: 4,
+          yoyo : true,
+          duration: 200,
+          alpha: 0,
+          onCompleteParams: [tutText],
+          onComplete: function(){
+            tutText.destroy();
+          }
+        });
+
+
+
+        this.clouds = this.physics.add.group({
+          maxSize: 5,
+          allowGravity : false,
+          createCallback: function (cloud) {
+            cloud.setName('cloud' + this.getLength());
+          },
+          removeCallback: function (cloud) {
+          }
+        });
+
+        this.clouds.createMultiple({ key: ['cloud1','cloud2','cloud3','cloud4','cloud5'], active: false,visible: false,randomKey: true, max: 5,setScale:
+        {
+          x: .5,
+          y: .5,
+        } });
+
+        this.eventCloud = this.time.addEvent({ delay: 1000, loop: true, callback: this.addCloud ,callbackScope: this  });
+
+
+        this.clouds.children.iterate(function (cloud) {
+          var distance = Phaser.Math.Between(50, 80);
+          var speed = Phaser.Math.GetSpeed(distance, 1);
+          cloud.setData('speed',speed );
+        },this);
+
+        this.btn = this.add.sprite(config.width/2, 520, 'btn').setDisplaySize(300, 80).setDepth(30);
+        this.btnText = this.add.text(this.btn.x, this.btn.y, "Restart", { 
+          font: "52px Arial",
+          wordWrap: { width: 500, useAdvancedWrap: true },
+          color: '#4AB6F5',
+          align: 'center'
+        }).setOrigin(.5).setDepth(30);
+        this.btn.setInteractive();
+        this.btn.on('pointerdown', function () {
+          this.scene.start('Game');
+        }.bind(this));
+        this.btn.on('pointerover', function () {
+          this.btn.setDisplaySize(310, 110);
+        }.bind(this));
+        this.btn.on('pointerout', function () {
+          this.btn.setDisplaySize(300, 100);
+        }.bind(this));
+        this.btn.setVisible(false);
+        this.titleText.setVisible(false);
+        this.btnText.setVisible(false);
+
+
+        this.input.on("pointerdown", this.jump, this);
+      }
+
+      addCloud()
+      {
+        console.log( "adding clouds" );
+        var cloud = this.clouds.get(Phaser.Math.Between(970, 1190), Phaser.Math.Between(10, 250));
+
+        if (!cloud) return;
+
+        cloud
+        .setActive(true)
+        .setVisible(true);
+
+      }
+
+
+    // adding mountains
+    addMountains(){
+      let rightmostMountain = this.getRightmostMountain();
+      if(rightmostMountain < game.config.width * 2){
+        let mountain = this.physics.add.sprite(rightmostMountain + Phaser.Math.Between(100, 350), game.config.height - Phaser.Math.Between(100, 125), "mountain").setScale(.5);
+        mountain.setOrigin(0.5, 1);
+        mountain.body.setVelocityX(gameOptions.mountainSpeed * -1)
+        this.mountainGroup.add(mountain);
+        if(Phaser.Math.Between(0, 1)){
+          mountain.setDepth(1);
+        }
+        var ind = Phaser.Math.Between(0, 200);
+        ind>150?ind=0:ind>80?ind=1:ind=2;
+        mountain.setFrame(ind);
+        this.addMountains()
+      }
+    }
+
+    // getting rightmost mountain x position
+    getRightmostMountain(){
+      let rightmostMountain = -200;
+      this.mountainGroup.getChildren().forEach(function(mountain){
+        rightmostMountain = Math.max(rightmostMountain, mountain.x);
+      })
+      return rightmostMountain;
+    }
+
+    // the core of the script: platform are added from the pool or created on the fly
+    addPlatform(platformWidth, posX, posY){
+      this.addedPlatforms ++;
+      let platform;
+      if(this.platformPool.getLength()){
+        platform = this.platformPool.getFirst();
+        platform.x = posX;
+        platform.y = posY;
+        platform.active = true;
+        platform.visible = true;
+        this.platformPool.remove(platform);
+        let newRatio =  platformWidth / platform.displayWidth;
+        platform.displayWidth = platformWidth;
+        platform.tileScaleX = 1 / platform.scaleX;
+      }
+      else{
+          // platformWidth<400?platformWidth = 400:platformWidth++;
+          platform = this.add.tileSprite(posX, posY, platformWidth, 53, "platform").setScale(.75,1);
+
+
+          this.physics.add.existing(platform);
+          platform.body.setImmovable(true);
+          platform.body.setVelocityX(Phaser.Math.Between(gameOptions.platformSpeedRange[0], gameOptions.platformSpeedRange[1]) * -1);
+          platform.setDepth(20);
+          this.platformGroup.add(platform);
+        }
+        this.nextPlatformDistance = Phaser.Math.Between(gameOptions.spawnRange[0], gameOptions.spawnRange[1]);
+      }
+
+    // the player jumps when on the ground, or once in the air as long as there are jumps left and the first jump was on the ground
+    // and obviously if the player is not dying
+    jump(){
+      if((!this.dying) && (this.player.body.touching.down || (this.playerJumps > 0 && this.playerJumps < gameOptions.jumps))){
+        if(this.player.body.touching.down){
+          this.playerJumps = 0;
+        }
+
+        this.jumpS.play();
+        this.player.setVelocityY(gameOptions.jumpForce * -1);
+        this.playerJumps ++;
+
+            // stops animation
+            this.player.anims.stop();
+          }
+        }
+
+        update(time,delta){
+
+
+
+        // game over
+        if(this.player.y > game.config.height){
+            // this.scene.start("PlayGame");
+
+        this.btn.setVisible(true);
+        this.btnText.setVisible(true);
+        this.titleText.setVisible(true);
+          }
+
+          this.player.x = gameOptions.playerStartPosition;
+
+        // recycling platforms
+        let minDistance = game.config.width;
+        let rightmostPlatformHeight = 0;
+        this.platformGroup.getChildren().forEach(function(platform){
+          let platformDistance = game.config.width - platform.x - platform.displayWidth / 2;
+          if(platformDistance < minDistance){
+            minDistance = platformDistance;
+            rightmostPlatformHeight = platform.y;
+          }
+          if(platform.x < - platform.displayWidth / 2){
+            this.platformGroup.killAndHide(platform);
+            this.platformGroup.remove(platform);
+          }
+        }, this);
+
+
+        // recycling mountains
+        this.mountainGroup.getChildren().forEach(function(mountain){
+          if(mountain.x < - mountain.displayWidth){
+            let rightmostMountain = this.getRightmostMountain();
+            mountain.x = rightmostMountain + Phaser.Math.Between(100, 350);
+            mountain.y = game.config.height + Phaser.Math.Between(0, 100);
+            mountain.setFrame(Phaser.Math.Between(0, 3))
+            if(Phaser.Math.Between(0, 1)){
+              mountain.setDepth(1);
+            }
+          }
+        }, this);
+
+        this.clouds.children.iterate(function (cloud) {
+              // console.log( cloud );
+              cloud.x -= cloud.data.values.speed * delta;
+              if (cloud.x < -100 ) {
+                this.clouds.killAndHide(cloud);
+              }
+            },this);
+
+        // adding new platforms
+        if(minDistance > this.nextPlatformDistance){
+          let nextPlatformWidth = Phaser.Math.Between(gameOptions.platformSizeRange[0], gameOptions.platformSizeRange[1]);
+          let platformRandomHeight = gameOptions.platformHeighScale * Phaser.Math.Between(gameOptions.platformHeightRange[0], gameOptions.platformHeightRange[1]);
+          let nextPlatformGap = rightmostPlatformHeight + platformRandomHeight;
+          let minPlatformHeight = game.config.height * gameOptions.platformVerticalLimit[0];
+          let maxPlatformHeight = game.config.height * gameOptions.platformVerticalLimit[1];
+          let nextPlatformHeight = Phaser.Math.Clamp(nextPlatformGap, minPlatformHeight, maxPlatformHeight);
+          this.addPlatform(nextPlatformWidth, game.config.width + nextPlatformWidth / 2, nextPlatformHeight);
+        }
+      }
+
+    };
+
+
+
--- a/src/Scenes/PreloaderScene.js
+++ b/src/Scenes/PreloaderScene.js
@ -0,0 +1,137 @@
+import 'phaser';
+// import Phaser from '../phaser.min';
+import config from '../Config/config';
+
+export default class PreloaderScene extends Phaser.Scene {
+  constructor () {
+    super('Preloader');
+  }
+
+  init () {
+    this.readyCount = 0;
+  }
+
+  preload () {
+
+    // var width = this.cameras.main.width;
+    // var height = this.cameras.main.height;
+
+    var width = config.width;
+    var height = config.height;
+
+
+    this.titleText = this.add.text(config.width/2, 250, "IPv6 Penguin", { 
+      font: "68px Arial Black",
+      wordWrap: { width: 820, useAdvancedWrap: true },
+      color: '#4AB6F5',
+      align: 'center'
+    }).setOrigin(.5);
+    this.titleText.setStroke('#ffffff', 23);
+
+    // display progress bar
+    var progressBar = this.add.graphics().setDepth(10);
+    var progressBox = this.add.graphics();
+    progressBox.fillStyle(0x222222, 0.8);
+    progressBox.fillRect(225, config.height/2 + 200, (width / 2) + 10, 50);
+
+    var loadingText = this.make.text({
+      x: width / 2,
+      y: height / 2 + 50,
+      text: 'Loading...',
+      style: {
+        font: '60px monospace',
+        fill: '#ffffff'
+      }
+    });
+    loadingText.setOrigin(0.5, 0.5);
+
+    var percentText = this.make.text({
+      x: width / 2,
+      y: height / 2 + 140,
+      text: '0%',
+      style: {
+        font: '38px monospace',
+        fill: '#ffffff'
+      }
+    });
+    percentText.setOrigin(0.5, 0.5);
+
+    // update progress bar
+    this.load.on('progress', function (value) {
+      percentText.setText(parseInt(value * 100) + '%');
+      progressBar.clear();
+      progressBar.fillStyle(0xffffff, 1);
+      progressBar.fillRect(225 + 5, config.height/2 + 205, (width / 2) * value, 40);
+    });
+
+
+    // remove progress bar when complete
+    this.load.on('complete', function () {
+      progressBar.destroy();
+      progressBox.destroy();
+      loadingText.destroy();
+      percentText.destroy();
+      this.ready();
+    }.bind(this));
+
+
+    console.log('preloading game...');
+
+    this.load.image("bg", "assets/bg.png"); 
+    this.load.image("btn", "assets/btn.png");
+    this.load.image("hand", "assets/hand.png");
+    this.load.image("ocean", "assets/ocean.png");
+    this.load.image("title", "assets/title.png");
+
+    this.load.image("cloud1", "assets/cloud1.png");
+    this.load.image("cloud2", "assets/cloud2.png");
+    this.load.image("cloud3", "assets/cloud3.png");
+    this.load.image("cloud4", "assets/cloud4.png");
+    this.load.image("cloud5", "assets/cloud5.png");
+
+        this.load.image("platform", "assets/platform.png");
+
+        // player is a sprite sheet made by 24x48 pixels
+        this.load.spritesheet("player", "assets/player.png", {
+            frameWidth: 60,
+            frameHeight: 65
+        });
+
+        // mountains are a sprite sheet made by 512x512 pixels
+        this.load.spritesheet("mountain", "assets/mountain.png", {
+            frameWidth: 720,
+            frameHeight: 660
+        });
+        // mountains are a sprite sheet made by 512x512 pixels
+        // this.load.spritesheet("platform", "assets/platform.png", {
+        //     frameWidth: 400,
+        //     frameHeight: 200
+        // });
+    this.load.audio("jump", ["assets/jump.ogg","assets/jump.mp3"]);
+    this.load.audio('bgMusic', ['assets/bg_music.ogg','assets/bg_music.mp3']);
+
+ 
+  }
+
+  create () {
+
+
+        // setting player animation
+        this.anims.create({
+            key: "run",
+            frames: this.anims.generateFrameNumbers("player", {
+                start: 0,
+                end: 10
+            }),
+            frameRate: 20,
+            repeat: -1
+        });
+
+    this.scene.start('Title');
+  }
+
+  ready () {
+    // this.scene.start('Result',{ point : 10, mistake : 1});
+    // this.scene.start('Title');
+  }
+};
--- a/src/Scenes/ResultScene.js
+++ b/src/Scenes/ResultScene.js
@ -0,0 +1,102 @@
+import 'phaser';
+// import Phaser from '../phaser.min';
+import config from '../Config/config';
+
+export default class GameScene extends Phaser.Scene {
+
+  constructor () {
+    super('Result');
+  }
+
+  init (data) {
+    this.point = data.point;
+    this.mistake = data.mistake;
+    console.log(data);
+
+    // Get a reference to the database service
+  // var database = firebase.database();
+
+  // var ref = database.ref();
+  // // ref.child('mike').set({'firstName': "Test", 'lastName': "Test last name"}).then().catch();
+  // ref.push({'playerName': "Test___", 'point': this.point, 'mistake': this.mistake, 'locale': "Test___", 'platform': "Test___", 'playerID': "Test___", 'playerPhotoURL': "Test___", 'time': (new Date()).getTime()});
+  } 
+
+
+  create () {
+
+    var msg,msg2;
+    if(this.mistake>5){
+      msg = ` `;
+      msg2 = `Ditt resultat visar på en låg förmåga att para beteenden kopplade till hög respektive låg emotionell intelligens. Vill du lära dig mer om upphovet till ditt resultat och få möjlighet till en mer djupgående bedömning av dina emotionsförmågor så tryck på knappen`;
+    }
+    else if(this.mistake>2){
+      msg = `Bra jobbat!`;
+      msg2 = `Ditt resultat visar på en god förmåga att para beteenden kopplade till hög respektive låg emotionell intelligens. Vill du lära dig mer om upphovet till ditt resultat och få möjlighet till en mer djupgående bedömning av dina emotionsförmågor så tryck på knappen` ;
+    }
+    else{
+      msg = `Bra jobbat!`;
+      msg2 = `Ditt resultat visar på en mycket god förmåga att para beteenden kopplade till hög respektive låg emotionell intelligens. Vill du lära dig mer om upphovet till ditt resultat och få möjlighet till en mer djupgående bedömning av dina emotionsförmågor så tryck på knappen` ;
+    }
+    
+    var text0 = this.add.text(30, 30, "Resultat: "+this.point+"p", { 
+      font: "48px font1",
+      wordWrap: { width: 730, useAdvancedWrap: true },
+      color: '#ffffff',
+      align: 'left'
+    }).setDepth(3);
+    
+
+    var text1 = this.add.text(config.width/2, config.height/2 - 180, msg , { 
+      font: "42px Arial",
+      wordWrap: { width: 900, useAdvancedWrap: true },
+      color: '#F29B27',
+      align: 'center'
+    }).setDepth(3).setOrigin(.5);
+
+    var text2 = this.add.text(text1.getBottomCenter().x, text1.getBottomCenter().y + 20, msg2 , { 
+      font: "42px Arial",
+      wordWrap: { width: 900, useAdvancedWrap: true },
+      color: '#ffffff',
+      align: 'center'
+    }).setDepth(3).setOrigin(.5,0);
+
+    var elogo = this.add.sprite(5, config.height, "elogo").setOrigin(0,1);
+    this.add.text(elogo.getBottomRight().x + 10, config.height - 5, "©" , { 
+      font: "52px Arial",
+      color: '#ffffff',
+      align: 'center'
+    }).setDepth(3).setOrigin(0,1);
+
+    var btnClose = this.add.sprite(config.width/2, config.height - 100, "btn").setDisplaySize(300, 80).setDepth(1).setVisible(true);
+    this.tryText = this.add.text(config.width/2, config.height - 100, 'Nyfiken?', { 
+      font: "52px Arial",
+      color: '#F29B27',
+      align: 'center'
+    }).setDepth(3).setOrigin(.5).setVisible(true);
+
+    btnClose.setInteractive();
+    btnClose.on('pointerdown', function () {
+      // this.scene.start('Game');
+      this.newTab();
+    }.bind(this));
+    btnClose.on('pointerover', function () {
+      btnClose.setDisplaySize(320, 120);
+    }.bind(this));
+    btnClose.on('pointerout', function () {
+      btnClose.setDisplaySize(300, 100);
+    }.bind(this));
+
+    console.log( btnClose );
+
+  }
+
+  newTab(){
+    // var win = window.open("http://www.onlinetester.se/privatperson");
+    var win = window.location.replace("http://www.onlinetester.se/privatperson");;
+    //win.focus();
+  }
+
+};
+
+
+
--- a/src/Scenes/TitleScene.js
+++ b/src/Scenes/TitleScene.js
@ -0,0 +1,54 @@
+import 'phaser';
+// import Phaser from '../phaser.min';
+import config from '../Config/config';
+
+export default class TitleScene extends Phaser.Scene {
+
+  constructor () {
+    super('Title');
+  }
+
+
+  create () {
+
+    var background = this.add.sprite(config.width/2, config.height/2, 'bg');
+
+    var background = this.add.sprite(config.width/2, 340, 'title');
+
+    // this.titleText = this.add.text(config.width/2, 250, "IPv6 Penguin", { 
+    //   font: "58px Arial Black",
+    //   wordWrap: { width: 520, useAdvancedWrap: true },
+    //   color: '#4AB6F5',
+    //   align: 'center'
+    // }).setOrigin(.5);
+    // // this.titleText.setStroke('#2E732C', 5);
+    // this.titleText.setStroke('#ffffff', 13);
+
+    var btn = this.add.sprite(config.width/2, 500, 'btn').setDisplaySize(300, 80);
+    this.btnText = this.add.text(btn.x, btn.y, "Start", { 
+      font: "52px Arial",
+      wordWrap: { width: 500, useAdvancedWrap: true },
+      color: '#4AB6F5',
+      align: 'center'
+    }).setOrigin(.5);
+    btn.setInteractive();
+    btn.on('pointerdown', function () {
+
+        // this.scene.restart();
+      this.scene.start('Game');
+  }.bind(this));
+    btn.on('pointerover', function () {
+      btn.setDisplaySize(310, 110);
+    }.bind(this));
+    btn.on('pointerout', function () {
+      btn.setDisplaySize(300, 100);
+    }.bind(this));
+
+
+  }
+
+
+};
+
+
+
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,28 @@
+import Phaser from "phaser";
+
+import config from './Config/config';
+import BootScene from './Scenes/BootScene';
+import PreloaderScene from './Scenes/PreloaderScene';
+import TitleScene from './Scenes/TitleScene';
+import GameScene from './Scenes/GameScene';
+import ResultScene from './Scenes/ResultScene';
+
+import Model from './Model';
+
+
+class Game extends Phaser.Game {
+  constructor () {
+    super(config);
+    const model = new Model();
+    this.globals = { model, bgMusic: null };
+    this.scene.add('Boot', BootScene);
+    this.scene.add('Preloader', PreloaderScene);
+    this.scene.add('Title', TitleScene);
+    this.scene.add('Game', GameScene);
+    this.scene.add('Result', ResultScene);
+    this.scene.start('Preloader');
+}
+}
+
+console.log("initializing Game");
+window.game = new Game();
--- a/webpack/base.js
+++ b/webpack/base.js
@ -0,0 +1,38 @@
+const webpack = require("webpack");
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+
+module.exports = {
+  mode: "development",
+  devtool: "eval-source-map",
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader"
+        }
+      },
+      {
+        test: [/\.vert$/, /\.frag$/],
+        use: "raw-loader"
+      },
+      {
+        test: /\.(gif|png|jpe?g|svg|xml)$/i,
+        use: "file-loader"
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      "typeof PLUGIN_FBINSTANT": JSON.stringify(true),
+      CANVAS_RENDERER: JSON.stringify(true),
+      WEBGL_RENDERER: JSON.stringify(true),
+    }),
+    new HtmlWebpackPlugin({
+      template: "./index.html"
+    })
+  ]
+};
--- a/webpack/prod.js
+++ b/webpack/prod.js
@ -0,0 +1,27 @@
+const merge = require("webpack-merge");
+const path = require("path");
+const base = require("./base");
+const TerserPlugin = require("terser-webpack-plugin");
+
+module.exports = merge(base, {
+  mode: "production",
+  output: {
+    filename: "bundle.min.js"
+  },
+  devtool: false,
+  performance: {
+    maxEntrypointSize: 900000,
+    maxAssetSize: 900000
+  },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          output: {
+            comments: false
+          }
+        }
+      })
+    ]
+  }
+});