Making Action-Arcade 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 System™

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!
4. 2.4Step 0: Review your competition and their games
5. Game Examples
6. Official Phaser v3.16+ Examples
7. 2.5Step 1: Create your “front-door”
8. 2.6Step 2. Create your “Game Shell” & Phases
9. Get in and get out!
10. Network Impact
11. Critical Rendering Path
12. Gamer’s Local Activity
13. D.R.Y. Speed Limit - 5 GPH (Games Per Hour)!
14. 2.7Select a JS Format
15. ES5 Format
16. ES6+ Format as “FAT Arrow” Function
17. ES6+ Format as “Phaser.Class”
18. ES6+ Format as “Phaser.Scene”
19. IIPart II: Making “Action-Arcade” Browser Games

3Game Project Overview

1. 3.1Our Goal
2. 3.2“Action-Arcade” Genre Description
3. 3.3Historical background
4. 3.4Game Mechanics
5. Excerpt from “Scientific Speed Reading: How to Read 300% Faster in 20 Minutes”
6. The Six Seven Laws Of “Attention”
7. 3.5Game Recipe™ Featured Ingredients

4Action-Arcade — Core Game Construction

1. 4.1Design Considerations
2. Human Reaction Timing
3. Reaction Time Statistics (quote from www.humanbenchmark.com)
4. JS Format
5. Gameboard Development
6. Right or Left-handed?
7. Cursor Keys: Timing vs. Movement
8. Game Mechanics - Data Structure
9. Deeper Dive: Multi-Player version
10. 4.2Step 3a: Create “Play.js”
11. 4.3Step 3b: Create Supporting functions.
12. 4.4Conclusion

5Phaser v3.16+ Code Review

1. 5.1Main.js
2. Lines 127 to 169
3. Lines 174 to 190
4. Game Mechanics Component
5. 5.2Play.js
6. Lines 59 to 321
7. destroyTones - Lines 329 to 334
8. onHit - Lines 351 to 377
9. noteTone object - Lines 386 to 434
10. banjoString - Lines 446 to 481
11. banjoString.prototype - Lines 483 to 527
12. button object - Lines 528 to 579
13. button.prototype - Lines 580 to 583
14. noteHandler - Lines 584 to 597
15. noteHandler.prototype - Lines 598 to 645
16. note object - Lines 646 to 678
17. note.prototype - Lines 679 to 697

6Phaser v2.x.x Code Review

1. 6.1Main-mbg.js
2. Lines 114 to 140
3. Game Mechanics Component - Lines 145 to 502
4. Supporting Game Functions - Lines 304 to 655
5. 6.2Play-mbg.js
6. Game Framework Mechanisms Component - Lines 113 to 301
7. Game Mechanisms Supporting Functions - Lines 302 to 516

7Game Shell - The CMS!

1. How to monetize hyper-casual games
2. 7.1Generic Main.js
3. 7.2Generic Boot.js
4. 7.3Generic Preload.js
5. 7.4Generic Splash.js or Language.js
6. 7.5Generic Menu.js
7. Sample CMS page — Credits.js
8. Deeper Dive: Using JAMStack as an SSG …
9. Visit JAMStack http://jamstack.org
10. Deeper Dive: Static Site Generators (SSG)
11. 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 Content Appendices
3. Other resources:
4. Selling your Game Assets

Appendix: Making WebXR games!

Appendix: Online Game Development

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

Appendix: OLOO - Safe JavaScript

1. JS Objects: “TL;DR”
2. 15.2.2 Inside the body of a class definition
3. Deeper Dive: JS Delegation (aka “Inheritance”?)
4. The old way
5. “Object Oriented JavaScript Pattern Comparison”
6. ECMA-262 7th Edition / June 2016
7. Objects Linking to Other Objects (OLOO)
8. Compare your code
9. Object.create
10. Exercise Lesson 9:
11. Exercise 1
12. Game Singletons
13. Deeper Dive: Object Manipulation objects in ES5/6
14. Lesson Summary
15. Resource References: