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.
Table of Contents (17 chapters)
jQuery Game Development Essentials
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Preface

Writing games is not only fun but also a very good way to learn a technology through and through. Even though HTML and JavaScript weren't conceived to run games, over the last few years, a series of events have occurred to make writing games in JavaScript a viable solution:

  • Performance of browsers' JavaScript engines has improved dramatically, with modern engines being ten times faster than the state of the art engines in 2008

  • jQuery and other similar libraries made working with the DOM as painless as it can be

  • Flash lost a lot of ground due, in part, to its absence on iOS

  • W3C started work on many game-oriented APIs such as canvas, WebGL, and full-screen APIs

Throughout this book, you will make three games and learn a wide array of techniques. You will not only be able to use your own games, but most importantly you will have fun doing so!

What this book covers

Chapter 1, jQuery for Games, provides an in-depth look at jQuery's functions that might be useful for game development.

Chapter 2, Creating Our First Game, implements a simple game with sprites, animation, and preloading.

Chapter 3, Better, Faster, but not Harder, optimizes the game we saw in Chapter 2, Creating Our First Game, with various techniques such as time-out inlining, keyboard polling, and HTML fragments.

Chapter 4, Looking Sideways, codes a platformer game with tile maps and collision detection.

Chapter 5, Putting Things into Perspective, creates an orthogonal RPG with tile map optimization, sprite occlusion, and better collision detection.

Chapter 6, Adding Levels to Your Games, expands the game we saw in Chapter 4, Looking Sideways, by adding multiple levels using JSON and AJAX.

Chapter 7, Making a Multiplayer Game, transforms the games we saw in Chapter 5, Putting Things into Perspective, to support multiple players on multiple machines.

Chapter 8, Let's Get Social, integrates the platform game with Facebook and Twitter as well as creating a cheat-proof leaderboard.

Chapter 9, Making Your Game Mobile, optimizes the games we saw in Chapter 5, Putting Things into Perspective, for mobile devices and touch control.

Chapter 10, Making Some Noise, adds sound effects and music to your game with the audio element, the Web Audio API, or Flash.

What you need for this book

One of the advantages of working with web technologies is that you won't need any complex or costly software to get you started. For strictly client-side games, you will only need your favorite code editor (or even a simple text editor, if you don't mind working without any syntax highlighting). If you haven't chosen any yet, there is plenty of free software around you that you could try, ranging from very old-school, such as VIM (http://www.vim.org/) and Emacs (http://www.gnu.org/software/emacs/) to more modern, such as Eclipse (http://www.eclipse.org/) and Aptana (http://www.aptana.com/), Notepad++ (http://notepad-plus-plus.org/), or Komodo Edit (http://www.activestate.com/komodo-edit). These are only some of the available editors that you can find. For JavaScript, you don't need a very advanced editor, so just use the one you're more familiar with.

If you create you own graphic, you will also need an image editing software. Here again, you will have a lot of choice. The most famous open source software being Gimp (http://www.gimp.org/) and one of my personal favorites, Pixen (http://pixenapp.com/).

For the part of the book that needs some server-side scripts, we will use PHP and MySQL. If you don't already have a server that supports them, to install these on your machine, you can use MAMP (http://www.mamp.info/), XAMPP (http://www.apachefriends.org/en/xampp.html), or EasyPHP (http://www.easyphp.org/) depending upon your OS.

Who this book is for

The primary audience for this book is a beginner web developer with some experience in JavaScript and jQuery. Since the server-side part is implemented in PHP, it will help if you have some knowledge of it too, but if you're more comfortable with another server-side language, you could use it instead of PHP without too much trouble.

You won't need any prior knowledge of game development at all to enjoy this book!

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "The .animate() function from jQuery allows you to make a property vary through time from the current value to a new one."

A block of code is set as follows:

$("#myElementId")
.animate({top: 200})
.animate({left: 200})
.dequeue();

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

gf.keyboard = [];
// keyboard state handler
 $(document).keydown(function(event){
    gf.keyboard[event.keyCode] = true;
});
$(document).keyup(function(event){
    gf.keyboard[event.keyCode] = false;
});

Any command-line input or output is written as follows:

# cp /usr/src/asterisk-addons/configs/cdr_mysql.conf.sample
     /etc/asterisk/cdr_mysql.conf

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "The following figure shows what a typical one-dimensional intersection i of two segments a and b would look like".

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to , and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at if you are having a problem with any aspect of the book, and we will do our best to address it.