O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

jQuery Game Development Essentials

Book Description

Your knowledge of JavaScript and jQuery is just about all you need to start creating some stunning browser-based games. This guide shows you how, from the basics to advanced techniques. Whatever the genre, this is the book for you.

  • Discover how you can create a fantastic RPG, arcade game, or platformer using jQuery!
  • Learn how you can integrate your game with various social networks, creating multiplayer experiences and also ensuring compatibility with mobile devices.
  • Create your very own framework, harnessing the very best design patterns and proven techniques along the way.

In Detail

jQuery is a leading multi-browser JavaScript library that developers across the world utilize on a daily basis to help simplify client-side scripting. Using the friendly and powerful jQuery to create games based on DOM manipulations and CSS transforms allows you to target a vast array of browsers and devices without having to worry about individual peculiarities.

"jQuery Game Development Essentials" will teach you how to use the environment, language, and framework that you’re familiar with in an entirely new way so that you can create beautiful and addictive games. With concrete examples and detailed technical explanations you will learn how to apply game development techniques in a highly practical context.

This essential reference explains classic game development techniques like sprite animations, tile-maps, collision detection, and parallax scrolling in a context specific to jQuery. In addition, there is coverage of advanced topics specific to creating games with the popular JavaScript library, such as integration with social networks alongside multiplayer and mobile support. jQuery Game Development Essentials will take you on a journey that will utilize your existing skills as a web developer so that you can create fantastic, addictive games that run right in the browser.

Table of Contents

  1. jQuery Game Development Essentials
    1. Table of Contents
    2. jQuery Game Development Essentials
    3. Credits
    4. About the Author
    5. About the Reviewer
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. jQuery for Games
      1. The way of jQuery
        1. Chaining
        2. Polymorphism
      2. Moving things around
        1. Chaining animations
        2. Managing the queue
          1. .stop()
          2. .clearQueue()
          3. .dequeue()
          4. .delay()
        3. Other usages of queues
      3. Handling of events
        1. .bind()
        2. .delegate()
        3. Removing event handlers
        4. jQuery 1.7
      4. Associating data with DOM elements
      5. Manipulating the DOM
        1. .append()
        2. .prepend()
        3. .html()
        4. .remove()
        5. .detach()
      6. Stay curious my friend!
      7. Summary
    9. 2. Creating Our First Game
      1. How does this book work?
      2. Let's get serious – the game
      3. Learning the basics
        1. Framework
        2. Sprites
          1. Implementing animations
          2. Adding animations to our framework
        3. Moving sprites around
        4. Preloading
      4. Initializing the game
      5. Main loop
        1. Main loop implementation
      6. Collision detection
      7. Summary
    10. 3. Better, Faster, but not Harder
      1. Intervals and timeouts
        1. One interval to rule them all
          1. Code
      2. Keyboard polling
        1. Keeping track of the keys' state
      3. HTML fragments
      4. Avoiding reflow
      5. Moving your sprite around using CSS Transforms
      6. Using requestAnimationFrame instead of timeouts
      7. Summary
    11. 4. Looking Sideways
      1. Offline divs
      2. Groups
      3. Sprite transformation
        1. CSS transform
        2. Adding transform to the framework
      4. Tile maps
        1. Naive implementation
      5. Collision detection
        1. Colliding with tile maps
          1. Finding the colliding tiles
        2. Sprite versus sprite collision
      6. Coding the game
      7. Basic setup of the game screen
      8. Object-oriented code for the player
        1. Updating the player's position
        2. Controlling the player's avatar
      9. Player control
      10. Parallax scrolling
      11. Creating enemies
      12. Summary
    12. 5. Putting Things into Perspective
      1. Optimizing tile maps for top-down games
        1. Finding the visible tiles
        2. Moving the tile map
      2. Sorting the occlusion
        1. Sprite occlusion
        2. Level versus sprite occlusion
      3. Collision detection
        1. Player versus environment collisions
          1. Using a tile map editor
        2. Player versus sprite collision
          1. Talking to NPCs
          2. Fighting enemies
      4. The complete game
      5. Isometric tiles
        1. Drawing an isometric tile map
        2. Occlusion for isometric games
      6. Summary
    13. 6. Adding Levels to Your Games
      1. Implementing a multi-file game
        1. Loading tile maps
        2. Loading sprites and their behavior
        3. Using $.ajax
        4. Loading a JSON file
        5. Loading a remote script
        6. Debugging calls to $.ajax
          1. .done()
          2. .fail()
      2. Modifying our platform game
      3. Summary
    14. 7. Making a Multiplayer Game
      1. World of Ar'PiGi
      2. Managing the player's account
        1. Searching elements in the database
        2. Creating a new player in the database
        3. Keeping the player connected
        4. Logging the user into the game
      3. Keeping the players in sync
        1. Retrieving all the other players
        2. Updating the current player position
        3. Client-side code
      4. Taking care of monsters
        1. Implementing server-side combat
      5. Summary
    15. 8. Let's Get Social
      1. Creating a simple leaderboard
        1. Saving highscores
        2. Retrieving highscores
        3. Displaying the highscores
      2. Making cheating harder
        1. Server-side verification
        2. Making your variables less readable
        3. Obfuscating your code
        4. Making your network protocol less readable
          1. Encoding values
          2. Randomly naming the variables
          3. Adding random variables
      3. Integrating with Twitter
        1. Twitter for dummies
        2. Full access to Twitter's API
          1. Registering your game with Twitter
          2. Server-side helper library
          3. Authentication
          4. Publishing high scores on Twitter
      4. Integrating with Facebook
        1. Authenticating with Facebook
        2. Creating achievements
        3. Publishing the achievements
      5. Summary
    16. 9. Making Your Game Mobile
      1. Making your game run well on mobile devices
        1. Detecting mobile browsers
          1. Client-side browser detection
          2. Server-side detection
          3. Should you really detect the browser?
        2. Performance limitation – memory
        3. Performance limitation – speed
          1. Specifying the page's visible area
          2. Level of details
      2. Touch control
        1. D-pad
        2. Analog joystick
          1. Event handlers
      3. Integrating our game with the springboard
        1. Making your game installable
        2. Configuring the status bar
        3. Specifying the application icon
        4. Specifying a splash screen
      4. Using device orientation
      5. Using the offline application cache
      6. Using web storage
      7. Summary
    17. 10. Making Some Noise
      1. Abstracting audio
        1. Using our small library
      2. Embedding sound
        1. Implementation
        2. Supported format
      3. HTML5 Audio element
        1. Preloading a sound
        2. Playing and stopping sounds
      4. Web Audio API
        1. Basic usage
        2. Connecting more nodes
        3. Loading more than one sound
        4. So many nodes, so little time
          1. Delay node
          2. ScriptProcessor node
          3. Panner node
          4. Convolver node
          5. Analyser node
          6. DynamicCompressor node
          7. BiquadFilter node
          8. WaveShaper node
      5. Flash fallbacks
        1. SoundManager 2
        2. Alternatives to SoundManager
      6. Generating sound effects
      7. Summary
    18. Index