Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Germany
Country selected
country flag France
Country selected
country flag Canada
Country selected
country flag Russia
Country selected
country flag Spain
Country selected
country flag Brazil
Country selected
country flag Australia
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag South Korea
Country selected
country flag Turkey
Country selected
country flag Switzerland
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Chile
Country selected
country flag Norway
Country selected
country flag Ecuador
Country selected
country flag Indonesia
Country selected
country flag New Zealand
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag Austria
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag South Africa
Country selected
country flag Malaysia
Country selected
country flag Japan
Country selected
country flag Slovakia
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
Home > Game Development > 2D Game Development > HTML5 Game Development by Example(Second Edition)
HTML5 Game Development by Example(Second Edition)
HTML5 Game Development by Example(Second Edition)

HTML5 Game Development by Example(Second Edition): Make the most of HTML5 techniques to create exciting games from scratch

Arrow left icon
Profile Icon Seng Hin Mak
Arrow right icon
€8.99 €29.99
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.8 (5 Ratings)
eBook Jun 2015 354 pages 1st Edition
eBook
€8.99 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m
Arrow left icon
Profile Icon Seng Hin Mak
Arrow right icon
€8.99 €29.99
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.8 (5 Ratings)
eBook Jun 2015 354 pages 1st Edition
eBook
€8.99 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m
eBook
€8.99 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

HTML5 Game Development by Example(Second Edition)

Chapter 2. Getting Started with DOM-based Game Development

We've got an idea about what we are going to learn in the whole book in Chapter 1, Introducing HTML5 Games. From this chapter onwards, we will go through a lot of learning-by-doing sections, and we will focus on one topic in each section. Before digging deeply into the cutting-edge CSS3 animations and HTML5 Canvas game, let's start with traditional DOM-based game development. We will warm up with some basic techniques in this chapter.

In this chapter, we will be:

  • Setting up our first game—Ping Pong
  • Learning basic positioning with the jQuery JavaScript library
  • Getting mouse inputs
  • Creating the Ping Pong game that displays the scores
  • Learning to separate data and view rendering logic

We will create a Ping Pong game that a player plays against the computer via mouse input. You can try the game at http://makzan.net/html5-games/pingpong/.

The following screenshot shows the look of the game at the end of this chapter...

Preparing the HTML documents for a DOM-based game

Every website, web page, and HTML5 game starts with a default HTML document. Moreover, the document starts with a basic HTML code. We will start our HTML5 game development journey with index.html.

Time for action – installing the jQuery library

We will create our HTML5 Ping Pong game from scratch. It may sound as if we are going to be preparing all the things ourselves. Luckily, we can use a JavaScript library to help us. jQuery is the JavaScript library that is designed to navigate the DOM elements easily, manipulate them, handle events, and create an asynchronous remote call. We will be using this library in the book to manipulate DOM elements. It will help us to simplify our JavaScript logic:

  1. Create a new folder named pingpong as our project directory.
  2. Inside the pingpong folder, we will create the following file structure, with three folders—js, css, and images—and an index.html file:
    index.html
js/
  js/pingpong.js
css/
  css/pingpong.css
images/
  3. Now, it's time to download the jQuery library. Go to http://jquery.com/.
  4. Select Download jQuery and click on Download the compressed, production jQuery 2.1.3.
  5. Save jquery-2.1.3.min.js within the js folder that...

Setting up the Ping Pong game elements

We have made the preparations, and now it's time to set up the Ping Pong game. The following graph shows how we place the game elements. The game element contains our playground and later the scoreboard. Inside the playground, we place two decorative elements, namely paddle hand, which acts as the handle of the soccer machine. Then, we have two paddle elements—one on the left and one on the right.

Setting up the Ping Pong game elements

Time for action – placing Ping Pong game elements in the DOM

  1. We will continue from our jQuery installation example, and open the index.html file in a text editor.
  2. Then, we will create the following playground and game objects with DIV nodes in the body. There are two paddles and one ball inside the playground, and the playground is placed inside the game:
    <div id="game">
  <div id="playground">
    <div class="paddle-hand right"></div>
    <div class="paddle-hand left"></div>
    <div id="paddleA" class="paddle"></div>
    <div id="paddleB" class="paddle"></div>
    <div id="ball"></div>
  </div>
