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

Beginner's Guide
 
 
Packt Publishing Limited
  • 1. Auflage
  • |
  • erschienen am 26. Juni 2015
  • |
  • 354 Seiten
 
E-Book | ePUB mit Adobe DRM | Systemvoraussetzungen
978-1-78528-788-6 (ISBN)
 
HTML5 is a markup language used to structure and present content for the World Wide Web and is a core technology of the Internet. It is supported across different platforms and is also supported by various browsers. Its innovative features, such as canvas, audio, and video elements, make it an excellent game building tool.HTML5 Game Development by Example Beginner's Guide Second Edition is a step-by-step tutorial that will help you create several games from scratch, with useful examples. Starting with an introduction to HTML5, the chapters of this book help you gain a better understanding of the various concepts and features of HTML5. By the end of the book, you'll have the knowledge, skills, and level of understanding you need to efficiently develop games over the network using HTML5.
  • Englisch
  • Birmingham
  • |
  • Großbritannien
  • Überarbeitete Ausgabe
978-1-78528-788-6 (9781785287886)
1785287885 (1785287885)
weitere Ausgaben werden ermittelt
Makzan focuses on the fields of web development and game design. He has over 14 years of experience in building digital products. He has worked on real-time multiplayer interaction games, iOS applications, and rich interactive websites.
He has written three books, on building a Flash virtual world, and creating games with HTML5 and the latest web standards and developed a video course as well. He currently teaches courses in Hong Kong and Macao SAR. He writes tutorials and shares his know-how on makzan.net.
  • 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

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 (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.

Weitere Informationen finden Sie in unserer E-Book Hilfe.


Download (sofort verfügbar)

37,41 €
inkl. 19% MwSt.
Download / Einzel-Lizenz
ePUB mit Adobe DRM
siehe Systemvoraussetzungen
E-Book bestellen

Unsere Web-Seiten verwenden Cookies. Mit der Nutzung dieser Web-Seiten erklären Sie sich damit einverstanden. Mehr Informationen finden Sie in unserem Datenschutzhinweis. Ok