HTML5 Game Development by Example: Beginner's Guide - Second Edition

Name: HTML5 Game Development by Example: Beginner's Guide - Second Edition | Make the most of HTML5 techniques to create exciting games from scratch
Brand: Packt Publishing
Availability: OnlineOnly

Make the most of HTML5 techniques to create exciting games from scratch

Makzan(Autor*in)

Packt Publishing

1. Auflage

Erschienen am 26. Juni 2015

354 Seiten

E-Book

ePUB mit Adobe-DRM

Systemvoraussetzungen

E-Book

PDF mit Adobe-DRM

Systemvoraussetzungen

978-1-78528-788-6 (ISBN)

ab 34,99 €

Als Download verfügbar

Merkliste: siehe Preise

Beschreibung

Alle Preise

Weitere Details

Weitere Ausgaben

Inhalt

Cover
Copyright
Credits
About the Author
About the Reviewers
www.PacktPub.com
Table of Contents
Preface
Chapter 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
Chapter 2: Getting Started with DOM-based Game Development
Preparing the HTML documents for a DOM-based game
Time for action - installing the jQuery library
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
Downloading the image assets
Setting up the Ping Pong game elements
Time for action - placing Ping Pong game elements in the DOM
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
Getting mouse input
Time for action - moving DOM objects by mouse input
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
Creating a JavaScript timer with 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
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?
Summary
Chapter 3: Building a Card Matching Game in CSS3
Moving game objects with CSS3 transition
Time for action - moving a playing card around
2D transform functions
3D transform functions
Tweening the styles by using CSS3 transition
Creating a card-flipping effect
Time for action - flipping a card with CSS3
Toggling a class with jQuery's toggleClass function
Introducing CSS' perspective property
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
Cloning DOM elements with jQuery
Selecting the first child of an element in jQuery by 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
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
Accessing custom data attribute with jQuery
Making other playing card games
Embedding web fonts into our game
Time for action - embedding a font from the Google Fonts directory
Choosing different font delivery services
Summary
Chapter 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
Putting in fallback content when the web browser does not support the Canvas
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
Closing a path
Wrapping the circle drawing in a function
Time for action - putting the circle drawing code into a function
Dividing code into files
Generating random numbers in JavaScript
Saving the circle position
Time for action - saving the circle position
Defining a basic class definition in JavaScript
Drawing lines in the Canvas
Time for action - drawing straight lines between each circle
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
Detecting mouse events in circles in the Canvas
Game loop
Clearing the Canvas
Detecting line intersection in the Canvas
Time for action - distinguishing the intersected lines
Determining whether two line segments intersect
Adding touch support for tablets
Time for Action - adding the touch input support
Handling touches
Mouse move and Touch move
Summary
Chapter 5: Building a Canvas Game's Masterclass
Making the Untangle puzzle game
Time for action - making the Untangle puzzle game in Canvas
Defining the leveling data
Determining level-up
Displaying the current level and completeness progress
Drawing text in the Canvas
Time for action - displaying the progress level text inside the canvas element
Using embedded web font inside the Canvas
Time for action - embedding a Google web font into the canvas element
Drawing images in the Canvas
Time for action - adding graphics to the game
Using the drawImage function
Decorating the Canvas-based game
Time for action - adding CSS styles and image decoration to the game
Animating a sprite sheet in Canvas
Time for action - making a game guide animation
Creating a multi-layer Canvas game
Time for action - dividing the game into four layers
Mixing a CSS technique with Canvas drawing
Summary
Chapter 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
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
Building a mini piano musical game
Time for action - creating a basic background for the music game
Creating scenes in games
Creating a slide-in effect in CSS3
Visualizing the music playback
Time for action - creating the playback visualization in the music game
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
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
Adding additional features to the mini piano game
Adjusting the music volume according to the player
Time for action - removing missed melody notes
Removing dots from the game
Storing the success count in the last five results
Recording music notes as level data
Time for action - adding functionality to record the music level data
Adding touch support
Time for action - indicating a game over event in the console
Handling the audio event in playback complete events
Time for action - indicating a game over event in the console
Handling audio events
Summary
Chapter 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
Saving scores in the browser
Time for action - saving the game score
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
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
Saving the entire game progress
Time for action - saving all essential game data in the local storage
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
Caching the game for offline access
Time for action - adding the AppCache Manifest
The AppCache file
Summary
Chapter 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
Creating a WebSocket server to send connection count
Time for action - running a WebSocket server
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
Establishing a WebSocket connection
WebSocket client events
Sending a message to all connected browsers
Time for Action - send total count to all users
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
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
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
Sending the drawing to all the connected browsers
Time for action - sending the drawing through WebSockets
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
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
Improving the answer checking mechanism
Summary
Chapter 9: Building a Physics Car Game with Box2D and Canvas
Installing the Box2D JavaScript library
Time for action - installing the Box2D physics library
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
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
Creating a dynamic box in the physics world
Time for action - putting a dynamic box in the world
Advancing the world time
Time for action - setting up the world step loop
Adding wheels to the game
Time for action - putting two circles in the world
Creating a physical car
Time for action - connecting the box and two circles with a revolute joint
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
Applying force to a body
Clearing Force
Understanding the difference between ApplyForce and ApplyImpulse
Adding ramps to our game environment
Time for action - creating the world with ramps
Checking collisions in the Box2D world
Time for action - checking a collision between the car and the destination body
Getting the collision contact list
Restarting the game
Time for action - restarting the game while pressing the R key
Adding a level support to our car game
Time for action - loading the game with levels data
Replacing the Box2D outline drawing with graphics
Time for action - adding a flag graphic and a car graphic to the game
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
Adding a final touch to make the game fun to play
Time for action - decorating the game and adding a fuel limitation
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
Summary
Chapter 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
Building an HTML5 game into a Mac OS X app
Time for Action-putting the HTML5 games into a Mac app
Building an HTML5 game into a mobile app with the Web View
Building with PhoneGap build
App store's reviewing process
Summary
Appendix: Pop Quiz Answers
Index

