Supercharged JavaScript Graphics by Cecco, Raffaele -- Read -- Imperial Library of Trantor

Index

Supercharged JavaScript Graphics

SPECIAL OFFER: Upgrade this ebook with O’Reilly Preface

Audience and Assumptions Organization Conventions Used in This Book Using Code Examples

Target Browsers

Safari® Books Online How to Contact Us Acknowledgments

1. Code Reuse and Optimization

Keeping It Fast What and When to Optimize Homespun Code Profiling Optimizing JavaScript

Lookup Tables Bitwise Operators, Integers, and Binary Numbers

A quick recap of binary numbers JavaScript’s bitwise operators

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

Optimizing jQuery and DOM Interaction

Optimizing CSS Style Changes Optimizing DOM Insertion

Other Resources

2. DHTML Essentials

Creating DHTML Sprites

Image Animation Encapsulation and Drawing Abstraction (aka Hiding Stuff) Minimizing DOM Insertion and Deletion The Sprite Code A Simple Sprite Application A More Dynamic Sprite Application

Converting into a jQuery Plug-in Timers, Speed, and Frame Rate

Using setInterval and setTimeout Timer Accuracy Achieving Consistent Speed

Internet Explorer 6 Background Image Caching

3. Scrolling

CSS-Only Scrolling Effects Scrolling with JavaScript

Background Image Scrolling Tile-Based Image Scrolling

Snapping... ...and Wrapping Keeping things fast Tile scrolling code Creating tile maps with Tiled

Tiled file format

Tile scroller page layout

4. Advanced UI

HTML5 Forms Using JavaScript UI Libraries

Using jQuery UI for Enhanced Web Interfaces

Loading and using jQuery UI Theming jQuery UI

Heavy Duty UI with Ext JS

Loading and using Ext JS

Creating UI Elements from Scratch

Creating a 3D Carousel

Carousel specifications Carousel image loading Carousel item objects The carousel object The jQuery plug-in part Carousel page layout

5. Introduction to JavaScript Games

Game Objects Overview The Game Code

Game-Wide Variables Reading Keys Moving Everything A Simple Animator Collision Detection Aliens

Alien bombs Alien invaders Aliens manager

The Player

Tank Laser

Shields Mystery Saucer The Game Putting It All Together

6. HTML5 Canvas

Canvas Support Bitmaps, Vectors, or Both? Canvas Limitations Canvas Versus SVG Canvas Versus Adobe Flash Canvas Exporters Canvas Drawing Basics

The Canvas Element The Drawing Context Drawing Rectangles Drawing Paths with Lines and Curves Drawing Bitmap Images Colors, Strokes, and Fills

Animating with Canvas Canvas and Recursive Drawing

Canvas Tree Page Layout

Replacing DHTML Sprites with Canvas Sprites

The New CanvasSprite Object Other Code Changes

A Graphical Chat Application with Canvas and WebSockets

The WebSockets Advantage WebSockets Support and Security

Turning on WebSockets in Firefox 4 and Opera 11

The Chat Application

The socket server Installing a web hosting environment locally The camera The avatars The chat text The background Initialization The page code

7. Vectors for Games and Simulations

Operations on Vectors

Addition and Subtraction Scaling Normalization Rotation Dot Product

Creating a JavaScript Vector Object A Cannon Simulation Using Vectors

Simulation-Wide Variables The Cannonball The Cannon The Background The Main Loop Page Layout

Rocket Simulation

The Game Object The Obstacle Object The Rocket Object Background Collision Detection and Response Page Code Possible Improvements and Modifications

8. Google Visualizations

Limitations Chart Glossary Image Charts

Data Formats and Chart Resolution

Basic text format Text format with custom scaling Simple encoding format Extended encoding format

Using Dynamic Data Summary

Interactive Charts

Interactive Charts Events

Retrieving event information

9. Reaching the Small Screen with jQuery Mobile

jQuery Mobile TilePic: A Mobile-Friendly Web Application

TilePic Game Description TilePic Game Code

Application-wide variables The tile object Checking whether the puzzle is solved Moving tiles Shuffling the tiles TilePic setup code TilePic events TilePic page layout

PhoneGap

10. Creating Android Apps with PhoneGap

Installing PhoneGap

Installing the Java JDK Installing the Android SDK Installing Eclipse Installing Android Development Tools Installing PhoneGap

Creating a PhoneGap Project in Eclipse

Altering the App.java File Altering the AndroidManifest.xml File Creating and Testing a Simple Web Application Testing the TilePic Application

Index About the Author Colophon SPECIAL OFFER: Upgrade this ebook with O’Reilly

← Prev
Back
Next →

← Prev
Back
Next →