MarcusOtter · latioms · Jan 25, 2024 · Jan 25, 2024 · Jan 25, 2024 · Jan 25, 2024
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -1,12 +1,14 @@
 name: Deploy to GitHub Pages
 on:
+
   push:
     branches:
       - main
 
 permissions:
   contents: write
 
+
 jobs:
   deploy:
     runs-on: ubuntu-latest

diff --git a/game/index.html b/game/index.html
@@ -1,10 +1,12 @@
-<!-- This file is based on the samples at https://doc.babylonjs.com/start/chap1/first_app -->
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 	<head>
-		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<!-- import tailwind css -->
+		<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
 		<title>Flying Cube Game</title>
-
 		<style>
 			html,
 			body {
@@ -29,19 +31,19 @@
 	</head>
 
 	<body>
-		<canvas id="renderCanvas" touch-action="none"></canvas>
-		<!-- touch-action="none" for best results from PEP -->
 
-		<!--  <script type="module" src="main.js"></script>  -->
 
+		<canvas id="renderCanvas" touch-action="none"></canvas>
+		<!-- touch-action="none" for best results from PEP -->
+		<script src="src/hud.js"></script>
 		<script src="src/constants.js"></script>
 		<script src="src/state-manager.js"></script>
 		<script src="src/game-object.js"></script>
 		<script src="src/barrier.js"></script>
 		<script src="src/player.js"></script>
 		<script src="src/mainmenu.js"></script>
-		<script src="src/hud.js"></script>
 		<script src="src/scene.js"></script>
 		<script src="src/game.js"></script>
+		<!--  <script type="module" src="main.js"></script>  -->
 	</body>
 </html>
diff --git a/game/src/barrier.js b/game/src/barrier.js
@@ -36,6 +36,11 @@ class Barrier extends GameObject {
 		this.ceilingBox.position.x = this.location;
 		this.floorBox.position.x = this.location;
 
+		// update the score if the player has passed the barrier
+		if (this.location < 0 && this.location + deltaTime * obstacleSpeed > 0) {
+			addScore(1);
+		}
+
 		if (this.location < -25) {
 			destroyObject(this);
 		}
@@ -60,6 +65,7 @@ class Barrier extends GameObject {
 				return true;
 			}
 		}
+
 		return false;
 	}
 }
diff --git a/game/src/hud.js b/game/src/hud.js
@@ -1,4 +1,5 @@
 var score = 0;
+var currentScore = 0;
 var scoreText;
 
 var createHud = function () {
@@ -19,17 +20,31 @@ var createHud = function () {
 	hudTexture.addControl(scoreText);
 };
 
+var setScore = function (score, currentScore) {
+	scoreText.text = "score: " + score  + "        " + "current: " + currentScore;
+};
+
 var updateScoreText = function () {
-	scoreText.text = "Score: " + score;
+	localStorage = navigator.localStorage;
+	score = localStorage.getItem("highScore")
+
+	if (currentScore  > score) {
+		score = currentScore;
+		localStorage.setItem("highScore", score);
+	}
+
+	setScore(score, currentScore);
 };
 
+
 var resetScore = function () {
-	console.log("Score reset at: " + score);
-	score = 0;
-	updateScoreText();
+	console.log("Score reset at: " + currentScore);
+	currentScore = 0;
+
+	setScore(score, currentScore);
 };
 
 var addScore = function (points) {
-	score += points;
+	currentScore += points;
 	updateScoreText();
 };
diff --git a/game/src/mainmenu.js b/game/src/mainmenu.js
@@ -92,8 +92,8 @@ class MainMenu extends GameObject {
 		this.welcomeText = new BABYLON.GUI.TextBlock();
 		this.welcomeText.text = "Flying Cube Game!";
 		this.welcomeText.fontFamily = "Impact";
-		this.welcomeText.color = "white";
-		this.welcomeText.fontSize = 72;
+		this.welcomeText.color = "orange";
+		this.welcomeText.fontSize = 70;
 		this.welcomeText.verticalAlignment = BABYLON.GUI.TextBlock.VERTICAL_ALIGNMENT_TOP;
 		this.welcomeText.horizontalAlignment = BABYLON.GUI.TextBlock.HORIZONTAL_ALIGNMENT_CENTER;
 		this.welcomeText.width = 0.5;
@@ -108,6 +108,7 @@ class MainMenu extends GameObject {
 		this.greetingText.horizontalAlignment = BABYLON.GUI.TextBlock.HORIZONTAL_ALIGNMENT_CENTER;
 		this.greetingText.width = 0.5;
 		this.greetingText.height = 0.7;
+		this.greetingText.top = "4%";
 
 		this.instructionsText = new BABYLON.GUI.TextBlock();
 		this.instructionsText.text = "press any key to play";
@@ -118,10 +119,14 @@ class MainMenu extends GameObject {
 		this.instructionsText.horizontalAlignment = BABYLON.GUI.TextBlock.HORIZONTAL_ALIGNMENT_CENTER;
 		this.instructionsText.width = 0.5;
 		this.instructionsText.height = 0.9;
+		this.instructionsText.top = "10%";
 
 		this.hudTexture.addControl(this.welcomeText);
 		this.hudTexture.addControl(this.greetingText);
 		this.hudTexture.addControl(this.instructionsText);
+
+		// Adjust the position of the greeting text
+		 // Adjust the percentage value as needed
 	}
 
 	hideUI() {

diff --git a/game/src/player.js b/game/src/player.js
@@ -27,6 +27,8 @@ class Player extends GameObject {
 		scene.removeMesh(this.playerMesh);
 	}
 
+
+
 	update(deltaTime) {
 		// Update the players physics:
 		this.velocity.y += gravity.y * deltaTime;
@@ -36,13 +38,16 @@ class Player extends GameObject {
 			this.endGame();
 		}
 
+
+
 		// To simplify game code the Player handles spawning obstacles (this makes it easier to track for collisions without writing a full handler)
 		// A side effect of this is that creating or destroying the Player can pause or start the game.
 		this.obstacleSpawnTimer -= deltaTime;
 		if (this.obstacleSpawnTimer <= 0) {
 			this.obstacleSpawnTimer = obstacleSpawnInterval;
 
-			createObject(new Barrier());
+			let obstacle = createObject(new Barrier());
+
 		}
 	}
 
@@ -78,6 +83,9 @@ class Player extends GameObject {
 		this.velocity.y = Math.min(cap, Math.max(-cap, this.velocity.y));
 	}
 
+	// create a function to update score in local storage
+
+
 	setupInputs() {
 		deviceSourceManager = new BABYLON.DeviceSourceManager(scene.getEngine());
 		/**
@@ -102,7 +110,7 @@ class Player extends GameObject {
 			// If Keyboard, add an Observer to change text
 			else if (deviceSource.deviceType === BABYLON.DeviceType.Keyboard) {
 				deviceSource.onInputChangedObservable.add((eventData) => {
-					if (eventData.type === "keydown" && eventData.key === " ") {
+					if (eventData.type === "keyup" && eventData.key === " ") {
 						this.onPlayerFlight();
 					}
 				});