</div>
  3. We now have the structure of the game object ready, and it is time to apply styles to them. We will add the following styles to the pingpong.css file:
    #game {
  position: relative;
  width: 400px;
  height: 200px...

Getting mouse input

You learned how to display game objects with CSS and jQuery in the previous sections. The next thing we need to create in the game is a way to get input from the players. We will discuss about the mouse input in this section.

Time for action – moving DOM objects by mouse input

We are going to create a traditional Ping Pong game. There is a paddle on both the left and right sides of the playground. A ball is placed in the middle of the playground. Players can control the right paddle and move it up and down by using the mouse. We will focus on the mouse input and leave the ball movement for a later section:

  1. Let's continue with our pingpong directory.
  2. Next, add a playground object inside the pingpong data object in the js/pingpong.js file. This stores variables that are related to playground:
    // data definition
var pingpong = {
  paddleA: {
    x: 50,
    y: 100,
    width: 20,
    height: 70
  },
  paddleB: {
    x: 320,
    y: 100,
    width: 20,
    height: 70
  },
  playground: {
    offsetTop: $("#playground").offset().top,
  }
};
  3. Then, create the following function that handles the mouse's enter, move, and leave events, and place it inside the js/pingpong.js file:
    function handleMouseInputs...

Time for action – Moving the ball with JavaScript Interval

