Chapter 6, Piano Man
by J.M. Gustafson
HTML5 Web Application Development By Example Beginner's guide
- HTML5 Web Application Development By Example Beginner's guide
- Table of Contents
- HTML5 Web Application Development By Example Beginner's guide
- Credits
- About the Author
- About the Reviewer
- www.PacktPub.com
- Preface
- 1. The Task at Hand
- The components of an HTML5 application
- Time for action – creating the HTML file
- Time for action – creating the CSS file
- Time for action – creating the JavaScript file
- Creating our first application
- Time for action – creating a tasklist
- Time for action – removing a task from the list
- Time for action – moving tasks within the list
- HTML templates
- Time for action – implementing a template
- Time for action – editing a task in the list
- Saving the state of the application
- Time for action – creating a localStorage wrapper
- Time for action – storing the tasklist
- Time for action – loading the tasklist
- Summary
- 2. Let's Get Stylish
- CSS3 overview
- Rounded corners
- Shadows
- Time for action – styles in action
- Backgrounds
- Time for action – adding a gradient and button images
- Transitions
- Transforms
- Time for action – effects in action
- Dynamic stylesheets
- Time for action – adding a theme selector
- Filling the window
- Time for action – expanding the application
- Summary
- 3. The Devil is in the Details
- HTML5 input types
- Task details
- Time for action – adding task details
- Time for action – hiding task details
- Custom data attributes
- Data binding with custom attributes
- Time for action – building a data model
- Time for action – implementing the bindings
- Time for action – loading the task list
- Queuing up changes
- Time for action – delaying the saves
- Summary
- 4. A Blank Canvas
- HTML5 canvas
- Getting a context
- Canvas basics
- Canvas pad
- Time for action – creating a canvas pad
- Time for action – showing the coordinates
- Drawing lines
- Time for action – using the mouse to draw
- Changing context properties
- Time for action – adding context properties
- Creating a toolbar
- Time for action – creating a toolbar
- Time for action – implementing a reusable toolbar
- Adding a toolbar
- Time for action – adding the toolbar object
- Time for action – initializing menu items
- Adding drawing actions
- Time for action – creating drawing actions
- Time for action – saving and restoring
- Adding drawing tools
- Time for action – adding a line tool
- Time for action – adding a rectangle tool
- Time for action – adding a circle tool
- Summary
- 5. Not So Blank Canvas
- Drawing text
- Time for action – adding a text tool
- Transformations
- Time for action – adding an Ellipse tool
- Time for action – exporting an image
- Handling touch events
- Time for action – adding touch event handlers
- Photo Pad
- Time for action – creating Photo Pad
- The File API
- Time for action – loading an image file
- Adding effects
- Time for action – the imageEffects object
- Time for action – black and white
- Time for action – sepia
- Image distortion
- Time for action – making waves
- Summary
- 6. Piano Man
- HTML5 audio overview
- Loading audio files
- Time for action – creating an AudioManager object
- HTML5 piano application
- Time for action – creating a virtual piano
- Time for action – loading the notes
- Time for action – playing the notes
- Keyboard events
- Time for action – adding keyboard events
- Volume and sustain controls
- Time for action – adding a sustain control
- Time for action – adding a volume control
- Audio tools
- Summary
- 7. Piano Hero
- Creating Piano Hero
- Time for action – creating the splash panel
- Time for action – creating the game panel
- Time for action – creating the controller
- Creating an audio sequencer
- Time for action – creating AudioSequencer
- Playing a song
- Time for action – adding the audio sequencer
- Creating animated notes
- Time for action – adding notes
- Time for action – animating the notes
- Handling user input
- Time for action – checking the notes
- Ending the game
- Time for action – creating the results panel
- Summary
- 8. A Change in the Weather
- 9. Web Workers Unite
- 10. Releasing an App into the Wild
- A. Pop Quiz Answers
- Chapter 1, The Task at Hand
- Chapter 2, Let's Get Stylish
- Chapter 3, The Devil is in the details
- Chapter 4, A Blank Canvas
- Chapter 5, Not So Blank Canvas
- Chapter 6, Piano Man
- Chapter 7, Piano Hero
- Chapter 8, A Change in the Weather
- Chapter 9, Web Workers Unite
- Chapter 10, Releasing an App into the Wild
- Index
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.