Supercharged JavaScript Graphics

دوره آموزش Javascript

1. Code Reuse and Optimization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Keeping It Fast 4
What and When to Optimize 5
Homespun Code Profiling 7
Optimizing JavaScript 8
Lookup Tables 8
Bitwise Operators, Integers, and Binary Numbers 12
Optimizing jQuery and DOM Interaction 19
Optimizing CSS Style Changes 20
Optimizing DOM Insertion 23
Other Resources 23
2. DHTML Essentials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Creating DHTML Sprites 25
Image Animation 26
Encapsulation and Drawing Abstraction (aka Hiding Stuff) 28
Minimizing DOM Insertion and Deletion 28
The Sprite Code 28
A Simple Sprite Application 30
A More Dynamic Sprite Application 32
Converting into a jQuery Plug-in 35
Timers, Speed, and Frame Rate 38
Using setInterval and setTimeout 38
Timer Accuracy 40
Achieving Consistent Speed 41
Internet Explorer 6 Background Image Caching 45
3. Scrolling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
CSS-Only Scrolling Effects 47

Scrolling with JavaScript 51
Background Image Scrolling 51
Tile-Based Image Scrolling 53
4. Advanced UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
HTML5 Forms 69
Using JavaScript UI Libraries 71
Using jQuery UI for Enhanced Web Interfaces 71
Heavy Duty UI with Ext JS 75
Creating UI Elements from Scratch 78
Creating a 3D Carousel 79
5. Introduction to JavaScript Games . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Game Objects Overview 92
The Game Code 94
Game-Wide Variables 94
Reading Keys 95
Moving Everything 97
A Simple Animator 98
Collision Detection 99
Aliens 104
The Player 110
Shields 113
Mystery Saucer 114
The Game 115
Putting It All Together 119
6. HTML5 Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Canvas Support 124
Bitmaps, Vectors, or Both? 124
Canvas Limitations 125
Canvas Versus SVG 125
Canvas Versus Adobe Flash 126
Canvas Exporters 127
Canvas Drawing Basics 129
The Canvas Element 129
The Drawing Context 129
Drawing Rectangles 130
Drawing Paths with Lines and Curves 130
Drawing Bitmap Images 138
Colors, Strokes, and Fills 140
Animating with Canvas 144
Canvas and Recursive Drawing 147