Making Match-3 Browser Games

Distribution Permission

1. Supporting website

Disclosures

Disclaimer

About this Workbook

1. Links and References
2. Workbook Content
3. How to Read & Use this workbook:
4. Viewing this eBook:
5. Who should use this workbook?

Your newly obtained skills …

Game Design Resources

1. Game Studio - Book Series
2. Game Studio - Online Courses
3. “Making Browser Games” - Books Series
4. “Making Browser Games” Series - online Courses
5. Programming Courses
6. “Walk-Thru Tutorial” Series - Online Courses
7. IMaking HTML5 Games

1Introduction to Game Design

1. Approaching Game Development
2. Focusing Your Game
3. 1.1Game Genre Defined
4. GG Interactive — Game Design Course
5. 1.2Game Tools & Generators
6. 1.3References From

2Standard Project Setup

1. 2.1Standardized File Structure
2. 2.2Barebones Set-up
3. 2.3Web Server Required - Batteries not included!

3Starting a Game Project

1. 3.1Step 0: Review your competition and their games
2. Game Examples
3. 3.2Step 1: Create your “front-door”
4. 3.3Step 2. Create your “Game Shell” & Phases
5. Critical Rendering Path
6. Network Impact
7. Gamer’s Local Activity
8. D.R.Y. Speed Limit - 5 GPH (Games Per Hour)!
9. 3.4Select a JS Format
10. ES5 Format
11. ES6+ Format as “FAT Arrow” Function
12. ES6+ Format as “Phaser.Class”
13. ES6+ Format as “Phaser.Scene”
14. IIPart II: Making “Match-3” Browser Games

4Match-3 — Core Game Construction

1. 4.1Game Project Overview
2. 4.2Our Goal
3. 4.3Match-3 Genre Description
4. 4.4Game Mechanics (GM) - Logic & Rules
5. 4.5Game Recipe™ Featured Ingredients
6. 4.6Design Considerations
7. Match 3 (Placed) - Tic-tac-toe
8. Match 4 (Placed) - “Connect”
9. Match 5 (Placed) - “Go”
10. 4.7Match 3+ - “Tracing-a-line”
11. 4.8Step 3: Create “Play.js”
12. 4.9Step 4: Create Supporting functions.
13. 4.10Conclusion

5Phaser v3.16+ Code Review

1. 5.1Game Set-up Options
2. Phaser III Config and Game Settings - Lines 630 to 718:
3. 5.2Game Mechanisms Component - “playGame Class”
4. PlayGame.constructor – Lines 73 to 79
5. “Preload” Essential Functions – Lines 79 to 152
6. “Create” Essential Functions – Lines 97 to 155
7. PlayGame.drawGameBoard – Lines 156 to 175
8. PlayGame.tileSelect – Lines 177 to 207
9. PlayGame.swapTiles – Lines 209 to 236
10. PlayGame.handleMatches – Lines 238 to 291
11. PlayGame.makeTilesFall – Lines 292 to 345
12. PlayGame.endOfMove – Lines 347 to 365
13. 5.3Match-3 Game Mechanics Component
14. Arrange Board After Match – Lines 397 to 415
15. Create and Manage the Gameboard data – Lines 422 to 447

6Phaser v2.x.x Code Review

1. Play.js
2. 6.1Match-3+ Core Mechanics
3. Step 3. Create your core Game logic & supporting functions
4. 6.2Game-board set-up
5. function drawField - Lines 57 to 80:
6. 6.3Input Validation
7. Function Tile selection – Lines 81 to 121
8. Function Tile De-selection – Lines 122 to 129
9. Function Tile Move – Lines 130 to 161
10. Function Tile swapping – Lines 162 to 202
11. Function Tile Next – Lines 199 to 202
12. Function Tile the same – Lines 203 to 206
13. Function Tile at – Lines 207 to 214
14. 6.4Tile Discovery
15. Function Get Tile row – Lines 215 to 218
16. Function Get Tile column – Lines 220 to 224
17. 6.5Game Rules and logic
18. Function Tile Horizontal Match – Lines 225 to 228
19. Function Tile Vertical match – Lines 229 to 232
20. Function Tile is a Match – Lines 233 to 236
21. Function Existing Match in Board – Lines 237 to 248
22. Function Match Handling “Workhorse” – Lines 249 to 271
23. Function Handle Vertical Matches – a delegation pattern; Line 272 to313
24. Function Handle Horizontal Matches – a delegation pattern; Line 314 to 355
25. 6.6Game Board Management
26. Function Tile Removal – Lines 356 to 382
27. Function Tile Falling (visual display management) – Lines 383 to 427
28. Function Replenish Tile Field (visual display management) – Lines 428 to 474
29. Function Tile Holes Below (visual display management) – Lines 475 to 486
30. Function Tile Holes in Columns (visual display management) – Lines 487 to 497

7Game Shell - The CMS!

1. 7.1Generic Main.js
2. 7.2Generic Boot.js
3. 7.3Generic Preload.js
4. 7.4Generic Splash.js or Language.js
5. 7.5Generic Menu.js
6. Sample CMS page — Credits.js
7. Deeper Dive: Using JAMStack as an SSG …
8. Visit JAMStack http://jamstack.org
9. Deeper Dive: Static Site Generators (SSG)
10. 7.6Inside each Game Phase

8Plug-in Enhancements

9Conclusion

10Bonus Development Content

1. IIIWhat’s next?
2. 10.1Game Distribution & Marketing
3. “How to publish a game on the web??”
4. Introduction: 8-Step Deployment Method.
5. Shareably (SBLY) looking to rent your Phaser games
6. 10.2Book Review Protocol
7. 10.3Tell the world about your game!
8. Appendix

More Resources

1. JavaScript Garden
2. Additional Appendices
3. Other resources:
4. Selling your Game Assets

Appendix: Online Game Development

Appendix: Making WebXR Games!

Appendix: Phaser III Plugins

Appendix: “How to Start a WebSocket”

1. Testing Your Browser
2. Test sites:
3. WebSocket Protocol Handshake
4. Deeper Dive: WebSocket API
5. Sample Source Code: Client-side WebSocket
6. Step #1: Game index page
7. Step #2: Generate Event handlers
8. Appendix: OLOO - Safe JavaScript
9. JS Objects: “TL;DR”
10. 15.2.2 Inside the body of a class definition
11. Deeper Dive: JS Delegation (aka “Inheritance”?)
12. The old way
13. “Object-Oriented JavaScript Pattern Comparison”
14. ECMA-262 7th Edition / June 2016
15. Objects Linking to Other Objects (OLOO)
16. Compare your code
17. Object.create
18. Exercise Lesson 9:
19. Exercise 1
20. Game Singletons
21. Deeper Dive: Object Manipulation objects in ES5/6
22. Lesson Summary
23. Resource References: