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
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Home > Game Development > 2D Game Development > HTML5 Game Development Hotshot
HTML5 Game Development Hotshot
HTML5 Game Development Hotshot

HTML5 Game Development Hotshot: Build interactive games with HTML, DOM, and the CreateJS Game library.

Arrow left icon
Profile Icon Seng Hin Mak Profile Icon Makzan Makzan (Mak Seng Hin)
Arrow right icon
$9.99 $28.99
Full star icon Full star icon Full star icon Full star icon Empty star icon 4 (6 Ratings)
eBook Jul 2014 366 pages 1st Edition
eBook
$9.99 $28.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Seng Hin Mak Profile Icon Makzan Makzan (Mak Seng Hin)
Arrow right icon
$9.99 $28.99
Full star icon Full star icon Full star icon Full star icon Empty star icon 4 (6 Ratings)
eBook Jul 2014 366 pages 1st Edition
eBook
$9.99 $28.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$9.99 $28.99
Paperback
$48.99
Subscription
Free Trial
Renews at $19.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 Hotshot

Chapter 2. Card Battle!

In this project, we are going to create a playing card game with the heavy use of CSS transition and animation. The player selects a card out of the three choices given to him/her and tries to beat the opponent's card until either side runs out of health points.

Mission briefing

This is a fighting game between a player and the computer, using battle cards.

Technically, the game contains four cards; three for the player to choose and one for the opponent. On each card, there is a random number representing the power. The battle begins by comparing the cards of both the player and the opponent. The difference between the power values acts as damage to the weaker side. The game is over when either side dies with no more health points left. You may visit http://makzan.net/html5-games/card-battle/ to play the example game in order to have better understanding on what we will build throughout this project.

The following is a screenshot showing the battle in the middle of the fight:

Mission briefing

Why is it awesome?

This game showcases how we can put CSS3 transition and animation together to create different effects, including sliding and 3D flipping. The animation-sequence script shows us how we can stack the animation one-by-one. After creating this game, we can use...

Creating the game scenes

In this task, we kick-start the project with game scenes such as the menu, game, and game-over condition, defined in a game-flow logic. We will also get these scenes linked together.

Prepare for lift off

We need to create a new directory for our new game project. Inside the project folder, we have the following:

  • An index.html file for the view
  • A game.css file for the styling
  • A directory named js for all the logic files
  • A directory named images for all the game graphics
  • Lastly, we need the following four images placed in the images folder:
    Prepare for lift off

Engage thrusters

First of all, we start at where the web browser begins loading our game, that is, the index.html file, and perform the steps given as follows:

  1. Put the following HTML code in the index.html file. Most of the tags and layout codes are similar to the ones we saw in Project 1, Building a CSS Quest Game:
    <!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title&gt...

Creating a 3D card-flipping effect

In this task, we will take a look at how to create a 3D card-flipping effect. This effect will be used in our playing card element.

Prepare for lift off

We will need to prepare card graphics for this task. They are front-face.png and back-face-pattern.png.

Engage thrusters

We will start by defining the game elements in HTML, as we have done in the previous section:

  1. Inside #game-scene, we create two card elements with front and back faces:
    <div id="game-scene" class="scene out">
  <div class="card a">
    <div class="front face"></div>
    <div class="back face"></div>
  </div>
  <div class="card b flipped">
    <div class="front face"></div>
    <div class="back face"></div>
  </div>
</div>
  2. The core part in this section is the CSS styling. In the game.css file, we append the following styling to the...

Selecting a card

To select a card, we will make use of the cards and their flipping effects to let the player select one card among the choices.

Prepare for lift off

The previous task focuses on defining the card style. In this task, we let the player choose one card in each round of battle. The following screenshot shows our planning. We show three cards as a deck at the bottom of the screen. When the player selects one card, we flip the selected card and put it at the center-right side of the screen. The other non-selected cards will hide at the bottom.

Prepare for lift off

