Merge pull request #7 from Yareaj/dev

Added a step counter for the game!

README.md

@@ -9,4 +9,4 @@ A JavaScript implementation of the 🎮 [Sokoban](https://en.wikipedia.org/wiki/
 - [Footstep](./assets/sounds/levelUp.wav) sound effect was taken from [freesound.org](https://freesound.org/people/EVRetro/sounds/501102/)
 - All of the game's image assets were retrieved from [Kenney.nl](https://kenney.nl/assets/sokoban)
 - The original level processor and map format was based on [csixteen](https://github.com/csixteen/sokoban)'s implementation of Sokoban (`Thanks for the help Pedro :)`)
-- The idea of implementing the [Sokoban Level Format](http://sokobano.de/wiki/index.php?title=Level_format) was implemented based on [krzysu](https://github.com/krzysu/elm-sokoban-player)'s implementation of Sokoban
+- The idea of implementing the [Sokoban Level Format](http://sokobano.de/wiki/index.php?title=Level_format), as well as taking the Fredoka font was implemented based on [krzysu](https://github.com/krzysu/elm-sokoban-player)'s implementation of Sokoban

assets/json/buttonStyles.json

@@ -2,7 +2,7 @@
     "background-color" : "#4a3429",
     "border" : "none",
     "border-radius" : "3px",
-    "font-family" : "SyntaxBold",
+    "font-family" : "Fredoka-Medium",
     "font-size" : "23px",
     "color" : "#ffdeb3"
 }

functions/functions.js

@@ -60,6 +60,7 @@ function mapReload() {
 
     // Reset control variables
     placedTargets = 0;
+    stepsTaken = 0;
     levelPass = false;
     successAudio = true;
 

functions/levelHandler.js

@@ -23,10 +23,9 @@ function preload() {
     }
 
     // Import the button's fonts into the project
-    loadFont('./assets/fonts/Averta.otf');
-    loadFont('./assets/fonts/Syntax.otf');
-    loadFont('./assets/fonts/SyntaxBlack.otf');
-    loadFont('./assets/fonts/SyntaxBold.otf');
+    loadFont('./assets/fonts/Fredoka-Bold.ttf');
+    loadFont('./assets/fonts/Fredoka-Medium.ttf');
+    loadFont('./assets/fonts/Fredoka-Regular.ttf');
 
     // Import the map string into the global variable
     mapOutline = loadStrings(`./assets/levels/level${levelId}.txt`);
@@ -97,12 +96,8 @@ function setup() {
     menuButton.mousePressed(toMenu);
 
     // Set up the buttons and style them respectively
-    const buttonPropList = Object.keys(buttonStyles);
-    for (let propIterator = 0; propIterator<buttonPropList.length ; propIterator++) {
-        const propertyName = buttonPropList[propIterator];
-        menuButton.style(propertyName, buttonStyles[propertyName]);
-        nextButton.style(propertyName, buttonStyles[propertyName]);
-    };
+    applyStyles(menuButton, buttonStyles);
+    applyStyles(nextButton, buttonStyles);
 }
 
 function draw() {
@@ -125,19 +120,29 @@ function draw() {
         outline: 'green'
     });
 
+    // Add the step counter
+    fill('#ffdeb3');
+    textFont('Fredoka-Medium');
+    textSize(Quadrille.CELL_LENGTH*0.5);
+    const xCordSteps = ((width+(Quadrille.CELL_LENGTH/2))/2)-(textWidth('Steps'));
+    text(`Steps: ${stepsTaken}`, xCordSteps, Quadrille.CELL_LENGTH/1.5);
+
     // Stop game execution upon finishing the level and create the buttons
     if (levelPass) {
         // Create screening
         fill(color('rgba(36, 166, 91, 0.80)'));
         rect(0,0, Quadrille.CELL_LENGTH*columns, Quadrille.CELL_LENGTH*rows);
         // Display the done level text
-        textFont('SyntaxBold');
+        textFont('Fredoka-Medium');
         textSize(40);
-        fill('#000');
+        fill('#4a3429');
         text('Level Passed', menuButton.x-(textWidth('Level Passed')/5), menuButton.y-menuButton.height*1);
         // Show the menu button and next level buttons
         menuButton.show();
         nextButton.show();
+
+        textSize(23);
+        text(`Steps: ${stepsTaken}`, xCordSteps, menuButton.y+(23*2.2));
 
         // Reproduce levelUp audio and make sure it only happens once
         if (successAudio) {

functions/movement.js

@@ -44,6 +44,7 @@ function playerMove(direction) {
             } else if (direction == 'right') {
                 playerPos.col += 1;
             }
+            stepsTaken += 1;
             return sounds.step.play();
         }
     }
@@ -57,6 +58,7 @@ function playerMove(direction) {
     } else if (direction == 'right') {
         playerPos.col += 1;
     }
-
+
+    stepsTaken += 1;
     sounds.step.play();
 }

functions/objects.js

@@ -54,4 +54,13 @@ function boxOnTarget(boxIndex) {
     const placedBoxes = boxesQuadrilles.filter(box => box[0].read(0,0) == images.blocks.boxSecured);
     placedTargets = placedBoxes.length;
     levelPass = targetQuadrilles.length == placedTargets;
+}
+
+// Function to iterate and apply styles to a given object
+function applyStyles(object, jsonStyles) {
+    const objectPropList = Object.keys(jsonStyles);
+    for (let propIterator = 0; propIterator<objectPropList.length ; propIterator++) {
+        const propertyName = objectPropList[propIterator];
+        object.style(propertyName, jsonStyles[propertyName]);
+    };
 }

globalVariables.js

@@ -16,14 +16,14 @@ let placedTargets = 0, levelPass = false, successAudio = true;
 Quadrille.CELL_LENGTH = 50;
 Quadrille.OUTLINE_WEIGHT = 0;
 
-// Definition of the buttons' data objects
-let menuButton, menuButtonData;
-
 // Definition of the map and it's dimensions
 let mapOutline, columns, rows;
 
 // The ID of the map to load!
 let levelId = 0;
 
 // Define the button styles
-let buttonStyles;
+let buttonStyles;
+
+// Define the step counter variable
+let stepsTaken = 0;

index.js

@@ -7,7 +7,7 @@ let head;
 
 function preload() {
     head = loadImage('./assets/player/head.png');
-    loadFont('./assets/fonts/SyntaxBlack.otf');
+    loadFont('./assets/fonts/Fredoka-Medium.ttf');
 }
 
 function setup() {
@@ -18,7 +18,7 @@ function draw() {
     background('#6f6f');
     image(head, 0, 0);
 
-    textFont('SyntaxBlack');
+    textFont('Fredoka-Medium');
     textSize(40);
     fill('#000');
     const w = textWidth('Sokoban Worlds');