My First IronHack project - Tetsu bīru ["Iron Beers"]

This is the repository of my first Ironhack Web Dev bootcamp project - Coding a game.

----Game chosen: Sokoban (倉庫番 sōko-ban, "warehouse keeper")----

Sokoban is a puzzle video game, in which the player is pushing crates or boxes trying to get them to the proper location.

It was created in 1981 by Hiroyuki Imabayashi and published in December 1982 by Thinking Rabbit. This was in fact the version I still remember playing.

Currently, more than 7500+ levels have been created for various versions of the game.

Rules:

The player is allowed to move vertically or horizontally, into empty squares, and is allowed to push (never pull) the boxes in the same directions. The puzzle is solved when all the boxes are in the storage locations. The number of boxes === Number of storage locations

Reasons for choosing this game:

I still remember playing the game with its "blue and purple" visuals an pixel design, struggling to pass to the next level and the one after that.Once I started coding, I started wondering how a game like that would look like behind its looks.

Would it be as challenging to code it, as it was to play it?

---My personal touch---

I decided to change the looks of the original game, so that instead of crates the player would be pushing a keg, and awaiting some empty mugs - Which would should be filled as a final goal. All the rules remained, since there would be no point in doing it in a different way.

---Challenges ahead----

1. Should it be DOM manipulation or Canvas? -> DOM.
2. One page per level.
3. Which classes should be created? One clas: Game, including the player and the board
4. Define MVP: One level
5. How should this be a challenge? -> By doing it involving a matrix and creating collision conditions
6. How are my players being kept engaged? -> Little guy on the side with funny dialogue!; Looking forward to the end

---Steps to follow---

1. Create the GitHUb repository & ReadMe intro -DONE-
2. Build the foundation files of HTML, CSS and JS -DONE-
3. Created the design for: Walls; Empty beer; Filled beer; Beer Keg; player -DONE- (except player)
4. Define the main functions and variables: moveLeft() moveRight() moveUp() moveDown() -DONE-
5. Define levelUp() resetLevel() -DONE-
6. Test the main functions
-DONE-
7. Make it visual
-DONE-
8. Make it move visually
-DONE-
9. Try for another level-DONE-
10. Design of webpages: Main screen, level up, First screen of welcome & Playgame -DONE-
11. Fix the bugs
-IN CONSTRUCTION-

---Technologies used---

1. Html5, CSS3
2. Javascript and JQuery

---Approach taken---

1. Construction of main levels into matrixes
2. Building the matrixes into DIVs with classes
3. Each class with different backgrounds to provide the visual
4. Conditions to render the different behavior throughout the screen

---Unsolved problems---

1. Bug when there are many ineractions with beers and full beers
2. Scaling up more easily

---Questions to answer to---

• Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex?
• Did you added a personal spin or creative element into your project submission? Did you deliver something engaging and playable to the end user?
• Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming?
• Did you deploy your application to a public url using GitHub Pages?
• Presentation in slides.com; Elevator pitch; show and explain code snippets in your presentation slides; display screenshot of your GitHub graphs to show your commits;Demonstrate the important feature of your game; Did you made a mistake planning your time? Maybe scoping your feature? Conceptualizing your game? Coding?

Thanks for reading!!!