Game Link: https://matthewfrancisong.github.io/project-1/
- How to play
- Why Snakes & Ladders
- My 7 days plan
- Game Documentation
- References
Goal: Reach above and beyond square numbered 100 at the top-left hand corner of the board.
Players begin at square number 1. Each player takes a turn to roll a dice and move them along the numbered squares. If a player lands on a square which has the base of a ladder, they will advance to the square that sits on the top of the ladder.
Similarly, if a player lands on a square which has the head of a snake, it would drop to the tail of the snake.
When I was young, I played a lot. Everything from board games, donkey cards to remote-controlled cars. I thought how wonderful would it be to design the game that I actually played then. It was meaningful.
Some of the animated characters in this game brought me back to happy memories where I remembered slogging thousands of hours. It was all fun. Wonderful memories to recollect and one day share with my family.
- Flow-chart
- Pseudo Codes
- Create 16 grid MVP (Minimal Viable Game)
- Logic to switch players
- Win-Game condition. Create 2 markers. if >16, win game
- Reset Function
- Snakes & Ladders Logic
- Make game functional
- Create actual game. (100 Grid)
Deliverables:
- Jquery 100 Grid
- Use JQuery to create 100 grids instead of using html.
- Use for-loop to give each individual grid an ID.
- Use modular function to alternate grid background color.
- Reverse rows so that board number flows bottoms-up in a zig-zag fashion.
- WhoWon() , Reset() , rollDice() Functions.
Challenges:
- Refactoring html 16grid into Jquery nested loop function.
- Create a div instead of '<table'. Learnt that table has its own properties.
Deliverables:
- Refactoring Snakes & Ladder Logic
- Comparison analysis with other snakes and ladder board games to set difficuity.
Challenges:
- Choosing between creating an Array to house logic or a Switch statement
- Reduce player 1 and player 2 codes as there were many repetitions.
Deliverables: (CSS Styling)
- Find snakes, ladder, and button images.
- Color & Style Snakes & Ladders
- Use Sprite to animate my characters
- Design Layout of landing page of divs
Deliverables: (CSS Styling)
- Cleaning up Codes
- Cleaning up UI of page.
- Inserted audio track
- Created auto-play & reset feature
Challenges:
- Tried to use transition-duration to create delay in my character movement.
- Had to priortise on using the remaining time to touch up & style the layout.
Presentation Day!
- Font taken from FGOnlyHope http://www.fontspace.com/kimberly-geswein/kg-onlyhope
- Zombie Lupid Sprite - Ripped by Boo
- Hog Sprite - Ripped by Mageker