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

Content preview from Supercharged JavaScript Graphics

Chapter 9. Reaching the Small Screen with jQuery Mobile

Web-enabled mobile devices have opened up a plethora of development options for programmers and designers. With so many mobile platforms available, covering all bases and developing native applications for each mobile operating system is not practical. A nonexhaustive list of mobile operating systems includes:

iOS
Symbian
Android
BlackBerry OS
Windows Mobile
webOS

Each of these operating systems has its own development environment and programming languages. For example, Apple’s iOS uses the Cocoa development environment and the Objective-C programming language, whereas Android is built on Linux with development in Java. Unfortunately, the smallness of the devices belies the complexity of the underlying software. Even if we ignore the prospect of having to learn another programming language, we’re still faced with large and complex operating systems that provide a significant learning curve in and of themselves.

To eke out the best performance from mobile devices and to make best use of their hardware facilities, we’d ideally develop using the native operating systems and programming languages of the platform. However, where absolute performance is not crucial, development time is limited, and multiplatform support is desired, there is an alternative. Using your usual web development tools—JavaScript, HTML, and CSS—you can develop applications that offer much of the look and feel of native software, but without the overhead and learning ...