Merge pull request #10 from Yareaj/dev

Adding sample levels to the game

README.md

@@ -5,8 +5,10 @@ A JavaScript implementation of the 🎮 [Sokoban](https://en.wikipedia.org/wiki/
 
 ### Credits
 - [Forbidden](./assets/sounds/forbidden.wav), [success](./assets/sounds/success.wav) sound effects created using [sfxr.me](https://sfxr.me/)
-- [Level Up](./assets/sounds/levelUp.wav) sound effect was taken from [freesound.org](https://freesound.org/people/EVRetro/sounds/535840/)
-- [Footstep](./assets/sounds/levelUp.wav) sound effect was taken from [freesound.org](https://freesound.org/people/EVRetro/sounds/501102/)
+- [Level Up](https://freesound.org/people/EVRetro/sounds/535840/), [Footstep](https://freesound.org/people/EVRetro/sounds/501102/) and [Level Alert](https://freesound.org/people/EVRetro/sounds/495004/) sound effets were created by [EVRetro](https://freesound.org/people/EVRetro)
 - 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), as well as taking the Fredoka font 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
+- The [Fredoka fonts](./assets/fonts/) were taken from [Google Fonts](https://fonts.google.com/specimen/Fredoka)
+- Levels were taken from the public [Sokoban Levels](https://www.sourcecode.se/sokoban/levels) list as depicted:
+    - Levels 1 - 10 taken or adapted from the `Boxxle 2` collection done by Thinking Rabbit.

assets/levels/level0.txt

@@ -1,10 +1,3 @@
-##########
-#        #
-#   @    #
-# $   $  #
-#   .    #
-####     #
-#   $ #. #
-#     #  #
-#  .  #  #
-##########
+#####
+#@$.#
+#####

assets/levels/level1.txt

@@ -1,10 +1,8 @@
-##########
-#        #
-#   @ .  #
-#     $  #
-#        #
-##### ####
-#     #  #
-#   $ #  #
-#  .  #  #
-##########
+#####    
+#   #####
+# $ #   #
+#   #$# #
+###$    #
+ #   ####
+ # @...# 
+ ####### 

assets/levels/level10.txt

@@ -0,0 +1,9 @@
+#######
+# $.  #
+#. .$.#
+#$.*. #
+# $*$ #
+#  .  #
+# $*$ #
+#  * @#
+#######

assets/levels/level2.txt

@@ -1,6 +1,7 @@
-##########
-#   .$   #
-# $## ## #
-# .@ $   #
-#    .#  #
-##########
+#######
+#  . ##
+# $ $ #
+#. * .#
+# $ $ #
+## . @#
+#######

assets/levels/level3.txt

@@ -1,10 +1,9 @@
-##########
-#        #
-#   @    #
-# $   $  #
-#   .    #
-####     #
-#   $ #. #
-#     #  #
-#  .  #  #
-##########
+#########
+#      @#
+# $.$.$ #
+# .$.$. #
+# $.*.$ #
+# .$.$. #
+# $.$.$ #
+#       #
+#########

assets/levels/level4.txt

@@ -0,0 +1,9 @@
+  #####    
+  #   #    
+### . #    
+#   . #####
+# ##$## @ #
+#   . $   #
+###$  #####
+  #   #    
+  #####    

assets/levels/level5.txt

@@ -0,0 +1,9 @@
+#######
+#  .  #
+# $*$.#
+#  .. #
+#$$*$$#
+# ..  #
+#.$*$ #
+#  . @#
+#######

assets/levels/level6.txt

@@ -0,0 +1,8 @@
+   ######
+   # @  #
+####  $ #
+# *..*$ #
+# $*..* #
+# $  ####
+#    #   
+######   

assets/levels/level7.txt

@@ -0,0 +1,7 @@
+######
+# # .#
+# $ .#
+#@ $.#
+# $$.#
+#  ###
+####  

assets/levels/level8.txt

@@ -0,0 +1,7 @@
+ ########
+ #  @   #
+##$ $ $ #
+# $ # $ #
+#  $ # ##
+#......# 
+######## 

assets/levels/level9.txt

@@ -0,0 +1,9 @@
+#######
+#     #
+# $.$ #
+# .$. #
+#*$.$*#
+# .$. #
+#  .$ #
+# @   #
+#######

functions/functions.js

@@ -13,6 +13,10 @@ function keyPressed() {
         playerMove('left');
     } else if (keyCode === RIGHT_ARROW || key === 'd') {
         playerMove('right');
+    } else if (key === 'm') {
+        toMenu();
+    } else if (key === 'r') {
+        loadLevelString();
     }
 }
 
@@ -37,19 +41,30 @@ function processMap(mapString) {
         // Go through each cell and replace it with the block!
         for (let cellExpl=0; cellExpl<processedMap[rowExpl].length; cellExpl++) {
             const cellData = processedMap[rowExpl][cellExpl].split('|');
-            processedMap[rowExpl][cellExpl] = [ cellData[0], [ parseInt(cellData[1]), parseInt(cellData[2]) ] ]
+            processedMap[rowExpl][cellExpl] = [ cellData[0], [ parseInt(cellData[1]), parseInt(cellData[2]) ] ];
         }
     };
 
     return processedMap;
 }
 
+// Change the level ID
+function increaseId() {
+    levelId = levelId + 1;
+}
+
 // Load the new map into the global variable mapOutline
 function loadLevelString() {
-    levelId = levelId + 1;
     // Use callback to reload the map once the string has been processed
-    mapOutline = loadStrings(`./assets/levels/level${levelId || 1}.txt`, mapReload);
+    mapOutline = loadStrings(`./assets/levels/level${levelId}.txt`, mapReload);
     levelPass = false;
+    sounds.levelAlert.play();
+}
+
+// Go to next level!
+function nextLevel() {
+    increaseId();
+    loadLevelString();
 }
 
 function mapReload() {

functions/levelHandler.js

@@ -19,7 +19,8 @@ function preload() {
         success: loadSound('./assets/sounds/success.wav'),
         forbidden: loadSound('./assets/sounds/forbidden.wav'),
         levelUp: loadSound('./assets/sounds/levelUp.wav'),
-        powerUp: loadSound('./assets/sounds/powerUp.wav')
+        powerUp: loadSound('./assets/sounds/powerUp.wav'),
+        levelAlert: loadSound('./assets/sounds/levelAlert.wav')
     }
 
     // Import the button's fonts into the project
@@ -44,7 +45,7 @@ function setup() {
     background('#2f4f4f');
 
     // Define the level's map dimensions
-    levelMap = createQuadrille(rows, columns);
+    levelMap = createQuadrille(columns, rows);
 
     // Creates an independent quadrille for the player
     playerQuad = createQuadrille([ images.player.up ]);
@@ -66,14 +67,14 @@ function setup() {
                 playerPos.row = cellData[1][0];
                 playerPos.col = cellData[1][1];
                 // Create the target
-                targetQuadrilles.push( [ createQuadrille([ images.blocks.boxTarget ]), cellData[1].reverse() ] );
+                targetQuadrilles.push( [ createQuadrille([ images.blocks.boxTarget ]), cellData[1].toReversed() ] );
             } else if (cellData[0] == '$') {
-                boxesQuadrilles.push( [ createQuadrille([ images.blocks.box ]), cellData[1].reverse() ] );
+                boxesQuadrilles.push( [ createQuadrille([ images.blocks.box ]), cellData[1].toReversed() ] );
             } else if (cellData[0] == '*') {
-                boxesQuadrilles.push( [ createQuadrille([ images.blocks.box ]), cellData[1].reverse() ] );
-                targetQuadrilles.push( [ createQuadrille([ images.blocks.boxTarget ]), cellData[1].reverse() ] );
+                boxesQuadrilles.push( [ createQuadrille([ images.blocks.boxSecured ]), cellData[1].toReversed() ] );
+                targetQuadrilles.push( [ createQuadrille([ images.blocks.boxTarget ]), cellData[1].toReversed() ] );
             } else if (cellData[0] == '.') {
-                targetQuadrilles.push( [ createQuadrille([ images.blocks.boxTarget ]), cellData[1].reverse() ] );
+                targetQuadrilles.push( [ createQuadrille([ images.blocks.boxTarget ]), cellData[1].toReversed() ] );
             } 
 
             // Set all cells but walls to be the background color
@@ -88,7 +89,7 @@ function setup() {
     nextButton = createButton('Next');
     nextButton.position((width/2)+textWidth('Menu')-textWidth('Next'), (height/2));
     nextButton.hide();
-    nextButton.mousePressed(loadLevelString);
+    nextButton.mousePressed(nextLevel);
 
     menuButton = createButton('Menu');
     menuButton.position((width/2)-textWidth('Menu')-textWidth('Next')-20, (height/2));
@@ -127,6 +128,10 @@ function draw() {
     const xCordSteps = ((width+(Quadrille.CELL_LENGTH/2))/2)-(textWidth('Steps'));
     text(`Steps: ${stepsTaken}`, xCordSteps, Quadrille.CELL_LENGTH/1.5);
 
+    // Add a level indicator top left corner
+    textSize(10);
+    text(`Level ${levelId}`, 5, 10);
+
     // Stop game execution upon finishing the level and create the buttons
     if (levelPass) {
         // Create screening

index.js

@@ -1,9 +1,4 @@
 let head;
-/**
- * Some sources to include upon the credits
- * https://allbestfonts.com/ (fonts)
- * https://fonts.google.com/specimen/Fredoka
- */
 
 function preload() {
     head = loadImage('./assets/player/head.png');