Cover image for Core HTML5 2D Game Programming

Core HTML5 2D Game Programming

Author David Geary
Release Date: 2014/07/01
ISBN: 9780133564280
Topic:
0%
25
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Game programming offers a wealth of creative and business opportunities, and it’s never been more accessible. In Core HTML5 2D Game Programming, best-selling author David Geary shows you how to use freely available browser tools and open source resources to create video games that run in desktop browsers and on mobile devices.

Geary walks you step by step through every aspect of implementing a sophisticated arcade-style game entirely from scratch, without using proprietary game frameworks. Packed with code, this full-color tutorial gives you the in-depth understanding you need to design and build any kind of HTML5 2D game on your own, whether you use a framework or not.

A clearly written, accessible, and exhaustive guide to implementing games, this book leaves no stone unturned, showing you how to

  • Create smooth, flicker-free animations

  • Implement motion that’s unaffected by your game’s underlying animation frame rate

  • Animate sprites (graphical objects) to make them sparkle, explode, etc.

  • Layer multi-channel sound effects on top of a soundtrack

  • Warp time to create nonlinear effects, such as jumping or bouncing

  • Control the flow of time through your game with a time system

  • Implement particle systems that simulate natural phenomena

  • Efficiently detect collisions between sprites

  • Create a developer backdoor containing special features

  • Use Node.js and socket.io to transfer real-time metrics to a server

  • Employ a heads-up display to show high scores stored on a server

  • Understand the nuances of implementing HTML5 games for mobile devices

    • Through expertly written code that’s easy to understand, and prose that cuts to the chase, Geary illuminates every corner of game development. Everyone from novice game programmers to professional game developers will find this book invaluable as both a tutorial and a reference.

    All of the book’s source code, including chapter-specific versions of the game discussed in the book, are available at corehtml5games.com.

    Table of Contents

    1. Contents
    2. Preface [This content is currently in development.]
    3. About the Author [This content is currently in development.]
    4. Chapter 1. Introduction
      1. 1.1. Snail Bait
      2. 1.2. HTML5 Game Development Best Practices
      3. 1.3. Special Features
      4. 1.4. Snail Bait’s HTML and CSS
      5. 1.5. Snail Bait’s Humble Beginning
      6. 1.6. The Use of JavaScript in This Book
      7. 1.7. Conclusion
      8. 1.8. Exercises
    5. Chapter 2. Raw Materials and Development Environment
      1. 2.1. Using Developer Tools
      2. 2.2. Obtaining Assets
      3. 2.3. Using CSS Backgrounds
      4. 2.4. Generating Favicons
      5. 2.5. Shortening the Coding Cycle
      6. 2.6. Conclusion
      7. 2.7. Exercises
    6. Chapter 3. Graphics and Animation
      1. 3.1. Drawing Graphics and Images with the HTML5 canvas Element
      2. 3.2. Implementing Smooth HTML5 Animations
      3. 3.3. Implementing a Game Loop
      4. 3.4. Calculating Frame Rates
      5. 3.5. Scrolling the Background
      6. 3.6. Creating Time-Based Motion
      7. 3.7. Reversing Scroll Direction
      8. 3.8. Drawing Animation Frames
      9. 3.9. Using Parallax to Create the Illusion of Depth
      10. 3.10. Conclusion
      11. 3.11. Exercises
    7. Chapter 4. Infrastructure
      1. 4.1. Encapsulate Game Functions in a JavaScript Object
      2. 4.2. Understand JavaScript’s Persnickety this Reference
      3. 4.3. Handle Keyboard Input
      4. 4.4. Pause or Resume the Game When the Player Presses the p Key
      5. 4.5. Freeze the Game to Ensure It Resumes Exactly Where It Left Off
      6. 4.6. Pause the Game When the Window Loses Focus
      7. 4.7. Resume a Paused Game with an Animated Countdown
      8. 4.8. Conclusion
      9. 4.9. Exercises
    8. Chapter 5. Loading Screens
      1. 5.1. Define Snail Bait’s Chrome
      2. 5.2. Fade Elements In and Out with CSS Transitions
      3. 5.3. Fade Any Element In or Out That Has a CSS Transition Associated with Its Opacity
      4. 5.4. Implement the Loading Screen
      5. 5.5. Reveal the Game
      6. 5.6. Conclusion
      7. 5.7. Exercises
    9. Chapter 6. Sprites
      1. 6.1. Sprite Objects
      2. 6.2. Incorporate Sprites into a Game Loop
      3. 6.3. Implement Sprite Artists
      4. 6.4. Create and Initialize a Game’s Sprites
      5. 6.5. Define Sprites with Metadata
      6. 6.6. Scrolling Sprites
      7. 6.7. Conclusion
      8. 6.8. Exercises
    10. Chapter 7. Sprite Behaviors
      1. 7.1. Behavior Fundamentals
      2. 7.2. Runner Behaviors
      3. 7.3. The Runner’s Run Behavior
      4. 7.4. Flyweight Behaviors
      5. 7.5. Game-Independent Behaviors
      6. 7.6. Combining Behaviors
      7. 7.7. Conclusion
      8. 7.8. Exercises
    11. Chapter 8. Time, Part I: Finite Behaviors and Linear Motion
      1. 8.1. Implement an Initial Jump Algorithm
      2. 8.2. Shift Responsibility for Jumping to the Runner
      3. 8.3. Implement the Jump Behavior
      4. 8.4. Time Animations with Stopwatches
      5. 8.5. Refine the Jump Behavior
      6. 8.6. Implement Linear Motion
      7. 8.7. Pause Behaviors
      8. 8.8. Conclusion
      9. 8.9. Exercises
    12. Chapter 9. Time, Part II: Nonlinear Motion
      1. 9.1. Understand Time and Its Derivatives
      2. 9.2. Use Animation Timers and Easing Functions to Implement Nonlinear Jumping
      3. 9.3. Implement Animation Timers
      4. 9.4. Implement Easing Functions
      5. 9.5. Fine-tune Easing Functions
      6. 9.6. Implement a Realistic Bounce Behavior
      7. 9.7. Randomize Behaviors
      8. 9.8. Implement Nonlinear Color Changes with Animation Timers and Easing Functions
      9. 9.9. Conclusion
      10. 9.10. Exercises
    13. Chapter 10. Time Systems
      1. 10.1. Snail Bait’s Time System
      2. 10.2. Create and Start the Time System
      3. 10.3. Incorporate the Time System into Snail Bait
      4. 10.4. Redefine the Current Time for Stopwatches and Animation Timers
      5. 10.5. Implement the Time System
      6. 10.6. Conclusion
      7. 10.7. Exercises
    14. Chapter 11. Collision Detection
      1. 11.1. The Collision Detection Process
      2. 11.2. Collision Detection Techniques
      3. 11.3. Snail Bait’s Collision Detection
      4. 11.4. Select Candidates for Collision Detection
      5. 11.5. Detect Collisions Between the Runner and Another Sprite
      6. 11.6. Process Collisions
      7. 11.7. Optimize Collision Detection
      8. 11.8. Monitor Collision Detection Performance
      9. 11.9. Implement Collision Detection Edge Cases
      10. 11.10. Conclusion
      11. 11.11. Exercises
    15. Chapter 12. Gravity
      1. 12.1. Falling
      2. 12.2. Incorporating Gravity
      3. 12.3. Collision Detection, Redux
      4. 12.4. Conclusion
      5. 12.5. Exercises
    16. Chapter 13. Sprite Animations and Special Effects
      1. 13.1. Implement Sprite Animations
      2. 13.2. Create Special Effects
      3. 13.3. Choreograph Effects
      4. 13.4. Conclusion
      5. 13.5. Exercises
    17. Chapter 14. Sound and Music
      1. 14.1. Create Sound and Music Files
      2. 14.2. Load Music and Sound Effects
      3. 14.3. Specify Sound and Music Controls
      4. 14.4. Play Music
      5. 14.5. Play Music in a Loop
      6. 14.6. Play Sound Effects
      7. 14.7. Turn Sound On and Off
      8. 14.8. Conclusion
      9. 14.9. Exercises
    18. Chapter 15. Mobile Devices
      1. 15.1. Run Snail Bait on Mobile Devices
      2. 15.2. Detect Mobile Devices
      3. 15.3. Scale Games to Fit Mobile Devices
      4. 15.4. Change Instructions Underneath the Game’s Canvas
      5. 15.5. Change the Welcome Screen
      6. 15.6. Incorporate Touch Events
      7. 15.7. Work Around Sound Idiosyncracies on Mobile Devices
      8. 15.8. Add an Icon to the Home Screen and Run Without Browser Chrome
      9. 15.9. Conclusion
      10. 15.10. Exercises
    19. Chapter 16. Particle Systems
      1. 16.1. Smoking Holes
      2. 16.2. Use Smoking Holes
      3. 16.3. Implement Smoking Holes
      4. 16.4. Pause Smoking Holes
      5. 16.5. Conclusion
      6. 16.6. Exercises
    20. Chapter 17. User Interface
      1. 17.1. Keep Score
      2. 17.2. Add a Lives Indicator
      3. 17.3. Display Credits
      4. 17.4. Tweet Player Scores
      5. 17.5. Warn Players When the Game Runs Slowly
      6. 17.6. Implement a Winning Animation
      7. 17.7. Conclusion
      8. 17.8. Exercises
    21. Chapter 18. Developer Backdoor
      1. 18.1. Snail Bait’s Developer Backdoor
      2. 18.2. The Developer Backdoor’s HTML and CSS
      3. 18.3. Reveal and Hide the Developer Backdoor
      4. 18.4. Update the Developer Backdoor’s Elements
      5. 18.5. Implement the Developer Backdoor’s Checkboxes
      6. 18.6. Incorporate the Developer Backdoor Sliders
      7. 18.7. Implement the Backdoor’s Ruler
      8. 18.8. Conclusion
      9. 18.9. Exercises
    22. Chapter 19. On the Server: In-game Metrics, High Scores, and Deployment
      1. 19.1. Node.js and socket.io
      2. 19.2. Include socket.io’s JavaScript in Snail Bait
      3. 19.3. Implement a Simple Server
      4. 19.4. Create a Socket on the Server
      5. 19.5. Start the Server
      6. 19.6. Create a Socket on the Client and Connect to the Server
      7. 19.7. Record In-game Metrics
      8. 19.8. Manage High Scores
      9. 19.9. Deploy Snail Bait
      10. 19.10. Upload files to a Server
      11. 19.11. Conclusion
      12. 19.12. Exercises
    23. Chapter 20. Epilogue: Bodega’s Revenge
      1. 20.1. Design the User Interface
      2. 20.2. Create the Spritesheet
      3. 20.3. Instantiate the Game
      4. 20.4. Implement Sprites
      5. 20.5. Implement Sprite Behaviors
      6. 20.6. Draw the Bullet Canvas
      7. 20.7. Implementing Touch-Based Controls for Mobile Devices
      8. 20.8. Conclusion
    24. Glossary [This content is currently in development.]
    3.15.221.133