Systemvoraussetzungen

Dateiformat: ePUB
Kopierschutz: Adobe-DRM (Digital Rights Management)

Systemvoraussetzungen:

Computer (Windows; MacOS X; Linux): Installieren Sie bereits vor dem Download die kostenlose Software Adobe Digital Editions (siehe E-Book Hilfe).
Tablet/Smartphone (Android; iOS): Installieren Sie bereits vor dem Download die kostenlose App Adobe Digital Editions oder die App PocketBook (siehe E-Book Hilfe).
E-Book-Reader: Bookeen, Kobo, Pocketbook, Sony, Tolino u.v.a.m. (nicht Kindle)

Das Dateiformat ePUB ist sehr gut für Romane und Sachbücher geeignet – also für „fließenden” Text ohne komplexes Layout. Bei E-Readern oder Smartphones passt sich der Zeilen- und Seitenumbruch automatisch den kleinen Displays an.
Mit Adobe-DRM wird hier ein „harter” Kopierschutz verwendet. Wenn die notwendigen Voraussetzungen nicht vorliegen, können Sie das E-Book leider nicht öffnen. Daher müssen Sie bereits vor dem Download Ihre Lese-Hardware vorbereiten.

Bitte beachten Sie: Wir empfehlen Ihnen unbedingt nach Installation der Lese-Software diese mit Ihrer persönlichen Adobe-ID zu autorisieren!

Weitere Informationen finden Sie in unserer E-Book Hilfe.

Dateiformat: PDF
Kopierschutz: Adobe-DRM (Digital Rights Management)

Systemvoraussetzungen:

Computer (Windows; MacOS X; Linux): Installieren Sie bereits vor dem Download die kostenlose Software Adobe Digital Editions (siehe E-Book Hilfe).
Tablet/Smartphone (Android; iOS): Installieren Sie bereits vor dem Download die kostenlose App Adobe Digital Editions oder die App PocketBook (siehe E-Book Hilfe).
E-Book-Reader: Bookeen, Kobo, Pocketbook, Sony, Tolino u.v.a.m. (nicht Kindle)

Das Dateiformat PDF zeigt auf jeder Hardware eine Buchseite stets identisch an. Daher ist eine PDF auch für ein komplexes Layout geeignet, wie es bei Lehr- und Fachbüchern verwendet wird (Bilder, Tabellen, Spalten, Fußnoten). Bei kleinen Displays von E-Readern oder Smartphones sind PDF leider eher nervig, weil zu viel Scrollen notwendig ist.
Mit Adobe-DRM wird hier ein „harter” Kopierschutz verwendet. Wenn die notwendigen Voraussetzungen nicht vorliegen, können Sie das E-Book leider nicht öffnen. Daher müssen Sie bereits vor dem Download Ihre Lese-Hardware vorbereiten.

Bitte beachten Sie: Wir empfehlen Ihnen unbedingt nach Installation der Lese-Software diese mit Ihrer persönlichen Adobe-ID zu autorisieren!

Weitere Informationen finden Sie in unserer E-Book Hilfe.

Als PDF speichern Als Link merken

HTML5 Game Development by Example: Beginner's Guide - Second Edition

Beschreibung

Key Features

Book Description

What you will learn

Who this book is for

Alle Preise

Weitere Details

Weitere Ausgaben

Inhalt

Systemvoraussetzungen