Now, in the index.html file, we change the card elements inside game-scene into three cards for the player, as shown in the following code:

<div id="game-scene" class="scene out">
  <div class="card player a flipped out">
    <div class="front face"></div>
    <div class="back face"></div>
  </div>
  <div class="card player b flipped out&quot...

Adding a power value to the cards

In this task, we will add a power value to the cards. We will also create a Card object to get the original value back.

Prepare for lift off

Before going into the core part, we will get the interface prepared.

There is not much to add in HTML. Add the power element inside the front face element, as shown in the following code:

<div class="front face">
  <div class="power">100</div>
</div>

Also, add some very basic CSS styling to define the power text, which is large and aligned in the center, as shown in the following code:

.card .power{
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 30px;
  font-size: 2em;
}

Engage thrusters

The core part of this task is the JavaScript logic, explained as follows:

  1. First, we create a new module to randomize all the power values. Prepend the following code in the game-scene.js file. The benefit of separating this logic is to make changing the power formula easy in...

Creating the opponent's card

It is time to prepare for the battle. In this task, we will create the opponent's card.

Prepare for lift off

As usual, we will prepare the interface before adding logic to the game using the following steps:

  1. In the index.html file, append the following opponent's card object after our player's cards:
    <div class="card opponent out">
  <div class="front face">
    <div class="power">100</div>
  </div>
  <div class="back face">back</div>
</div>
  2. The opponent's card is going in from the left side of the game scene. We define the style of placement and also the out and in classes for the JavaScript to toggle:
    .card.opponent {
  bottom: 250px;
}
.card.opponent.out {
  left: -200px;
}
.card.opponent.in {
  transition-delay:.8s;
  left: 40px;
}

Engage thrusters

Let's follow these steps to create the opponent's card:

  1. During the setup inside the gameScene module...

Building the battle animation

This is a major task that defines the entire battle animation. After both the player's card and opponent's card are on stage, the player's card emits a flame blaze towards the opponent and then the opponent emits another blaze towards the player. The following screenshot shows the blaze being emitted from the player's card on right-hand side towards the opponent's card:

Building the battle animation

Prepare for lift off

First, we need two more game objects—the blaze towards the left and the blaze towards the right. Add them to the HTML before the end of the game-scene element, as shown in the following code:

<div class="blaze toward-left"></div>
<div class="blaze toward-right"></div>

We need the following two images for these two newly added game objects:

Prepare for lift off

Engage thrusters

Let's create the battle animation sequence with the following steps:

  1. Here, we prepare a CSS animation, keyframes, to shake the card. Add the following...

Adding health points to the game

In this task, we are going to add health points to both the player and the opponent. We reduce the health points during the battle if any side gets hurt.

Prepare for lift off

First, we define the user interface of the health points in HTML. Put the following code in the index.html file, right after opening the #game-scene tag. We also create a battle indicator:

<div class="hp-background">
  <div class="hp opponent"></div>
  <div class="hp player"></div>
</div>

Engage thrusters

