Supercharged JavaScript Graphics : With HTML5 Canvas, JQuery, and More

With HTML5 and improved web browser support, javascript has become the tool of choice for creating high-performance web graphics. This faced-paced book shows you how to use javascript, jQuery, DHTML, and HTML5s Canvas element to create rich web applications for computers and mobile devices. By following real-world examples, experienced web developers learn fun and useful approaches to arcade games, DHTML effects, business dashboards, and other applications. This book serves complex subjects in easily digestible pieces, and each topic acts as a foundation for the next. - Tackle javascript optimization and understand how it impacts performance - Create fast-moving graphics by combining old-school DHTML with jQuery - Learn advanced UI techniques using the jQuery UI and Ext JS libraries - Build games with collision detection, object handling, and javascript scrolling techniques - Master HTML5 Canvas basics for drawings, fills, bitmaps, animation, and more - Create applications for the small screen with jQuery Mobile and PhoneGap - Use Google’s data visualization tools to create interactive dashboards Table of Contents 7 Preface 11 Audience and Assumptions 12 Organization 12 Conventions Used in This Book 14 Using Code Examples 14 Target Browsers 15 Safari庐 Books Online 15 How to Contact Us 16 Acknowledgments 16 Chapter聽1.聽Code Reuse and Optimization 19 Keeping It Fast 22 What and When to Optimize 23 Homespun Code Profiling 25 Optimizing JavaScript 26 Lookup Tables 26 Bitwise Operators, Integers, and Binary Numbers 30 A quick recap of binary numbers 30 JavaScript鈥檚 bitwise operators 31 Bitwise AND (x & y) 31 Bitwise OR (x | y) 32 Bitwise XOR (x ^ y) 32 Bitwise NOT (~x) 33 Shift left (x < > numBits) 33 Shift right with zero fill (x >>> y) 33 Loop unrolling: An inconvenient truth 34 Optimizing jQuery and DOM Interaction 37 Optimizing CSS Style Changes 38 Optimizing DOM Insertion 41 Other Resources 41 Chapter聽2.聽DHTML Essentials 43 Creating DHTML Sprites 43 Image Animation 44 Encapsulation and Drawing Abstraction (aka Hiding Stuff) 46 Minimizing DOM Insertion and Deletion 46 The Sprite Code 46 A Simple Sprite Application 48 A More Dynamic Sprite Application 50 Converting into a jQuery Plug-in 53 Timers, Speed, and Frame Rate 56 Using setInterval and setTimeout 56 Timer Accuracy 58 Achieving Consistent Speed 59 Internet Explorer 6 Background Image Caching 63 Chapter聽3.聽Scrolling 65 CSS-Only Scrolling Effects 65 Scrolling with JavaScript 69 Background Image Scrolling 69 Tile-Based Image Scrolling 71 Snapping... 72 ...and Wrapping 74 Keeping things fast 74 Tile scrolling code 75 Creating tile maps with Tiled 79 Tiled file format 82 Tile scroller page layout 84 Chapter聽4.聽Advanced UI 87 HTML5 Forms 87 Using JavaScript UI Libraries 89 Using jQuery UI for Enhanced Web Interfaces 89 Loading and using jQuery UI 91 Theming jQuery UI 92 Heavy Duty UI with Ext JS 93 Loading and using Ext JS 95 Creating UI Elements from Scratch 96 Creating a 3D Carousel 97 Carousel specifications 99 Carousel image loading 100 Carousel item objects 101 The carousel object 103 The jQuery plug-in part 105 Carousel page layout 106 Chapter聽5.聽Introduction to JavaScript Games 109 Game Objects Overview 110 The Game Code 112 Game-Wide Variables 112 Reading Keys 113 Moving Everything 115 A Simple Animator 116 Collision Detection 117 Aliens 122 Alien bombs 122 Alien invaders 123 Aliens manager 125 The Player 128 Tank 128 Laser 130 Shields 131 Mystery Saucer 132 The Game 133 Putting It All Together 137 Chapter聽6.聽HTML5 Canvas 141 Canvas Support 142 Bitmaps, Vectors, or Both? 142 Canvas Limitations 143 Canvas Versus SVG 143 Canvas Versus Adobe Flash 144 Canvas Exporters 145 Canvas Drawing Basics 147 The Canvas Element 147 The Drawing Context 147 Drawing Rectangles 148 Drawing Paths with Lines and Curves 148 Drawing Bitmap Images 156 Colors, Strokes, and Fills 158 Animating with Canvas 162 Canvas and Recursive Drawing 165 Canvas Tree Page Layout 167 Replacing DHTML Sprites with Canvas Sprites 167 The New CanvasSprite Object 168 Other Code Changes 169 A Graphical Chat Application with Canvas and WebSockets 169 The WebSockets Advantage 170 WebSockets Support and Security 171 Turning on WebSockets in Firefox 4 and Opera 11 172 The Chat Application 172 The socket server 172 Installing a web hosting environment locally 173 The camera 175 The avatars 176 The chat text 178 The background 179 Initialization 180 The page code 182 Chapter聽7.聽Vectors for Games and Simulations 185 Operations on Vectors 188 Addition and Subtraction 188 Scaling 189 Normalization 189 Rotation 189 Dot Product 190 Creating a JavaScript Vector Object 191 A Cannon Simulation Using Vectors 192 Simulation-Wide Variables 193 The Cannonball 194 The Cannon 194 The Background 196 The Main Loop 197 Page Layout 197 Rocket Simulation 198 The Game Object 199 The Obstacle Object 200 The Rocket Object 201 Background 204 Collision Detection and Response 204 Page Code 207 Possible Improvements and Modifications 208 Chapter聽8.聽Google Visualizations 211 Limitations 212 Chart Glossary 214 Image Charts 215 Data Formats and Chart Resolution 217 Basic text format 218 Text format with custom scaling 219 Simple encoding format 219 Extended encoding format 220 Using Dynamic Data 221 Summary 225 Interactive Charts 225 Interactive Charts Events 229 Retrieving event information 230 Chapter聽9.聽Reaching the Small Screen with jQuery Mobile 233 jQuery Mobile 234 TilePic: A Mobile-Friendly Web Application 236 TilePic Game Description 236 TilePic Game Code 238 Application-wide variables 238 The tile object 239 Checking whether the puzzle is solved 240 Moving tiles 240 Shuffling the tiles 242 TilePic setup code 243 TilePic events 244 TilePic page layout 244 PhoneGap 248 Chapter聽10.聽Creating Android Apps with PhoneGap 249 Installing PhoneGap 250 Installing the Java JDK 250 Installing the Android SDK 251 Installing Eclipse 252 Installing Android Development Tools 253 Installing PhoneGap 254 Creating a PhoneGap Project in Eclipse 254 Altering the App.java File 256 Altering the AndroidManifest.xml File 257 Creating and Testing a Simple Web Application 258 Testing the TilePic Application 259 Index 261 With HTML5 and improved web browser support, JavaScript has become the tool of choice for creating high-performance web graphics. This faced-paced book shows you how to use JavaScript, jQuery, DHTML, and HTML5's Canvas element to create rich web applications for computers and mobile devices.By following real-world examples, experienced web developers learn fun and useful approaches to arcade games, DHTML effects, business dashboards, and other applications. This book serves complex subjects in easily digestible pieces, and each topic acts as a foundation for the next.Tackle JavaScript optimization and understand how it impacts performanceCreate fast-moving graphics by combining old-school DHTML with jQueryLearn advanced UI techniques using the jQuery UI and Ext JS librariesBuild games with collision detection, object handling, and JavaScript scrolling techniquesMaster HTML5 Canvas basics for drawings, fills, bitmaps, animation, and moreCreate applications for the small screen with jQuery Mobile and PhoneGapUse Google&#8217;s data visualization tools to create interactive dashboards "This fast-paced book shows you how to use JavaScript, jQuery, DHTML, and HTML5's Canvas element to create rich web applications for desktop and mobile devices. By following real-world examples, experienced web developers learn fun and useful approaches to arcade games, DHTML effects, business dashboards, and other applications"--Provided by publisher "This fast-paced book shows you how to use JavaScript, jQuery, DHTML, and HTML5's Canvas element to create rich web applications for desktop and mobile devices. By following real-world examples, experienced web developers learn fun and useful approaches to arcade games, DHTML effects, business dashboards, and other applications"--P. [4] of cover. "This fast-paced book shows you how to use JavaScript, jQuery, DHTML, and HTML5's Canvas element to create rich web applications for desktop and mobile devices. By following real-world examples, experienced web developers learn fun and useful approaches to arcade games, DHTML effects, business dashboards, and other applications"--Page 4 of cover