Book Image

jQuery Game Development Essentials

By : Selim Arsever
Book Image

jQuery Game Development Essentials

By: Selim Arsever

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
jQuery Game Development Essentials
Selim Arsever
Apr, 2013 | 244 pages
No titles found
Table of Contents (17 chapters)
jQuery Game Development Essentials
jQuery Game Development Essentials
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
jQuery for Games
jQuery for Games
The way of jQuery
Moving things around
Handling of events
Associating data with DOM elements
Manipulating the DOM
Stay curious my friend!
Summary
2
Creating Our First Game
Creating Our First Game
How does this book work?
Let's get serious – the game
Learning the basics
Initializing the game
Main loop
Collision detection
Summary
3
Better, Faster, but not Harder
Better, Faster, but not Harder
Intervals and timeouts
Keyboard polling
HTML fragments
Avoiding reflow
Moving your sprite around using CSS Transforms
Using requestAnimationFrame instead of timeouts
Summary
4
Looking Sideways
Looking Sideways
Offline divs
Groups
Sprite transformation
Tile maps
Collision detection
Coding the game
Basic setup of the game screen
Object-oriented code for the player
Player control
Parallax scrolling
Creating enemies
Summary
5
Putting Things into Perspective
Putting Things into Perspective
Optimizing tile maps for top-down games
Sorting the occlusion
Collision detection
The complete game
Isometric tiles
Summary
6
Adding Levels to Your Games
Adding Levels to Your Games
Implementing a multi-file game
Modifying our platform game
Summary
7
Making a Multiplayer Game
Making a Multiplayer Game
World of Ar'PiGi
Managing the player's account
Keeping the players in sync
Taking care of monsters
Summary
8
Let's Get Social
Let's Get Social
Creating a simple leaderboard
Making cheating harder
Integrating with Twitter
Integrating with Facebook
Summary
9
Making Your Game Mobile
Making Your Game Mobile
Making your game run well on mobile devices
Touch control
Integrating our game with the springboard
Using device orientation
Using the offline application cache
Using web storage
Summary
10
Making Some Noise
Making Some Noise
Abstracting audio
Embedding sound
HTML5 Audio element
Web Audio API
Flash fallbacks
Generating sound effects
Summary
Index
Index

HTML5 Audio element

In order to match Flash's multimedia capabilities, video and audio elements were added to HTML5. They both come with matching JavaScript APIs that allow you to create and manipulate the video or sound with JavaScript without needing to write to the document (just like the Image object allows you to load an image without having to use the img tag).

First let's have a quick look at what the audio tag looks like:

<audio>
   <source src="backgroundMusic.ogg" type='audio/ogg; codecs="vorbis"'>
   <source src="backgroundMusic.mp3" type='audio/mpeg; codecs="mp3"'>
</audio>

As you can see here, it's possible to provide multiple sources to the audio tag. This is to circumvent the single biggest issue with this API: compatibility with file formats. Indeed, even though all modern browsers support the audio element, there is not one single audio format that you can use that will be recognized by all of them. The solution is to provide multiple formats.

This is...

Previous Section
End of Section 4
Next Section