|
|
@@ -22,7 +22,7 @@ class MyGame extends Phaser.Scene {
|
|
|
|
|
|
this.cursor;
|
|
|
this.playerSpeed = 300;
|
|
|
- this.playerStart = {x: 400, y: 0};
|
|
|
+ this.playerStart = {x: 0, y: 0};
|
|
|
this.playerJumpVelocity = -500;
|
|
|
this.goalX = 5000;
|
|
|
|
|
|
@@ -36,15 +36,22 @@ class MyGame extends Phaser.Scene {
|
|
|
|
|
|
this.spikes;
|
|
|
|
|
|
- this.controls = {
|
|
|
- left: false,
|
|
|
- right: false,
|
|
|
- jump: false
|
|
|
- }
|
|
|
+ this.moveLeft = false;
|
|
|
+ this.moveRight = false;
|
|
|
+ this.jumpPressed = false;
|
|
|
|
|
|
|
|
|
this.test = Phaser.Physics.Arcade.World;
|
|
|
|
|
|
+ this.buttonY = 400;
|
|
|
+
|
|
|
+ this.leftBtnX = -400;
|
|
|
+ this.leftBtn;
|
|
|
+ this.rightBtnX = -280;
|
|
|
+ this.rightBtn;
|
|
|
+ this.jumpBtnX = 700;
|
|
|
+ this.jumpBtn;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
preload() {
|
|
|
@@ -65,6 +72,79 @@ class MyGame extends Phaser.Scene {
|
|
|
|
|
|
|
|
|
|
|
|
+
|
|
|
+ //#region Input
|
|
|
+
|
|
|
+ this.input.addPointer(2);
|
|
|
+
|
|
|
+ // Track button states
|
|
|
+
|
|
|
+
|
|
|
+ // LEFT BUTTON
|
|
|
+ this.leftBtn = this.add.rectangle(this.leftBtnX, this.buttonY, 100, 100, 0x0000ff, 1)
|
|
|
+ .setInteractive();
|
|
|
+
|
|
|
+ this.leftBtnPlayerDistanceX = this.playerStart.x - this.leftBtnX;
|
|
|
+
|
|
|
+
|
|
|
+ this.leftBtn.on("pointerdown", () => {
|
|
|
+ this.moveLeft = true;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.leftBtn.on("pointerup", () => {
|
|
|
+ this.moveLeft = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.leftBtn.on("pointerout", () => {
|
|
|
+ this.moveLeft = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ // RIGHT BUTTON
|
|
|
+ this.rightBtn = this.add.rectangle(this.rightBtnX, this.buttonY, 100, 100, 0x00ff00, 0.5)
|
|
|
+ .setInteractive();
|
|
|
+
|
|
|
+ this.rightBtnPlayerDistanceX = this.playerStart.x - this.rightBtnX;
|
|
|
+
|
|
|
+
|
|
|
+ this.rightBtn.on("pointerdown", () => {
|
|
|
+ this.moveRight = true;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.rightBtn.on("pointerup", () => {
|
|
|
+ this.moveRight = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.rightBtn.on("pointerout", () => {
|
|
|
+ this.moveRight = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ // JUMP BUTTON
|
|
|
+ this.jumpBtn = this.add.rectangle(this.jumpBtnX, this.buttonY, 100, 100, 0xff0000, 0.5)
|
|
|
+ .setInteractive();
|
|
|
+
|
|
|
+ this.jumpBtnPlayerDistanceX = this.playerStart.x - this.jumpBtnX;
|
|
|
+
|
|
|
+
|
|
|
+ this.jumpBtn.on("pointerdown", () => {
|
|
|
+ this.jumpPressed = true;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.jumpBtn.on("pointerup", () => {
|
|
|
+ this.jumpPressed = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.jumpBtn.on("pointerout", () => {
|
|
|
+ this.jumpPressed = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ //#endregion
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
this.player = this.physics.add.image(this.playerStart.x, this.playerStart.y,"redSquare").setOrigin(0,0); //https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Factory#image
|
|
|
this.player.setBounce(0); //https://newdocs.phaser.io/docs/3.55.2/Phaser.Physics.Arcade.Body#setBounce
|
|
|
@@ -125,21 +205,17 @@ class MyGame extends Phaser.Scene {
|
|
|
|
|
|
//#region Camera
|
|
|
//(follow Target, round pixel to int, lerpX, lerpY, offsetX, offsetY) //https://newdocs.phaser.io/docs/3.60.0/focus/Phaser.Cameras.Scene2D.Camera-startFollow
|
|
|
- this.cameras.main.startFollow(this.player, false, 1, 0, 0, 0);
|
|
|
+ this.cameras.main.startFollow(this.player, false, 1, 0, 0, -100);
|
|
|
|
|
|
this.cameras.main.backgroundColor= "black";
|
|
|
|
|
|
this.cameras.main.setViewport(-config.width / 2, -config.height/2, config.width*2, config.height*2);
|
|
|
|
|
|
- //#endregion
|
|
|
-
|
|
|
-
|
|
|
- //#region Input
|
|
|
-
|
|
|
- this.input.addPointer(2);
|
|
|
+ this.cameras.main.zoom = 0.5;
|
|
|
|
|
|
//#endregion
|
|
|
|
|
|
+
|
|
|
//#region HUD
|
|
|
|
|
|
//this.playerText = this.add.text(10, 10, 'Position: (0, 0)', { fontSize: '16px', fill: '#00FF00' });
|
|
|
@@ -156,38 +232,21 @@ class MyGame extends Phaser.Scene {
|
|
|
//#region Input Manager
|
|
|
const {left, right, space} = this.cursor;
|
|
|
|
|
|
- this.controls = {
|
|
|
- left: false,
|
|
|
- right: false,
|
|
|
- jump: false
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
- const w = window.innerWidth;
|
|
|
- const h = window.innerHeight;
|
|
|
|
|
|
- if (pointer.y > h * 0.7) {
|
|
|
- this.controls.jump = true;
|
|
|
- } else if (pointer.x < w / 2) {
|
|
|
- this.controls.left = true;
|
|
|
- } else {
|
|
|
- this.controls.right = true;
|
|
|
- }
|
|
|
|
|
|
|
|
|
- console.log(this.controls);
|
|
|
|
|
|
- if (left.isDown || this.controls.left){
|
|
|
+ if (left.isDown || this.moveLeft){
|
|
|
console.log("left press");
|
|
|
this.player.setVelocityX(-this.playerSpeed);
|
|
|
- } else if (right.isDown || this.controls.right){
|
|
|
+ } else if (right.isDown || this.moveRight){
|
|
|
console.log("right press");
|
|
|
this.player.setVelocityX(this.playerSpeed);
|
|
|
} else {
|
|
|
this.player.setVelocityX(0);
|
|
|
}
|
|
|
|
|
|
- if (space.isDown || this.controls.jump && onGround){
|
|
|
+ if ((space.isDown || this.jumpPressed) && onGround){
|
|
|
this.player.setVelocityY(this.playerJumpVelocity);
|
|
|
}
|
|
|
|
|
|
@@ -196,8 +255,9 @@ class MyGame extends Phaser.Scene {
|
|
|
|
|
|
//#region Update HUD
|
|
|
|
|
|
- //this.playerText.setText('Position: ('+this.player.x.toFixed(0)+', '+ this.player.y.toFixed(0)+')');
|
|
|
-
|
|
|
+ this.leftBtn.setPosition(this.player.x - this.leftBtnPlayerDistanceX, this.buttonY);
|
|
|
+ this.rightBtn.setPosition(this.player.x - this.rightBtnPlayerDistanceX, this.buttonY);
|
|
|
+ this.jumpBtn.setPosition(this.player.x - this.jumpBtnPlayerDistanceX, this.buttonY);
|
|
|
|
|
|
//#endregion
|
|
|
|
|
|
@@ -206,7 +266,7 @@ class MyGame extends Phaser.Scene {
|
|
|
this.scene.restart();
|
|
|
alert("You lost.");
|
|
|
} else if (this.player.x > this.goalX){
|
|
|
- this.scene.stop();
|
|
|
+ this.scene.restart()
|
|
|
alert("You won!");
|
|
|
}
|
|
|
|
|
|
@@ -221,8 +281,8 @@ class MyGame extends Phaser.Scene {
|
|
|
|
|
|
const config = {
|
|
|
type: Phaser.AUTO,
|
|
|
- width: window.innerWidth,
|
|
|
- height: window.innerHeight,
|
|
|
+ width: window.innerWidth - 10,
|
|
|
+ height: window.innerHeight- 10,
|
|
|
backgroundColor: "#ffffff", //sets the background color of the scene
|
|
|
scene: MyGame,
|
|
|
physics: {
|
Adam