jQuery Game Development Essentials: Learn how to make fun and addictive multi-platform games using jQuery

244 Pages·2013·3.29 MB·English

by  Selim Arsever

www.it-ebooks.info
jQuery Game Development
Essentials
Learn how to make fun and addictive multi-platform
games using jQuery
Selim Arsever
BIRMINGHAM - MUMBAI
www.it-ebooks.info
jQuery Game Development Essentials
Copyright © 2013 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval
system, or transmitted in any form or by any means, without the prior written
permission of the publisher, except in the case of brief quotations embedded in
critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy
of the information presented. However, the information contained in this book is
sold without warranty, either express or implied. Neither the author, nor Packt
Publishing, and its dealers and distributors will be held liable for any damages
caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the
companies and products mentioned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this information.
First published: April 2013
Production Reference: 1180413
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-84969-506-0
www.packtpub.com
Cover Image by Selim Arsever ([email protected])
www.it-ebooks.info
Credits
Author Project Coordinator
Selim Arsever Anugya Khurana
Reviewers Proofreader
Samuel Lee Deering Maria Gould
Acquisition Editors Indexer
Erol Staveley Hemangini Bari
Edward Gordon
Graphics
Sheetal Aute
Lead Technical Editor
Ankita Shashi
Production Coordinator
Aparna Bhagat
Technical Editors
Kirti Pujari
Lubna Shaikh Cover Work
Aparna Bhagat
Copy Editors
Brandt D'Mello
Insiya Morbiwala
Alfida Paiva
Laxmi Subramanian
www.it-ebooks.info
About the Author
Selim Arsever is a Senior Software Engineer working as a consultant in
Switzerland. Over the last 4 years, he has been developing gameQuery (http://
gamequeryjs.com), an open source game engine based on jQuery, as well as other
JavaScript games and demos. He has been giving several talks on the subject and
thinks that there is nothing more interesting than using tools beyond what they were
initially intended for. You can follow him on twitter at @SelimArsever.
Thank you to my wife and my son for their patience and support, and
to the entire JavaScript community for their passion and openness.
www.it-ebooks.info
About the Reviewer
Samuel Lee Deering is a Web Developer from England who specializes in
JavaScript and jQuery. Sam has built his expertise from a strong programming
background, including a Bachelor's degree in Computer Science, and has worked
for several high-profile companies such as Flight Centre. Sam has a very strong web
presence; he develops modern web apps and has written online publications for
renowned websites, such as jQuery Mobile Builder and Smashing Magazine. Sam's
main focus is to help improve the Web, and he shares his knowledge with millions
on his blog at http://www.jquery4u.com/.
You can find his details on the following websites:
• Profile picture: http://gravatar.com/samdeering
• Website: http://samdeering.com
• Blog: http://jquery4u.com
• Twitter: @samdeering @jquery4u
www.it-ebooks.info
www.PacktPub.com
Support files, eBooks, discount offers and
more
You might want to visit www.PacktPub.com for support files and downloads related
to your book.
Did you know that Packt offers eBook versions of every book published, with PDF
and ePub files available? You can upgrade to the eBook version at www.PacktPub.
com and as a print book customer, you are entitled to a discount on the eBook copy.
Get in touch with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign
up for a range of free newsletters and receive exclusive discounts and offers on
Packt books and eBooks.
TM
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital
book library. Here, you can access, read and search across Packt's entire library of books.
Why Subscribe?
• Fully searchable across every book published by Packt
• Copy and paste, print and bookmark content
• On demand and accessible via web browser
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access
PacktLib today and view nine entirely free books. Simply use your login credentials
for immediate access.
www.it-ebooks.info
Table of Contents
Preface 1
Chapter 1: jQuery for Games 7
The way of jQuery 7
Chaining 8
Polymorphism 8
Moving things around 9
Chaining animations 10
Managing the queue 11
.stop() 11
.clearQueue() 11
.dequeue() 11
.delay() 11
Other usages of queues 11
Handling of events 12
.bind() 12
.delegate() 12
Removing event handlers 13
jQuery 1.7 13
Associating data with DOM elements 13
Manipulating the DOM 14
.append() 14
.prepend() 14
.html() 14
.remove() 15
.detach() 15
Stay curious my friend! 15
Summary 16
www.it-ebooks.info
Table of Contents
Chapter 2: Creating Our First Game 17
How does this book work? 18
Let's get serious – the game 18
Learning the basics 19
Framework 20
Sprites 21
Implementing animations 22
Adding animations to our framework 23
Moving sprites around 25
Preloading 27
Initializing the game 30
Main loop 32
Main loop implementation 33
Collision detection 35
Summary 39
Chapter 3: Better, Faster, but not Harder 41
Intervals and timeouts 42
One interval to rule them all 42
Code 43
Keyboard polling 47
Keeping track of the keys' state 48
HTML fragments 49
Avoiding reflow 51
Moving your sprite around using CSS Transforms 52
Using requestAnimationFrame instead of timeouts 53
Summary 54
Chapter 4: Looking Sideways 55
Offline divs 55
Groups 57
Sprite transformation 59
CSS transform 59
Adding transform to the framework 61
Tile maps 62
Naive implementation 64
Collision detection 65
Colliding with tile maps 66
Finding the colliding tiles 68
Sprite versus sprite collision 69
Coding the game 70
[ ii ]
www.it-ebooks.info
Table of Contents
Basic setup of the game screen 71
Object-oriented code for the player 72
Updating the player's position 73
Controlling the player's avatar 75
Player control 77
Parallax scrolling 78
Creating enemies 79
Summary 81
Chapter 5: Putting Things into Perspective 83
Optimizing tile maps for top-down games 84
Finding the visible tiles 85
Moving the tile map 87
Sorting the occlusion 91
Sprite occlusion 92
Level versus sprite occlusion 93
Collision detection 94
Player versus environment collisions 94
Using a tile map editor 95
Player versus sprite collision 97
Talking to NPCs 99
Fighting enemies 101
The complete game 102
Isometric tiles 102
Drawing an isometric tile map 102
Occlusion for isometric games 103
Summary 103
Chapter 6: Adding Levels to Your Games 105
Implementing a multi-file game 105
Loading tile maps 106
Loading sprites and their behavior 109
Using $.ajax 111
Loading a JSON file 112
Loading a remote script 113
Debugging calls to $.ajax 114
.done() 115
.fail() 115
Modifying our platform game 116
Summary 120
[ iii ]
www.it-ebooks.info