created platform and player, camera follows player.

SteveSajeev · SteveSajeev · commit a65f21c51f99 · 2021-10-19T15:07:55.000+05:30
diff --git a/game/gameScene.js b/game/gameScene.js
@@ -0,0 +1,49 @@
+const Phaser = require("phaser");
+
+class GameScene extends Phaser.Scene {
+  constructor(){
+    super("GameScene");
+  }
+  preload(){
+    this.canvas = this.sys.game.canvas; //  Sets the canvas property for ease of acess
+  }
+  create(){
+
+
+    // Player
+    this.player = this.add.rectangle(300, 200,50,70, 0xff0000);
+    this.physics.add.existing(this.player);
+    this.player.body.setCollideWorldBounds(true);
+
+    // Platforms
+    let platformsArr = [];
+    platformsArr.push(this.add.rectangle(300, 400, 100, 30, 0x0000ff));
+    platformsArr.push(this.add.rectangle(500, 550, 200, 30, 0x0000ff));
+    // this.add.rectangle(300, 100, 100, 30, 0x0000ff);
+    // this.add.rectangle(300, 100, 100, 30, 0x0000ff);
+    // this.add.rectangle(300, 100, 100, 30, 0x0000ff);
+    let platforms = this.physics.add.staticGroup();
+    platforms.addMultiple(platformsArr);
+
+    this.physics.add.collider(this.player, platforms);
+
+    this.cursors = this.input.keyboard.createCursorKeys();
+
+
+    // Camera
+    this.cameras.main.setBounds(0,0, 3000, this.canvas.height);
+    this.cameras.main.startFollow(this.player);
+    this.cameras.main.setBackgroundColor('#ccccff'); 
+  }
+  update(){
+    if(this.cursors.left.isDown){
+      this.player.body.x = this.player.body.x-10;
+    } else if(this.cursors.right.isDown){
+      this.player.body.x = this.player.body.x+10;
+    } if((this.cursors.space.isDown || this.cursors.up.isDown) && this.player.body.onFloor()){
+      this.player.body.setVelocityY(-900);
+    }
+  }
+}
+
+module.exports = GameScene;
diff --git a/game/index.js b/game/index.js
@@ -1,50 +1,22 @@
+const Phaser = require("phaser");
+const GameScene = require("./gameScene");
+
 let width = window.innerWidth;
 let height = window.innerHeight;
 
+
 var config = {
   type: Phaser.AUTO,
   width,
   height,
   physics: {
     default: 'arcade',
     arcade: {
-      gravity: { y: 200 }
+      gravity: { y: 1500 },
+      debug: true
     }
   },
-  scene: {
-    preload: preload,
-    create: create
-  }
+  scene: GameScene
 };
 
-var game = new Phaser.Game(config);
-
-function preload ()
-{
-  this.load.setBaseURL('http://labs.phaser.io');
-
-  this.load.image('sky', 'assets/skies/space3.png');
-  this.load.image('logo', 'assets/sprites/phaser3-logo.png');
-  this.load.image('red', 'assets/particles/red.png');
-}
-
-function create ()
-{
-  this.add.image(400, 300, 'sky');
-
-  var particles = this.add.particles('red');
-
-  var emitter = particles.createEmitter({
-    speed: 100,
-    scale: { start: 1, end: 0 },
-    blendMode: 'NORMAL'
-  });
-
-  var logo = this.physics.add.image(400, 100, 'logo');
-
-  logo.setVelocity(100, 200);
-  logo.setBounce(1, 1);
-  logo.setCollideWorldBounds(true);
-
-  emitter.startFollow(logo);
-}
+var game = new Phaser.Game(config);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,8 +6,7 @@
   "scripts": {
     "dev": "concurrently \"npm:dev:server\" \"npm:dev:javascript\"",
     "dev:server": "node server/index.js",
-    "dev:javascript":"webpack --config webpack.dev.config.js --watch",
-
+    "dev:javascript": "webpack --config webpack.dev.config.js --watch",
     "production": "TODO: Will do the production compile commands later",
     "build": "webpack --config webpack.config.js"
   },
@@ -25,6 +24,7 @@
   "dependencies": {
     "concurrently": "^6.3.0",
     "express": "^4.17.1",
+    "phaser": "^3.55.2",
     "webpack": "^5.58.2",
     "webpack-cli": "^4.9.0"
   }
diff --git a/server/index.htm b/server/index.htm
@@ -19,7 +19,6 @@
 <body>
   <noscript>Sadly :( your browser doesn't support the game</noscript>
 	<!-- <canvas id="canvas">Sadly :( your browser doesn't support the game</canvas> -->
-  <script src="phaser.min.js"></script>
-  <script src="main-game.js"></script>
+  <script src="static/main-game.js"></script>
 </body>
 </html>
diff --git a/server/index.js b/server/index.js
@@ -3,7 +3,9 @@ const app = express();
 const path = require("path");
 const port = 3000;
 
-app.use(express.static("static"));
+app.use("/static", express.static("static"));
+app.use("/assets", express.static("assets"))
+
 app.get('/', (req, res) => {
   res.sendFile(path.join(__dirname, "index.htm"));
 });
diff --git a/static/phaser.min.js b/static/phaser.min.js
