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
Free Trial
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
NZ$14.99 NZ$57.99
Paperback
NZ$71.99
Subscription
Free Trial
Arrow left icon
Profile Icon Seng Hin Mak
Arrow right icon
Free Trial
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
NZ$14.99 NZ$57.99
Paperback
NZ$71.99
Subscription
Free Trial
eBook
NZ$14.99 NZ$57.99
Paperback
NZ$71.99
Subscription
Free Trial

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
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 : 9781785287770
Category :
Game Development
Languages :
HTML
Concepts :
2D Game Development

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

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 NZ$7 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 NZ$7 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 NZ$14.99
  • Paperback Paperback NZ$71.99
NZ$14.99 NZ$57.99
NZ$71.99
HTML5 Game Development Hotshot
HTML5 Game Development Hotshot
Read more
Jul 2014 366 pages
Full star icon 4 (6)
eBook
eBook
  • eBook eBook NZ$14.99
  • Paperback Paperback NZ$71.99
NZ$14.99 NZ$57.99
NZ$71.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 NZ$14.99
  • Paperback Paperback NZ$80.99
NZ$14.99 NZ$64.99
NZ$80.99
Stars icon
Total NZ$ 224.97
HTML5 Game Development by Example(Second Edition)
NZ$71.99
HTML5 Game Development Hotshot
NZ$71.99
Learn HTML5 by Creating Fun Games
NZ$80.99
Total NZ$ 224.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 NZ$14.99
  • Paperback Paperback NZ$43.99
NZ$14.99 NZ$35.99
NZ$43.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 NZ$14.99
  • Paperback Paperback NZ$73.99
NZ$14.99 NZ$58.99
NZ$73.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 NZ$14.99
  • Paperback Paperback NZ$80.99
NZ$14.99 NZ$64.99
NZ$80.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 NZ$14.99
  • Paperback Paperback NZ$112.99
NZ$14.99 NZ$89.99
NZ$112.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 NZ$14.99
  • Paperback Paperback NZ$65.99
NZ$14.99 NZ$52.99
NZ$65.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 NZ$14.99
  • Paperback Paperback NZ$73.99
NZ$14.99 NZ$58.99
NZ$73.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 NZ$14.99
  • Paperback Paperback NZ$73.99
NZ$14.99 NZ$58.99
NZ$73.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 NZ$14.99
  • Paperback Paperback NZ$65.99
NZ$14.99 NZ$52.99
NZ$65.99
Artificial Intelligence in Unreal Engine 5
Artificial Intelligence in Unreal Engine 5
Read more
Oct 2024 358 pages
eBook
eBook
  • eBook eBook NZ$14.99
  • Paperback Paperback NZ$73.99
NZ$14.99 NZ$58.99
NZ$73.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 NZ$14.99
  • Paperback Paperback NZ$58.99
NZ$14.99 NZ$46.99
NZ$58.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 NZ$14.99
  • Paperback Paperback NZ$80.99
NZ$14.99 NZ$64.99
NZ$80.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 NZ$14.99
  • Paperback Paperback NZ$65.99
NZ$14.99 NZ$52.99
NZ$65.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 NZ$14.99
  • Paperback Paperback NZ$65.99
NZ$14.99 NZ$52.99
NZ$65.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 NZ$14.99
  • Paperback Paperback NZ$65.99
NZ$14.99 NZ$52.99
NZ$65.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 NZ$14.99
  • Paperback Paperback NZ$116.99
NZ$14.99 NZ$93.99
NZ$116.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 included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.