We will use the function to create a timer. The timer moves the ball a little bit every 30 milliseconds. We are going to also change the direction of the ball movement once it hits the playground edge. Let's make the ball move now:

  1. We will use our last example, listening to multiple keyboard inputs, as the starting point.
  2. Open the js/pingpong.js file in the text editor.
  3. In the existing pingpong.playground object, we change to the following code that adds height and width to the playground.
    playground: {
  offsetTop: $("#playground").offset().top,
  height: parseInt($("#playground").height()),
  width: parseInt($("#playground").width()),
},
  4. We are now moving the ball, and we need to store the ball's status globally. We will put the ball-related variable inside the pingpong object:
    var pingpong = {
  //existing data
  ball: {
    speed: 5,
    x: 150,
    y: 100,
    directionX: 1,
    directionY...

Preparing the HTML documents for a DOM-based game

Every website, web page, and HTML5 game starts with a default HTML document. Moreover, the document starts with a basic HTML code. We will start our HTML5 game development journey with index.html.

Time for action – installing the jQuery library

We will create our HTML5 Ping Pong game from scratch. It may sound as if we are going to be preparing all the things ourselves. Luckily, we can use a JavaScript library to help us. jQuery is the JavaScript library that is designed to navigate the DOM elements easily, manipulate them, handle events, and create an asynchronous remote call. We will be using this library in the book to manipulate DOM elements. It will help us to simplify our JavaScript logic:

  1. Create a new folder named pingpong as our project directory.

  2. Inside the pingpong folder, we will create the following file structure, with three folders—js, css, and images—and an index.html file:

    index.html
js/
  js/pingpong.js
css/
  css/pingpong.css
images/

  3. Now, it's time to download the jQuery library. Go to http://jquery.com/.

  4. Select Download jQuery and click on Download the compressed, production jQuery 2.1.3.

  5. Save jquery-2.1.3.min.js within the js folder that we created in step 2.

  6. Open index...

Setting up the Ping Pong game elements

We have made the preparations, and now it's time to set up the Ping Pong game. The following graph shows how we place the game elements. The game element contains our playground and later the scoreboard. Inside the playground, we place two decorative elements, namely paddle hand, which acts as the handle of the soccer machine. Then, we have two paddle elements—one on the left and one on the right.

Time for action – placing Ping Pong game elements in the DOM

  1. We will continue from our jQuery installation example, and open the index.html file in a text editor.

  2. Then, we will create the following playground and game objects with DIV nodes in the body. There are two paddles and one ball inside the playground, and the playground is placed inside the game:

    <div id="game">
  <div id="playground">
    <div class="paddle-hand right"></div>
    <div class="paddle-hand left"></div>
    <div id="paddleA" class="paddle"></div>
    <div id="paddleB" class="paddle"></div>
    <div id="ball"></div>
  </div>
</div>

  3. We now have the structure of the game object ready, and it is time to apply styles to them. We will add the following styles to the pingpong.css file:

    #game {
  position: relative;
  width: 400px;
  height: 200px;
}
#playground{
  background: url(../images/playground.png);
  background-size: contain;
  width:...

Getting mouse input

You learned how to display game objects with CSS and jQuery in the previous sections. The next thing we need to create in the game is a way to get input from the players. We will discuss about the mouse input in this section.

Time for action – moving DOM objects by mouse input

We are going to create a traditional Ping Pong game. There is a paddle on both the left and right sides of the playground. A ball is placed in the middle of the playground. Players can control the right paddle and move it up and down by using the mouse. We will focus on the mouse input and leave the ball movement for a later section:

  1. Let's continue with our pingpong directory.

  2. Next, add a playground object inside the pingpong data object in the js/pingpong.js file. This stores variables that are related to playground:

    // data definition
var pingpong = {
  paddleA: {
    x: 50,
    y: 100,
    width: 20,
    height: 70
  },
  paddleB: {
    x: 320,
    y: 100,
    width: 20,
    height: 70
  },
  playground: {
    offsetTop: $("#playground").offset().top,
  }
};

  3. Then, create the following function that handles the mouse's enter, move, and leave events, and place it inside the js/pingpong.js file:

    function handleMouseInputs() {
  // run the game...

Time for action – Moving the ball with JavaScript Interval

We will use the function to create a timer. The timer moves the ball a little bit every 30 milliseconds. We are going to also change the direction of the ball movement once it hits the playground edge. Let's make the ball move now:

  1. We will use our last example, listening to multiple keyboard inputs, as the starting point.

  2. Open the js/pingpong.js file in the text editor.

  3. In the existing pingpong.playground object, we change to the following code that adds height and width to the playground.

    playground: {
  offsetTop: $("#playground").offset().top,
  height: parseInt($("#playground").height()),
  width: parseInt($("#playground").width()),
},

  4. We are now moving the ball, and we need to store the ball's status globally. We will put the ball-related variable inside the pingpong object:

    var pingpong = {
  //existing data
  ball: {
    speed: 5,
    x: 150,
    y: 100,
    directionX: 1,
    directionY: 1
  }
}

  5. We define a gameloop function and...

Left arrow icon

Page 1 of 15

Right arrow icon

Description

This book is for web designers who have a basic knowledge of HTML, CSS, and JavaScript and want to create Canvas or DOM-based games that run on browsers.

Who is this book for?

This book is for web designers who have a basic knowledge of HTML, CSS, and JavaScript and want to create Canvas or DOM-based games that run on browsers.

What you will learn

  • Build realtime network multiplayer games
  • Add physics to your canvas games by using the Box2D physics engine
  • Build a CSS3driven card game with transform and 3D flipping effects
  • Learn to add sounds to your games
  • Make a drawing tool in Canvas
  • Create multiple layers in a canvas game
  • Store game data persistently by using local storage
  • Use sprite sheets to create framebased animation

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jun 26, 2015
Length: 354 pages
Edition : 1st
Language : English
ISBN-13 : 9781785287886
Category :
Game Development
Languages :
HTML
Concepts :
2D Game Development

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Jun 26, 2015
Length: 354 pages
Edition : 1st
Language : English
ISBN-13 : 9781785287886
Category :
Game Development
Languages :
HTML
Concepts :
2D Game Development

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
START FREE TRIAL
BUY NOW
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW

Frequently bought together

HTML5 Game Development by Example(Second Edition)
HTML5 Game Development by Example(Second Edition)
Read more
Jun 2015 354 pages
Full star icon 3.8 (5)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €36.99
€8.99 €29.99
€36.99
HTML5 Game Development Hotshot
HTML5 Game Development Hotshot
Read more
Jul 2014 366 pages
Full star icon 4 (6)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €36.99
€8.99 €29.99
€36.99
Learn HTML5 by Creating Fun Games
Learn HTML5 by Creating Fun Games
Read more
Jun 2013 374 pages
Full star icon 5 (1)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €41.99
€8.99 €32.99
€41.99
Stars icon
Total € 115.97
HTML5 Game Development by Example(Second Edition)
€36.99
HTML5 Game Development Hotshot
€36.99
Learn HTML5 by Creating Fun Games
€41.99
Total € 115.97 Stars icon
Banner background image

Table of Contents

12 Chapters
1. Introducing HTML5 Games Chevron down icon Chevron up icon
1. Introducing HTML5 Games
Discovering new features in HTML5
Discovering new features in CSS3
The benefit of creating HTML5 games
What others are playing with HTML5
What we are going to create in this book
Preparing the development environment
Summary
2. Getting Started with DOM-based Game Development Chevron down icon Chevron up icon
2. Getting Started with DOM-based Game Development
Preparing the HTML documents for a DOM-based game
Time for action – installing the jQuery library
Setting up the Ping Pong game elements
Time for action – placing Ping Pong game elements in the DOM
Getting mouse input
Time for action – moving DOM objects by mouse input
Time for action – Moving the ball with JavaScript Interval
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
Showing text dynamically in HTML
Time for action – Showing the score of both players
Summary
3. Building a Card-matching Game in CSS3 Chevron down icon Chevron up icon
3. Building a Card-matching Game in CSS3
Moving game objects with CSS3 transition
Time for action – moving a playing card around
Creating a card-flipping effect
Time for action – flipping a card with CSS3
Creating a card-matching memory game
Time for action – preparing the card-matching game
Adding game logic to the matching game
Time for action – adding game logic to the matching game
Embedding web fonts into our game
Time for action – embedding a font from the Google Fonts directory
Summary
4. Building the Untangle Game with Canvas and the Drawing API Chevron down icon Chevron up icon
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
Time for action – putting the circle drawing code into a function
Time for action – saving the circle position
Drawing lines in the Canvas
Time for action – drawing straight lines between each circle
Using mouse events to interact with objects drawn in the Canvas
Time for action – dragging the circles in the Canvas
Detecting line intersection in the Canvas
Time for action – distinguishing the intersected lines
Adding touch support for tablets
Time for action – adding the touch input support
Summary
5. Building a Canvas Game's Masterclass Chevron down icon Chevron up icon
5. Building a Canvas Game's Masterclass
Making the Untangle puzzle game
Time for action – making the Untangle puzzle game in Canvas
Drawing text in the Canvas
Time for action – displaying the progress level text inside the canvas element
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
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 multilayer Canvas game
Time for action – dividing the game into four layers
Summary
6. Adding Sound Effects to Your Games Chevron down icon Chevron up icon
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
Building a mini piano musical game
Time for action – creating a basic background for the music game
Time for action – creating the playback visualization in the music game
Creating a keyboard-driven mini piano musical game
Time for action – creating a mini piano musical game
Adding additional features to the mini piano game
Time for action – removing missed melody notes
Time for action – adding functionalities 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
Summary
7. Saving the Game's Progress Chevron down icon Chevron up icon
7. Saving the Game's Progress
Storing data using HTML5 local storage
Time for action – creating a game over dialog with the elapsed played time
Time for action – saving the game score
Saving objects in the local storage
Time for action – saving the time alongside the score
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
Time for action – resuming a game from the local storage
Caching the game for offline access
Time for action – adding the AppCache Manifest
Summary
8. Building a Multiplayer Draw-and-Guess Game with WebSockets Chevron down icon Chevron up icon
8. Building a Multiplayer Draw-and-Guess Game with WebSockets
Installing a WebSocket server
Time for action – installing Node.js
Time for action – running a WebSocket server
Time for action – showing the connection count in a WebSocket application
Time for action – sending total count to all users
Building a chatting application with WebSockets
Time for action – sending a message to the server through WebSockets
Sending every received message on the server side to create a chat room
Time for action – sending messages to all connected browsers
Making a shared drawing whiteboard with Canvas and WebSockets
Time for action – making a local drawing whiteboard with the Canvas
Time for action – sending the drawing through WebSockets
Building a multiplayer draw-and-guess game
Time for action – building the draw-and-guess game
Summary
9. Building a Physics Car Game with Box2D and Canvas Chevron down icon Chevron up icon
9. Building a Physics Car Game with Box2D and Canvas
Installing the Box2D JavaScript library
Time for action – installing the Box2D physics library
Creating a static ground body in the physics world
Time for action – creating a ground in the world
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
Adding force to the car with a keyboard input
Time for action – adding force to the car
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
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
Adding a final touch to make the game fun to play
Time for action – decorating the game and adding a fuel limitation
Adding touch support for tablets
Time for action – adding touch support
Summary
10. Deploying HTML5 Games Chevron down icon Chevron up icon
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 the PhoneGap build
App store's reviewing process
Summary
A. Pop Quiz Answers Chevron down icon Chevron up icon
Chapter 2, Getting Started with DOM-based Game Development
Chapter 3, Building a Card-matching Game in CSS3
Chapter 4, Building the Untangle Game with Canvas and the Drawing API
Chapter 5, Building a Canvas Game's Masterclass
Chapter 6, Adding Sound Effects to Your Games
Chapter 7, Saving the Game's Progress
Index Chevron down icon Chevron up icon
Index

Recommendations for you

Left arrow icon
Coding Roblox Games Made Easy, Second Edition
Coding Roblox Games Made Easy, Second Edition
Read more
Jun 2022 302 pages
Full star icon 4.5 (30)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €22.99
€8.99 €17.99
€22.99
Beginning C++ Game Programming
Beginning C++ Game Programming
Read more
May 2024 648 pages
Full star icon 4.4 (25)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €37.99
€8.99 €29.99
€37.99
Procedural Content Generation with Unreal Engine 5
Procedural Content Generation with Unreal Engine 5
Read more
Nov 2024 488 pages
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €41.99
€8.99 €32.99
€41.99
Blueprints Visual Scripting for Unreal Engine 5
Blueprints Visual Scripting for Unreal Engine 5
Read more
May 2022 568 pages
Full star icon 4 (32)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €57.99
€8.99 €46.99
€57.99
Learning C# by Developing Games with Unity
Learning C# by Developing Games with Unity
Read more
Nov 2022 466 pages
Full star icon 4.4 (47)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €33.99
€8.99 €26.99
€33.99
Realizing 3D Animation in Blender
Realizing 3D Animation in Blender
Read more
Jul 2024 456 pages
Full star icon 5 (7)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €37.99
€8.99 €29.99
€37.99
Unreal Engine 5 Game Development with C++ Scripting
Unreal Engine 5 Game Development with C++ Scripting
Read more
Aug 2023 384 pages
Full star icon 4.3 (27)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €37.99
€8.99 €29.99
€37.99
Learning GDScript by Developing a Game with Godot 4
Learning GDScript by Developing a Game with Godot 4
Read more
May 2024 378 pages
Full star icon 4.9 (9)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €33.99
€8.99 €26.99
€33.99
Artificial Intelligence in Unreal Engine 5
Artificial Intelligence in Unreal Engine 5
Read more
Oct 2024 358 pages
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €37.99
€8.99 €29.99
€37.99
Game Development Patterns with Unreal Engine 5
Game Development Patterns with Unreal Engine 5
Read more
Jan 2024 254 pages
Full star icon 4.5 (17)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €29.99
€8.99 €23.99
€29.99
Right arrow icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.8
(5 Ratings)
5 star 20%
4 star 60%
3 star 0%
2 star 20%
1 star 0%
Ebey Philip May 12, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Great book - at times a little heavy
Amazon Verified review Amazon
Alan Morato Aug 27, 2015
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
I can recommend this book especially to developers that want to start learning about Games in HTML5 (beginners).The book allow the reader to dive into games development concepts. You need basic understanding of Web Technology to read it (HTML5, CSS3, Javascript) but the author doesn't assume the reader is a expert in these technologies.The author starts by giving new features provided by HTML5, thus allowing the user to have a better understanding of what's possible with this language.
Amazon Verified review Amazon
Anthony F. Aug 21, 2015
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
A fun and quick but to the point read. The book is filled with examples (as the title suggests) showing you how the code is written step-by-step. You'll get an overview of the development of a mini-game (-ynot et- a full-fledged game), and some nice JavaScript tips you can use in other projects.The most interesting aspect of the book is that it covers the "new" APIs of HTML5 (canvas, WebSockets, local storage), enabling you to fully harness the power of modern web browsers.Aimed at beginners, but intermediate developers will surely take something away too.I substracted a star because there are some code mistakes and not everything was fully optimised to my taste.
Amazon Verified review Amazon
dreamster Sep 08, 2015
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
HTML5 Game Development by Example is a great book for anyone who is into building games. With HTML5 one can develop games that run on computers, smartphones, and tablets and this book helps ones to achieve that.The book covers six example games with clear tutorials which is explained across 10 chapters; each chapter explaining one topic. It covers almost all aspects of game building including drawing game objects, animating them, adding audio, and publishing our games. In my honest opinion this book will help one to jump start to the game development world.
Amazon Verified review Amazon
L.C.H. Apr 14, 2016
Full star icon Full star icon Empty star icon Empty star icon Empty star icon 2
The author's methodology consist of giving you parts of the code first and then he tries to explain "What just happened", but to tell the true, the explanations were not so understandable for me. I didn't understand all that code that I was writing in most of the chapters. It is very frustrating to have thousands of lines of code and not having a clue what the heck is going on inside it.Also, there are parts of the book's code that are different from the downloadable (or bundled) code. For example, in the chapter 9, the dowloadable code is just one javascript file instead of the two that the author says you should create. An the worst thing is that the file seems very different from what the book is actually telling you to type.So to simplify things: This book is not for total beginners, you should have at least an intermediate level of Javascript, but even if you already have a little experience with it, you'll find some parts of the book's code that are not well written or complete.In fact, I'd like to mention that in the chapter 2, in the book's code, page 34, there is a faulty object property that makes your project (ping pong game) to fail. So if you are struggling in that chapter, make sure to check the downloadable code to avoid frustration. Believe me, it is very frustrating to re-read ALL the chapter again just to find out that you did everything as the book says, so the problem is not you, is the BOOK !!
Amazon Verified review Amazon

People who bought this also bought

Left arrow icon
Mathematics for Game Programming and Computer Graphics
Mathematics for Game Programming and Computer Graphics
Read more
Nov 2022 444 pages
Full star icon 4.9 (12)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €41.99
€8.99 €32.99
€41.99
Learning C# by Developing Games with Unity
Learning C# by Developing Games with Unity
Read more
Nov 2022 466 pages
Full star icon 4.4 (47)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €33.99
€8.99 €26.99
€33.99
Hands-On Unity 2022 Game Development
Hands-On Unity 2022 Game Development
Read more
Oct 2022 712 pages
Full star icon 4.7 (22)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €33.99
€8.99 €26.99
€33.99
Godot 4 Game Development Projects
Godot 4 Game Development Projects
Read more
Aug 2023 264 pages
Full star icon 4 (24)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €33.99
€8.99 €26.99
€33.99
Taking Blender to the Next Level
Taking Blender to the Next Level
Read more
May 2022 520 pages
Full star icon 4.6 (5)
eBook
eBook
  • eBook eBook €8.99
  • Paperback Paperback €59.99
€8.99 €47.99
€59.99
Right arrow icon

About the author

Profile icon Seng Hin Mak
Seng Hin Mak
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.
Read more
See other products by Seng Hin Mak
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.