Supercharged JavaScript Graphics Code Examples

• DHTML Basics

• Basic sprites being drawn
• Multiple sprites animated and moved
• Converted into a jQuery plugin
• Time-adjusted movement (try it on different browsers and hardware)

• Code Reuse and Optimzation

• Math.sin() via lookup table

• Intro to JavaScript Games

• Orbit Assault: A DHTML arcade game

• Canvas

• Canvas blue rectangle
• Canvas triangles
• Canvas circles
• Naive implmentation of animation using Canvas
• Correct implmentation of animation using Canvas
• Multiple canvas sprites animated and moved
• Canvas quadratic and bezier curves
• Recursive canvas tree
• Canvas rounded rectangles
• Canvas gradients (sky, sun and grass)
• Socket server PHP source code
• Canvas websockets chat application

• Vectors

• Cannon simulation using vectors
• Rocket simulation using vectors

• jQuery Mobile

• Picture puzzle game using jQuery Mobile

• Phone Gap - NO CODE SAMPLES

• Google Visualizations

• Interactive chart
• Random dataset bar charts
• Random auto-refresh Google-O-Meter charts
• Interactive chart with mouse events
• QR Codes

• Advanced UI

• ExtJs
• jQuery UI
• 3d Carousel

• Scrolling

• CSS background scrolling
• JavaScript background scrolling
• JavaScript Tile Scrolling

• Download

• Download supercharged.zip