We are now going to put all the health points code in a new file:

  1. Let's create a new file named hp.js under the js folder. Then, we include the newly created JavaScript file in HTML before importing our game-scene.js file:
    <script src='js/hp.js'></script>
  2. Next, as usual, the styling will be for our health points interface. We can append it to the end of the game.css file:
    .hp-background {
  border-bottom...

Restarting the game for the next round of battle

We now come to the last task—resetting the cards for the next round of battle. At this stage, the battle animation runs once and then the game stalls there. In this task, we reset all the card states so that the player can select another card and trigger another round of battle until either side is dead.

Engage thrusters

Let's continue the battle with the following steps:

  1. Inside the gameScene.restartGame method, we add the following code to toggle the out and flipped state for all the cards:
    /* reset the transition state */
allCardElms.forEach(function(elm){
  elm.classList.remove('in');
  elm.classList.add('out');
});
allPlayerCardElms.forEach(function(elm){
  elm.classList.remove('selected');
  elm.classList.add('flipped');
});
  2. Remember that we have commented out the restartGame method calling in the previous task. Now, we can enable this method calling by removing the comments. The battle...

Mission accomplished

Throughout the eight tasks, we successfully created a card battle game with lots of CSS transition and animation. The player has to keep fighting until he/she beats the opponent as shown in the following screenshot:

Mission accomplished

Mission briefing

This is a fighting game between a player and the computer, using battle cards.

Technically, the game contains four cards; three for the player to choose and one for the opponent. On each card, there is a random number representing the power. The battle begins by comparing the cards of both the player and the opponent. The difference between the power values acts as damage to the weaker side. The game is over when either side dies with no more health points left. You may visit http://makzan.net/html5-games/card-battle/ to play the example game in order to have better understanding on what we will build throughout this project.

The following is a screenshot showing the battle in the middle of the fight:

Why is it awesome?

This game showcases how we can put CSS3 transition and animation together to create different effects, including sliding and 3D flipping. The animation-sequence script shows us how we can stack the animation one-by-one. After creating this game, we can use a...

Left arrow icon

Page 1 of 12

Right arrow icon

Description

With a wide range of projects to build, this step-by-step guide will give you all the tools you need to create a variety of games. Whether you are familiar with the basics of object-oriented programming concepts, are new to HTML game development, or are familiar with just web design, this project-based book will get you up and running in no time. It will teach and inspire you to create great interactive content on the Web.

What you will learn

  • Create DOMbased HTML5 games
  • Use the CreateJS library to build a canvasbased game
  • Create different types of animations that are spritesheetbased, tweenbased, and Flash vectorbased
  • Modularize game components in JavaScript with object inheritance
  • Store and load persistent game progress in browsers
  • Convert coordinates between the screen and isometric perspective
  • Maintain a hierarchy for game elements to keep the extensibility of the game
  • Learn essential workflows and tools to create game assets easier

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jul 08, 2014
Length: 366 pages
Edition : 1st
Language : English
ISBN-13 : 9781849695473
Category :
Game Development
Languages :
HTML
Concepts :
2D Game Development
Tools :
CreateJS

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 : Jul 08, 2014
Length: 366 pages
Edition : 1st
Language : English
ISBN-13 : 9781849695473
Category :
Game Development
Languages :
HTML
Concepts :
2D Game Development
Tools :
CreateJS

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 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 $ 103.98
HTML5 Game Development Hotshot
$48.99
Learn HTML5 by Creating Fun Games
$54.99
Total $ 103.98 Stars icon
Banner background image

Table of Contents

9 Chapters
1. Building a CSS Quest Game Chevron down icon Chevron up icon
1. Building a CSS Quest Game
Mission briefing
Creating the HTML structure
Managing the game scene
Representing the quest composition
Placing the patterns on the deck
Selecting the pattern
Comparing the player and compositions of the quest
Showing different quests
Adding a countdown timer to the game
Mission accomplished
Hotshot challenges
2. Card Battle! Chevron down icon Chevron up icon
2. Card Battle!
Mission briefing
Creating the game scenes
Creating a 3D card-flipping effect
Selecting a card
Adding a power value to the cards
Creating the opponent's card
Building the battle animation
Adding health points to the game
Restarting the game for the next round of battle
Mission accomplished
Hotshot challenges
3. Space Runner Chevron down icon Chevron up icon
3. Space Runner
Mission briefing
Managing the scenes
Defining the floor and tiles in the game
Controlling the tiles creation in JavaScript
Using a game loop
Parallax background scrolling
Controlling a player with the keyboard
Determining a collision between the player and tiles
Spritesheet animation
Mission accomplished
Hotshot challenges
4. Multiply Defense Chevron down icon Chevron up icon
4. Multiply Defense
Mission briefing
Setting up the canvas and EaselJS
Defining the numbered box
The game loop and falling boxes
Inputs and equations
Removing the boxes
Ending the game
Restarting the game
Replacing the rectangle shape with bitmap graphics
Mission accomplished
A Hotshot challenge
5. Building an Isometric City Game Chevron down icon Chevron up icon
5. Building an Isometric City Game
Mission briefing
Designing the game's user interface
Placing the tiles and grid in the city layer
Choosing which building to build
Placing buildings on the floor
Advancing the construction progress over time
Generating coins and diamonds
Collecting pop-up diamonds
Saving and loading the game progress
Mission accomplished
Hotshot challenges
6. Space Defenders Chevron down icon Chevron up icon
6. Space Defenders
Mission briefing
Setting up the user interface
Placing the defense buildings
Summoning the enemies
Generating energy
Enemies attacking the buildings
Firing bullets and attacking the enemies
Controlling enemy waves
Loading the bitmap graphics into the game
Mission accomplished
Hotshot challenges
7. A Ball-shooting Machine with Physics Engine Chevron down icon Chevron up icon
7. A Ball-shooting Machine with Physics Engine
Mission briefing
Creating a simulated physics world
Shooting the ball
Handling collision detection
Defining levels
Adding a launch bar with power
Adding a cross obstacle
Visualizing the graphics
Choosing a level
Mission accomplished
Hotshot challenges
8. Creating a Sushi Shop Game with Device Scaling Chevron down icon Chevron up icon
8. Creating a Sushi Shop Game with Device Scaling
Mission briefing
Making the responsive layout
Decorating the game
Making the sushi
Creating a customer queue
Refilling sushi ingredients
Adding sound effects
Distributing the game
Making the game mobile friendly
Mission accomplished
A Hotshot challenge
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

Top Reviews
  • Top Reviews
  • Most Recent
Rating distribution
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
(6 Ratings)
5 star 33.3%
4 star 50%
3 star 0%
2 star 16.7%
1 star 0%
Filter icon Filter
Top Reviews
  • Top Reviews
  • Most Recent

Filter reviews by

NSlone Jul 29, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Do you have an overwhelming desire to learn how to program games? Let me guess, you have this great idea for a game but you have no idea where to start. You don’t even have to know C, C++, or even C#; or any other flavor of C, for that matter.Do you know HTML5? Great! Then let’s get started! First, run, do not walk, to the nearest book store, or even your own PC and buy this book! I’m serious. You can learn how to program games with this book. It has code, so you can save time and not have to type all of it in.I like how it uses the step by step method, meaning you start with chapter one, then progress to chapter two and each chapter builds on the previous chapter. This way you won’t get lost in the maze of trying to learn.The book is written in a straightforward and interesting manner, and is easy to follow. Look at Project 2, the Card Battle game. It even has 3D! All the games are interactive. Project 2: Card Battle! 47Mission briefing 47Creating the game scenes 49Creating a 3D card-flipping effect 55Selecting a card 60Adding a power value to the cards 64Creating the opponent's card 67Building the battle animation 69Adding health points to the game 74Restarting the game for the next round of battle 78Mission accomplished 80Hotshot challenges 80So, if you have a really great idea, or even one that you consider to be fantastic, go for it! You just might be the author of the next award winning author of a game for the web.
Amazon Verified review Amazon
VitoshAcademy Aug 16, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
<Disclaimer>At the beginning of August I have started to read the book HTML5 Games Development by Example, provided to me kindly by Packt Publishing.</Disclaimer>You do not need to be a pro developer to make use of the book - it presents step by step the development of the games with HTML. Each chapter is divided into several sub-chapters and the code for each sub-chapter is given. Thus, you may be able to go with the author, checking the code and seeing what he actually meant.To make the story fascinating, the games are really interesting (if you are a developer, not a gamer). Here is a list of the 8 games:1. A CSS Quest Game2. Card Battle3. Space Runner4. Multiply Defense5. Building an Isometric City6. Space Defenders7. Ball-shooting with Physics Engine (Basketball)8. Sushi ShopLet's go back to the book - what level of HTML do you need in advance? My opinion is that at least a basic level of HTML is needed, otherwise you will get into trouble. The book even touches object oriented programming (OOP), and although it describes it quite into detail, this is probably not a subject for a beginner. Anyway, if you are definitely into games and you are not a quitter you may go through the book successfully.A good plus is the structure - the author gives us a mission briefing, objectives and checklist for each of the games. Thus, separating the tasks into smaller details, you learn how to deal with a complex problem step-by-step. As mentioned earlier, the book provides the code for these steps separately - you do not obtain only the big project with 1000+ lines of code, where it is quite easy to lose yourself. This is an approach I like. At the end of each chapter, you can kindly give yourself a treat, by playing the game you have created. Trust me, there is nothing more challenging than playing a game, which you have built by yourself (copied code counts as well :) )Last but not least - there are a lot of things in game development, which can be used in the so-called "Real Projects". Making a status bar and dealing with OOP and variables is just the start.
Amazon Verified review Amazon
Marcelo MG Nov 15, 2014
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
Siempre he pensado que aprender mediante ejemplos es la mejor manera de dominar un tema. En este libro, haces un juego en cada capítulo. Eso te va llevando por un lado a usar JS, CSS y HTML5, los cuales es interesante conocerlos previamente, ya que aunque el nivel no es muy alto, este no es un libro de aprendizaje de los mismos. Pero además, en cada uno de ellos, vas aprendiendo los fundamentos de los juegos, desde crear un main loop hasta añadir sonido. En general el libro está bastante bien. Y como referencia, cuando uno se atasca en un punto del desarrollo, también es muy útil.Direct from Google Translator ->I always thought that learning by example is the best way to master a subject. In this book, you make a game in each chapter. That carries you on one side using JS, CSS and HTML5, which is interesting to know them beforehand, because although the level is not very high, this is not a book for learning them. Moreover, in each of them, you learn the basics of the game, from creating a main loop to add sound. Overall the book is pretty good. And for reference, when you are stuck at a point in development, it is also very useful.
Amazon Verified review Amazon
Ted Jenkins Aug 20, 2014
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
Disclaimer: I have been provided a desk copy of this book by Packt Publishing for review.HTML5 has quickly supplanted Flash as the platform of choice to develop rich user experiences on the Web, and this goes for games as well. HTML5 Game Development Hotshot aims to provide you with the knowledge to take advantage of the latest technologies available by taking you step-by-step through creating eight different games of increasing complexity.The author’s use of step-by-step hand-holding is especially thought out. I’m a person who learns by doing, so a step-by-step tutorial is just my style.The organization of each chapter is well thought out in my opinion—each game has a mission briefing (or introduction), a set of objectives and a checklist.Basic HTML knowledge is probably a prerequisite—you’ll need to know what HTML is, what basic HTML document structure looks like, what tags are, etc. There is also some javascript, but it is explained—even so, a knowledge of basic OO (object-oriented) programming concepts is assumed.I would recommend this book to getting up and running quickly on HTML5 features in the context of the features of games—animations, movement physics, latest tag features (like data-* attributes, etc), and so forth.
Amazon Verified review Amazon
Brian Sep 09, 2014
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
I'd really like to give it 3.5 stars because I feel like it really is in between being an "okay" book and a "really good" book. I ran into a few hiccups here and there when going through the example code, e.g. in the first project one of the code blocks didn't pass a hint/lint because it was missing a curly brace. While that is minor, I really feel like using JSHint or JSLint is easy enough that the example code should have been double checked.That said, it does cover some drastically different gaming concepts and I feel like it does accomplish them well enough. It's great for someone who is familiar with JavaScript and knows another language (PHP/Ruby/Python), and could really help them get into game development.
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 authors

Left arrow icon
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
Profile icon Makzan Makzan (Mak Seng Hin)
Makzan Makzan (Mak Seng Hin)
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 Makzan Makzan (Mak Seng Hin)
Right arrow icon
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.