book

Supercharged JavaScript Graphics

by Raffaele Cecco

July 2011

Intermediate to advanced

278 pages

7h 20m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Audience and AssumptionsOrganizationConventions Used in This BookUsing Code ExamplesTarget BrowsersSafari® Books OnlineHow to Contact UsAcknowledgments
Keeping It FastWhat and When to OptimizeHomespun Code ProfilingOptimizing JavaScriptLookup TablesBitwise Operators, Integers, and Binary NumbersA quick recap of binary numbersJavaScript’s bitwise operatorsBitwise AND (x & y)Bitwise OR (x | y)Bitwise XOR (x ^ y)Bitwise NOT (~x)Shift left (x << numBits)Shift right with sign (x >> numBits)Shift right with zero fill (x >>> y)Loop unrolling: An inconvenient truthOptimizing jQuery and DOM InteractionOptimizing CSS Style ChangesOptimizing DOM InsertionOther Resources
Creating DHTML SpritesImage AnimationEncapsulation and Drawing Abstraction (aka Hiding Stuff)Minimizing DOM Insertion and DeletionThe Sprite CodeA Simple Sprite ApplicationA More Dynamic Sprite ApplicationConverting into a jQuery Plug-inTimers, Speed, and Frame RateUsing setInterval and setTimeoutTimer AccuracyAchieving Consistent SpeedInternet Explorer 6 Background Image Caching
CSS-Only Scrolling EffectsScrolling with JavaScriptBackground Image ScrollingTile-Based Image ScrollingSnapping......and WrappingKeeping things fastTile scrolling codeCreating tile maps with TiledTiled file formatTile scroller page layout
HTML5 FormsUsing JavaScript UI LibrariesUsing jQuery UI for Enhanced Web InterfacesLoading and using jQuery UITheming jQuery UIHeavy Duty UI with Ext JSLoading and using Ext JSCreating UI Elements from ScratchCreating a 3D CarouselCarousel specificationsCarousel image loadingCarousel item objectsThe carousel objectThe jQuery plug-in partCarousel page layout
Game Objects OverviewThe Game CodeGame-Wide VariablesReading KeysMoving EverythingA Simple AnimatorCollision DetectionAliensAlien bombsAlien invadersAliens managerThe PlayerTankLaserShieldsMystery SaucerThe GamePutting It All Together
Canvas SupportBitmaps, Vectors, or Both?Canvas LimitationsCanvas Versus SVGCanvas Versus Adobe FlashCanvas ExportersCanvas Drawing BasicsThe Canvas ElementThe Drawing ContextDrawing RectanglesDrawing Paths with Lines and CurvesDrawing Bitmap ImagesColors, Strokes, and FillsAnimating with CanvasCanvas and Recursive DrawingCanvas Tree Page LayoutReplacing DHTML Sprites with Canvas SpritesThe New CanvasSprite ObjectOther Code ChangesA Graphical Chat Application with Canvas and WebSocketsThe WebSockets AdvantageWebSockets Support and SecurityTurning on WebSockets in Firefox 4 and Opera 11The Chat ApplicationThe socket serverInstalling a web hosting environment locallyThe cameraThe avatarsThe chat textThe backgroundInitializationThe page code
Operations on VectorsAddition and SubtractionScalingNormalizationRotationDot ProductCreating a JavaScript Vector ObjectA Cannon Simulation Using VectorsSimulation-Wide VariablesThe CannonballThe CannonThe BackgroundThe Main LoopPage LayoutRocket SimulationThe Game ObjectThe Obstacle ObjectThe Rocket ObjectBackgroundCollision Detection and ResponsePage CodePossible Improvements and Modifications
LimitationsChart GlossaryImage ChartsData Formats and Chart ResolutionBasic text formatText format with custom scalingSimple encoding formatExtended encoding formatUsing Dynamic DataSummaryInteractive ChartsInteractive Charts EventsRetrieving event information
jQuery MobileTilePic: A Mobile-Friendly Web ApplicationTilePic Game DescriptionTilePic Game CodeApplication-wide variablesThe tile objectChecking whether the puzzle is solvedMoving tilesShuffling the tilesTilePic setup codeTilePic eventsTilePic page layoutPhoneGap

Installing PhoneGapInstalling the Java JDKInstalling the Android SDKInstalling EclipseInstalling Android Development ToolsInstalling PhoneGapCreating a PhoneGap Project in EclipseAltering the App.java FileAltering the AndroidManifest.xml FileCreating and Testing a Simple Web ApplicationTesting the TilePic Application

Overview

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 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