(FREE PDF Sample) HTML5 Game Development by Example Beginner S Guide Second Edition Thomas Mak Ebooks
(FREE PDF Sample) HTML5 Game Development by Example Beginner S Guide Second Edition Thomas Mak Ebooks
com
OR CLICK BUTTON
DOWLOAD NOW
More products digital (pdf, epub, mobi) instant
download maybe you interests ...
https://ebookmeta.com/product/responsive-web-design-by-example-
beginner-s-guide-2nd-edition-thoriq-firdaus/
https://ebookmeta.com/product/game-programming-using-
qt-5-beginner-s-guide-second-edition-lorenz-haas/
https://ebookmeta.com/product/cross-over-to-html5-game-
development-1st-edition-zarrar-chishti/
https://ebookmeta.com/product/code-gamers-development-
essentials-a-9-week-beginner-s-guide-to-start-your-game-
development-career-1st-edition-a-e-colonna/
ATDD by Example A Practical Guide to Acceptance Test
Driven Development 1st Edition Markus Gärtner
https://ebookmeta.com/product/atdd-by-example-a-practical-guide-
to-acceptance-test-driven-development-1st-edition-markus-gartner/
https://ebookmeta.com/product/drupal-7-mobile-web-development-
beginner-s-guide-1st-edition-stovall-tom/
https://ebookmeta.com/product/scientific-research-in-information-
systems-a-beginner-s-guide-second-edition-jan-recker/
https://ebookmeta.com/product/beginning-unity-android-game-
development-from-beginner-to-pro-1st-edition-kishan-takoordyal/
https://ebookmeta.com/product/stitch-by-stitch-a-beginner-s-
guide-to-needlecraft-2023-edition-jane-bull/
HTML5 Game Development by Example
Beginner's Guide Second Edition
Table of Contents
HTML5 Game Development by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Sections
Time for action – heading
What just happened?
Pop quiz – heading
Have a go hero – heading
Conventions
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
Errata
Piracy
Questions
1. Introducing HTML5 Games
Discovering new features in HTML5
Canvas
Audio
Touch Events
GeoLocation
WebGL
WebSocket
Local storage
Offline applications
Discovering new features in CSS3
CSS3 transition
CSS3 transform
CSS3 animation
The benefit of creating HTML5 games
Free and open standards
Support for multiple platforms
Native app-rendering performance in particular scenarios
Breaking the boundary of usual browser games
Building HTML5 games
What others are playing with HTML5
Coca-Cola's Ahh campaign
Asteroid-styled bookmarklet
X-Type
Cursors.io
What we are going to create in this book
Preparing the development environment
Summary
2. Getting Started with DOM-based Game Development
Preparing the HTML documents for a DOM-based game
Time for action – installing the jQuery library
What just happened?
New HTML5 doctype
Header and footer
The best practice to place the JavaScript code
Choosing the jQuery file
Running jQuery inside a scope
Running our code after the page is ready
Pop quiz
Downloading the image assets
Setting up the Ping Pong game elements
Time for action – placing Ping Pong game elements in the DOM
What just happened?
Using jQuery
Understanding basic jQuery selectors
Understanding the jQuery CSS function
Manipulating game elements in DOM with jQuery
Understanding the behavior of absolute position
Declaring global variables in a better way
Pop quiz
Getting mouse input
Time for action – moving DOM objects by mouse input
What just happened?
Getting the mouse event
RequestAnimationFrame
Checking the console window
Moving a DOM object with JavaScript Interval
Time for action – Moving the ball with JavaScript Interval
What just happened?
Creating a JavaScript timer with the setInterval function
Understanding the game loop
Separating the data and the view logic
Beginning collision detection
Time for action – hitting the ball with the paddles
What just happened?
Have a go hero
Controlling the left paddle movement
Time for action – auto moving the left paddle
What just happened?
Showing text dynamically in HTML
Time for action – Showing the score of both players
What just happened?
Have a go hero – winning the game
Summary
3. Building a Card-matching Game in CSS3
Moving game objects with CSS3 transition
Time for action – moving a playing card around
What just happened?
2D transform functions
3D transform functions
Tweening the styles using CSS3 transition
Have a go hero
Creating a card-flipping effect
Time for action – flipping a card with CSS3
What just happened?
Toggling a class with jQuery's toggleClass function
Introducing CSS' perspective property
Have a go hero
Introducing backface-visibility
Creating a card-matching memory game
Downloading the sprite sheet of playing cards
Setting up the game environment
Time for action – preparing the card-matching game
What just happened?
Cloning DOM elements with jQuery
Selecting the first child of an element in jQuery using child filters
Vertically aligning a DOM element
Using CSS sprite with a background position
Adding game logic to the matching game
Time for action – adding game logic to the matching game
What just happened?
Executing code after the CSS transition has ended
Delaying code execution on flipping cards
Randomizing an array in JavaScript
Storing internal custom data with an HTML5 custom data attribute
Pop quiz
Accessing custom data attribute with jQuery
Pop quiz
Have a go hero
Making other playing card games
Have a go hero
Embedding web fonts into our game
Time for action – embedding a font from the Google Fonts directory
What just happened?
Choosing different font delivery services
Summary
4. Building the Untangle Game with Canvas and the Drawing API
Introducing the HTML5 canvas element
Drawing a circle in the Canvas
Time for action – drawing color circles in the Canvas
What just happened?
Putting in fallback content when the web browser does not support the
Canvas
The Canvas context
Drawing circles and shapes with the Canvas arc function
Converting degrees to radians
Executing the path drawing in the Canvas
Beginning a path for each style
Have a go hero
Closing a path
Pop quiz
Wrapping the circle drawing in a function
Time for action – putting the circle drawing code into a function
What just happened?
Dividing code into files
Generating random numbers in JavaScript
Saving the circle position
Time for action – saving the circle position
What just happened?
Defining a basic class definition in JavaScript
Have a go hero
Drawing lines in the Canvas
Time for action – drawing straight lines between each circle
What just happened?
Introducing the line drawing API
Using mouse events to interact with objects drawn in the Canvas
Time for action – dragging the circles in the Canvas
What just happened?
Detecting mouse events in circles in the Canvas
Pop quiz
Game loop
Clearing the Canvas
Pop quiz
Detecting line intersection in the Canvas
Time for action – distinguishing the intersected lines
What just happened?
Determining whether two line segments intersect
Adding touch support for tablets
Time for action – adding the touch input support
What just happened?
Handling touches
Mouse move and Touch move
Summary
5. Building a Canvas Game's Masterclass
Making the Untangle puzzle game
Time for action – making the Untangle puzzle game in Canvas
What just happened?
Defining the leveling data
Determining level-up
Displaying the current level and completeness progress
Have a go hero
Drawing text in the Canvas
Time for action – displaying the progress level text inside the canvas element
What just happened?
Pop quiz – drawing text in the Canvas
Using embedded web font inside the Canvas
Time for action – embedding a Google web font into the canvas element
What just happened?
Drawing images in the Canvas
Time for action – adding graphics to the game
What just happened?
Have a go hero
Using the drawImage function
Have a go hero – optimizing the background image
Decorating the Canvas-based game
Time for action – adding CSS styles and image decoration to the game
What just happened?
Pop quiz – styling a Canvas background
Animating a sprite sheet in Canvas
Time for action – making a game guide animation
What just happened?
Creating a multilayer Canvas game
Time for action – dividing the game into four layers
What just happened?
Mixing a CSS technique with Canvas drawing
Have a go hero
Summary
6. Adding Sound Effects to Your Games
Adding a sound effect to the Play button
Time for action – adding sound effects to the Play button
What just happened?
Defining an audio element
Playing a sound
jQuery's selector versus browser selector
Pausing a sound
Adjusting the sound volume
Using the jQuery hover event
File format for WebAudio
Pop quiz – using the audio tag
Building a mini piano musical game
Time for action – creating a basic background for the music game
What just happened?
Creating scenes in games
Creating a slide-in effect in CSS3
Have a go hero – creating different scene transition effects
Visualizing the music playback
Time for action – creating the playback visualization in the music game
What just happened?
Choosing the right song for the music game
Playing audio on mobile devices
Storing and extracting the song-level data
Getting the elapsed time of the game
Creating music dots
Moving the music dots
Creating a keyboard-driven mini piano musical game
Time for action – creating a mini piano musical game
What just happened?
Hitting the three music lines by key down
Determining music dot hits on key down
Removing an element in an array with the given index
Have a go hero
Adding additional features to the mini piano game
Adjusting the music volume according to the player
Time for action – removing missed melody notes
What just happened?
Removing dots from the game
Storing the success count in the last five results
Have a go hero
Recording music notes as level data
Time for action – adding functionalities to record the music level data
What just happened?
Adding touch support
Time for action – indicating a game over event in the console
What just happened?
Handling the audio event in playback complete events
Time for action – indicating a game over event in the console
What just happened?
Handling audio events
Have a go hero
Summary
7. Saving the Game's Progress
Storing data using HTML5 local storage
Creating a game over dialog
Time for action – creating a game over dialog with the elapsed played time
What just happened?
Counting time
Saving scores in the browser
Time for action – saving the game score
What just happened?
Storing and loading data with local storage
The local storage saves the string value
Treating the local storage object as an associative array
Saving objects in the local storage
Time for action – saving the time alongside the score
What just happened?
Getting the current date and time in JavaScript
Using the native JSON to encode an object into a string
Loading a stored object from a JSON string
Inspecting the local storage in a console window
Notifying players when they break a new record with a nice ribbon effect
Time for action – creating a ribbon in CSS3
What just happened?
Have a go hero – saving and comparing only to the fastest time
Saving the entire game progress
Time for action – saving all essential game data in the local storage
What just happened?
Removing a record from the local storage
Cloning an array in JavaScript
Resuming the game progress
Time for action – resuming a game from the local storage
What just happened?
Pop quiz – using local storage
Caching the game for offline access
Time for action – adding the AppCache Manifest
What just happened?
The AppCache file
Summary
8. Building a Multiplayer Draw-and-Guess Game with WebSockets
Installing a WebSocket server
Installing the Node.js WebSocket server
Time for action – installing Node.js
What just happened?
Creating a WebSocket server to send connection count
Time for action – running a WebSocket server
What just happened?
Initializing the WebSocket server
Listening to the connection event on the server side
Creating a client that connects to a WebSocket server and getting the total
connections count
Time for action – showing the connection count in a WebSocket application
What just happened?
Establishing a WebSocket connection
WebSocket client events
Sending a message to all connected browsers
Time for action – sending total count to all users
What just happened?
Defining class and instant instance methods
Handling a newly connected user
Exporting modules
Sending messages to the client
Building a chatting application with WebSockets
Sending a message to the server
Time for action – sending a message to the server through WebSockets
What just happened?
Sending a message from the client to the server
Receiving a message on the server side
Sending every received message on the server side to create a chat room
Time for action – sending messages to all connected browsers
What just happened?
Comparing WebSockets with polling approaches
Making a shared drawing whiteboard with Canvas and WebSockets
Building a local drawing sketchpad
Time for action – making a local drawing whiteboard with the Canvas
What just happened?
Drawing in the Canvas
Have a go hero – drawing with colors
Sending the drawing to all the connected browsers
Time for action – sending the drawing through WebSockets
What just happened?
Defining a data object to communicate between the client and the server
Packing the drawing lines data into JSON for sending
Recreating the drawing lines after receiving them from other clients
Building a multiplayer draw-and-guess game
Time for action – building the draw-and-guess game
What just happened?
Inheriting the Room class
Controlling the game flow of a multiplayer game
Room and Game Room
Improving the game
Improving the styles
Storing drawn lines on each game
Have a go hero
Improving the answer checking mechanism
Have a go hero
Summary
9. Building a Physics Car Game with Box2D and Canvas
Installing the Box2D JavaScript library
Time for action – installing the Box2D physics library
What just happened?
Using b2World to create a new world
Setting the gravity of the world
Setting Box2D to ignore the sleeping object
Creating a static ground body in the physics world
Time for action – creating a ground in the world
What just happened?
Pixel per meter
Creating a shape with a fixture
Creating a body
Setting the bouncing effect with the restitution property
Drawing the physics world in the canvas
Time for action – drawing the physics world into the Canvas
What just happened?
Creating a dynamic box in the physics world
Time for action – putting a dynamic box in the world
What just happened?
Advancing the world time
Time for action – setting up the world step loop
What just happened?
Adding wheels to the game
Time for action – putting two circles in the world
What just happened?
Creating a physical car
Time for action – connecting the box and two circles with a revolute joint
What just happened?
Using a revolute joint to create an anchor point between two bodies
Adding force to the car with a keyboard input
Time for action – adding force to the car
What just happened?
Applying force to a body
Clearing Force
Understanding the difference between ApplyForce and ApplyImpulse
Have a go hero
Adding ramps to our game environment
Time for action – creating the world with ramps
What just happened?
Have a go hero
Checking collisions in the Box2D world
Time for action – checking a collision between the car and the destination
body
What just happened?
Getting the collision contact list
Have a go hero
Restarting the game
Time for action – restarting the game while pressing the R key
What just happened?
Have a go hero
Adding a level support to our car game
Time for action – loading the game with levels data
What just happened?
Have a go hero
Replacing the Box2D outline drawing with graphics
Time for action – adding a flag graphic and a car graphic to the game
What just happened?
Using userData in shape and body
Drawing graphics in every frame according to the state of its physics body
Rotating and translating an image in the canvas
Have a go hero
Adding a final touch to make the game fun to play
Time for action – decorating the game and adding a fuel limitation
What just happened?
Adding fuel to add a constraint when applying force
Presenting the remaining fuel in a CSS3 progress bar
Adding touch support for tablets
Time for action – adding touch support
What just happened?
Controlling the viewport scale
Touch-specific buttons
Summary
10. Deploying HTML5 Games
Preparing the deploying materials
Putting the game on the Web
Hosting the node.js server
Deploying as a mobile web app in the home screen
Time for action – adding a meta tag for a mobile web app
What just happened?
Building an HTML5 game into a Mac OS X app
Time for action—putting the HTML5 games into a Mac app
What just happened?
Building an HTML5 game into a mobile app with the Web View
Building with the PhoneGap build
App store's reviewing process
Summary
A. Pop Quiz Answers
Chapter 2, Getting Started with DOM-based Game Development
Preparing the HTML documents for a DOM-based game
Pop quiz
Setting up the Ping Pong game elements
Pop quiz
Chapter 3, Building a Card-matching Game in CSS3
Storing internal custom data with an HTML5 custom data attribute
Pop quiz
Accessing custom data attribute with jQuery
Pop quiz
Chapter 4, Building the Untangle Game with Canvas and the Drawing API
Drawing a circle in the Canvas
Pop quiz
Using mouse events to interact with objects drawn in the Canvas
Detecting mouse events in circles in the Canvas
Pop quiz
Clearing the Canvas
Pop quiz
Chapter 5, Building a Canvas Game's Masterclass
Drawing text in the Canvas
Pop quiz – drawing text in the Canvas
Drawing images in the Canvas
Pop quiz – styling a Canvas background
Chapter 6, Adding Sound Effects to Your Games
Adding a sound effect to the Play button
Pop quiz – using the audio tag
Chapter 7, Saving the Game's Progress
Saving the entire game progress
Pop quiz – using local storage
Index
Another random document with
no related content on Scribd:
"Perhaps not." Cyril's manner became more resolute. "I am
sorry this has come up," he said frankly. "It is not the time
or place—and I forgot. But since it has, I ought to explain. I
met the Lucases abroad; and I assure you, I found them
most kind—as pleasant as could be. I like them immensely
—yes—him!" in reply to a monosyllable. "I mean—one is so
sorry for him, and he does fight so hard not to be
overcome. I don't really think it's a case when everybody
ought to stand aloof. I don't—really, Lady Lucas."
"Thank God!"
CHAPTER VIII.
DARK-EYED EMMIE.
His wife and daughter loved him dearly despite all they had
endured through him—despite the shame he had made
them suffer. And for more than a year he had not once
given way. Emmeline's tender little heart was sure—quite
sure—he never would again. The poor wife would fain have
felt equally sure. She better understood the power of
sudden temptation.
Like most girls, she had her girlish love of friends and
companions, her girlish enjoyment of chatter and fun, her
girlish longings and dreams. She had built a good deal—
much more than she was aware—on the prospect of Sir
Cyril's friendship; not so much for herself as for her
parents. She was hardly more than a child yet; but she
knew how much her father liked Sir Cyril, and how good it
was for him to have outside interests—so long as no danger
was involved—and how it cheered her mother to have her
father in good spirits.
Persistent rain had fallen all the morning and was falling
still, making the Dutton pavements wet, making the Dutton
world muddy. To keep up one's spirits on such a day is
always more difficult than in sunshine.
"O mother! I didn't hear you come in. Yes, I believe I was
doing what that maid called 'siloloquising.' Isn't it a horrid
day? Come and look-out."
"No."
"I dare say they will drop their cards some day."
Mrs. Lucas put back the short dark hair which clustered
round the girl's brow.
"What is your mind so busy about to-day, dear?"
"Yes, dear."
"She knows all that so well. Shouldn't you think, if she were
a really good woman, she would want to do something to
help? She would not leave him alone, to feel dull and
miserable, and perhaps to—Mother, she must know how bad
that is for him—how much harder it makes it for him to
keep on."
"I don't suppose she thinks of the question from his side at
all, but only from her own."
"Ah, that is just what you and I can't judge. We can't see
with her eyes, you know, or understand exactly how things
look to her. She may be acting most conscientiously even in
keeping away from us. I believe she really is extremely kind
and benevolent—to other people."
"Yes; and she would not be praised for kindness to us. Her
friends would even say—'How odd!'"
"One person may, and another may not. And if one does
inherit the taste, there is no must be about using it. We
have it in our choice whether to use or not to use the things
we are born with. It is the same all round. You have
inherited two eyes; but whether you use those eyes is at
your own option. If you like to bandage them up all your
life, you will slay them by disuse."
Sir Cyril came in slowly, pale but smiling, his right arm
bound across his chest.
But as for which of the two Sir Cyril admired the most?
Since he himself was unable to answer that question, it is
unlikely that any one else should be able to answer it for
him. He only knew that he liked best for the moment
whichever he happened to be with.
"We hoped to see you soon," Mrs. Lucas made answer, for
Emmie was dumb.
Cyril did not feel obliged to state that the kettledrum was at
Lady Lucas; the more since his unfortunate word
"scandalised" had brought a faint flush to Mrs. Lucas' cheek.
"Yes, you will see her soon. She hasn't been yet, I am
afraid, for her father has been ill. I fancy he was unwell
before, and the shock upset him. After he got home, he had
a sort of unconscious attack—not exactly fainting. Dr.
Ingram says he is overworked, and orders—"
Cyril broke off anew, clutching the arm of the chair with his
left hand.
"Don't stir, or try to talk," said Mrs. Lucas. "I am afraid you
ought to have stayed at home. Emmie, dear, that bottle of
strong salts—no, I cannot tell you exactly where it is. I shall
find it more quickly myself."
Mrs. Lucas vanished, and Cyril rested his head against the
chair-back. Emmie stood watching him, with a gaze full of
distressful pity. She was always easily stirred by the sight of
suffering. For some seconds, Cyril was too much occupied
with himself to notice her. Then a fresh stab in the arm
brought an uncontrollable start, a change of posture, and a
sharp drawing in of his breath, as if he hardly knew how to
bear it. A faint sob from Emmie made him look up, to see a
pair of dark eyes overflowing, a pair of sweet lips quivering.
He tried to smile and to reassure her.
Tea came in, and Emmie could hardly wait for the tray to be
put down. She poured out, and brought the cup to his side,
forgetting to cry in her eagerness.
CHAPTER IX.
COMPLEXITIES OF LIFE.
• • • • •
Somewhat later, Jean went softly into his room, to find him
sound asleep; so she moved softly away.
"Yes, Elizabeth."
"Barclay, Miss."
"Send for the Parson! I must see Mr. Trevelyan. For the love
of heaven, fetch him quick! For pity's sake, make haste!"
were the entreaties and commands gasped out in the midst
of mortal pain.
"So I just come off sharp, for I didn't see what else I was to
do," continued Smithson: "and I thought you'd know! If it
wasn't a matter of life and death—! And Mr. Trevelyan that
set on bein' good to him! The times an' agen I've seen him
a-goin' there, and the way he's been treated! But anyway it
wasn't for me to say 'No' to a man, and he dying."
"Barclay says he'll see none but the Parson, Miss! He's that
bent on it! I asked him, and he shouted out 'No!' louder
than I'd have thought he could. And I doubt there mightn't
be time," in a lower voice. "He's awful bad. The doctor
telled my missis, he might be gone any minute. Seems
hard, if he can't have his dying wish, poor chap! But if Mr.
Trevelyan ain't fit—"
Jean had never in her life so longed, for some one to appeal
to; some one of whom to ask advice. How could she take
upon herself the responsibility of calling her father?—Yet
how could she take upon herself the other responsibility of
not calling him? Jean's was no weak nature, loving to shirk
responsibilities; but this was a terrible ordeal. It might be a
matter of life and death for Mr. Trevelyan! Yet, if Barclay
should die, vainly craving the promised help, because she
had deliberately withheld it—what would her father say?
"Wait here till I come back," she said; and she went
upstairs.
She held the bedstead with one hand, looking down on the
worn face, and tried to imagine herself in Mr. Trevelyan's
position—bound by his duties and responsibilities, bound
also in this case by a particular promise, Jean knew at once,
with vivid certainty, that she would count herself bound to
go, irrespective of personal risk; that she would expect to
be called; that she would blame severely any one who
should venture to deny to her the choice.
Yet she could have done it, could have dared all, had she
felt sure she would be doing rightly. But that she could not
feel. She pictured herself, for one moment in Barclay's
place! Then came another question, "If CHRIST were here,
would HE hold back?"
"Father!"
"Jean! Yes."
"A man up the gorge is ill—and he has sent. Don't you think
we can ask Jem to go?"
"Wants me?"
"Who is it?"
"No, Jean."
Jean was fain to submit. She knew from her father's face,
the uselessness of further protest.
Jean followed him to the front door, where the cold chill of
the almost freezing fog struck them as with an invisible
hand. Then she was ordered back; but not before the
thought came—what would the gorge be like, on such an
evening? For herself, she would have thought nothing of it;
but for Mr. Trevelyan—!
She had wanted a quiet hour, and now she had it. The
Parish accounts were gainers thereby; but at the hour's
end, Jean could do no more. Even her self-mastery for once
failed under the strain. She could neither work nor read, but
could only walk to and fro, restlessly questioning with
herself; one moment bitterly regretting her own action; the
next, feeling that if all should come over again, no other
decision would be possible. She knew well that, if she had
not called her father, she would be quite as unhappy now
from the opposite cause.
Jem held two cold hands to the fire, and examined Jean
with kind eyes. He had rarely seen her so troubled. She
grew whiter as she told him what had passed, and sought
his face sorrowfully for an opinion.