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
$48.99
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.8 (5 Ratings)
Paperback Jun 2015 354 pages 1st Edition
eBook
$9.99 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Seng Hin Mak
Arrow right icon
$48.99
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.8 (5 Ratings)
Paperback Jun 2015 354 pages 1st Edition
eBook
$9.99 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$9.99 $39.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
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

Shipping Address

Billing Address

Shipping Methods
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
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

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 : 9781785287770
Category :
Game Development
Languages :
HTML
Concepts :
2D Game Development

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
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

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

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

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.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
$199.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
$279.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 $9.99
  • Paperback Paperback $48.99
$9.99 $39.99
$48.99
HTML5 Game Development Hotshot
HTML5 Game Development Hotshot
Read more
Jul 2014 366 pages
Full star icon 4 (6)
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $48.99
$9.99 $28.99
$48.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 $9.99
  • Paperback Paperback $54.99
$9.99 $32.99
$54.99
Stars icon
Total $ 152.97
HTML5 Game Development by Example(Second Edition)
$48.99
HTML5 Game Development Hotshot
$48.99
Learn HTML5 by Creating Fun Games
$54.99
Total $ 152.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 $9.99
  • Paperback Paperback $29.99
$9.99 $23.99
$29.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 $9.99
  • Paperback Paperback $49.99
$9.99 $39.99
$49.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 $9.99
  • Paperback Paperback $54.99
$9.99 $43.99
$54.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 $9.99
  • Paperback Paperback $76.99
$9.99 $61.99
$76.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 $9.99
  • Paperback Paperback $44.99
$9.99 $35.99
$44.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 $9.99
  • Paperback Paperback $49.99
$9.99 $39.99
$49.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 $9.99
  • Paperback Paperback $49.99
$9.99 $39.99
$49.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 $9.99
  • Paperback Paperback $44.99
$9.99 $35.99
$44.99
Artificial Intelligence in Unreal Engine 5
Artificial Intelligence in Unreal Engine 5
Read more
Oct 2024 358 pages
eBook
eBook
  • eBook eBook $9.99
  • Paperback Paperback $49.99
$9.99 $39.99
$49.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 $9.99
  • Paperback Paperback $39.99
$9.99 $31.99
$39.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 $9.99
  • Paperback Paperback $54.99
$9.99 $43.99
$54.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 $9.99
  • Paperback Paperback $44.99
$9.99 $35.99
$44.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 $9.99
  • Paperback Paperback $44.99
$9.99 $35.99
$44.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 $9.99
  • Paperback Paperback $44.99
$9.99 $35.99
$44.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 $9.99
  • Paperback Paperback $79.99
$9.99 $63.99
$79.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

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela