0% found this document useful (0 votes)
12 views

Cross Over to HTML5 Game Development: Use Your Programming Experience to Create Mobile Games 1st Edition Zarrar Chishti (Auth.) 2024 Scribd Download

Experience

Uploaded by

aiymdiensi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
12 views

Cross Over to HTML5 Game Development: Use Your Programming Experience to Create Mobile Games 1st Edition Zarrar Chishti (Auth.) 2024 Scribd Download

Experience

Uploaded by

aiymdiensi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

Experience Seamless Full Ebook Downloads for Every Genre at textbookfull.

com

Cross Over to HTML5 Game Development: Use Your


Programming Experience to Create Mobile Games 1st
Edition Zarrar Chishti (Auth.)

https://textbookfull.com/product/cross-over-to-html5-game-
development-use-your-programming-experience-to-create-
mobile-games-1st-edition-zarrar-chishti-auth/

OR CLICK BUTTON

DOWNLOAD NOW

Explore and download more ebook at https://textbookfull.com


Recommended digital products (PDF, EPUB, MOBI) that
you can download immediately if you are interested.

Pro HTML5 Games. Learn to build your own Games using HTML5
and JavaScript Aditya Ravi Shankar

https://textbookfull.com/product/pro-html5-games-learn-to-build-your-
own-games-using-html5-and-javascript-aditya-ravi-shankar/

textboxfull.com

Create Computer Games Design and Build Your Own Game


Patrick Mccabe

https://textbookfull.com/product/create-computer-games-design-and-
build-your-own-game-patrick-mccabe/

textboxfull.com

Unity 2017 Game AI Programming Leverage the power of


Artificial Intelligence to program smart entities for your
games Raymundo Barrera
https://textbookfull.com/product/unity-2017-game-ai-programming-
leverage-the-power-of-artificial-intelligence-to-program-smart-
entities-for-your-games-raymundo-barrera/
textboxfull.com

Uncopyable How to Create an Unfair Advantage Over Your


Competition 2nd Edition Steve Miller

https://textbookfull.com/product/uncopyable-how-to-create-an-unfair-
advantage-over-your-competition-2nd-edition-steve-miller/

textboxfull.com
Mastering LibGDX Game Development Leverage the power of
LibGDX to create a fully functional customizable RPG game
for your own commercial title 1st Edition Hoey Patrick
https://textbookfull.com/product/mastering-libgdx-game-development-
leverage-the-power-of-libgdx-to-create-a-fully-functional-
customizable-rpg-game-for-your-own-commercial-title-1st-edition-hoey-
patrick/
textboxfull.com

Work on Your Game: Use the Pro Athlete Mindset to Dominate


Your Game in Business, Sports, and Life Dre Baldwin

https://textbookfull.com/product/work-on-your-game-use-the-pro-
athlete-mindset-to-dominate-your-game-in-business-sports-and-life-dre-
baldwin/
textboxfull.com

Game Programming in C Creating 3D Games Creating 3D Games


Sanjay Madhav

https://textbookfull.com/product/game-programming-in-c-
creating-3d-games-creating-3d-games-sanjay-madhav/

textboxfull.com

Nlp Made Easy How to Use Neuro Linguistic Programming to


Change Your Life Ali Campbell

https://textbookfull.com/product/nlp-made-easy-how-to-use-neuro-
linguistic-programming-to-change-your-life-ali-campbell/

textboxfull.com

Uncopyable How to Create an Unfair Advantage Over Your


Competition Updated and Expanded Edition Steve Miller

https://textbookfull.com/product/uncopyable-how-to-create-an-unfair-
advantage-over-your-competition-updated-and-expanded-edition-steve-
miller/
textboxfull.com
Cross Over to
HTML5 Game
Development
Use Your Programming Experience to
Create Mobile Games

Zarrar Chishti
Cross Over to HTML5
Game Development
Use Your Programming
Experience to Create
Mobile Games

Zarrar Chishti
Cross Over to HTML5 Game Development: Use Your Programming
Experience to Create Mobile Games
Zarrar Chishti
Glasgow, United Kingdom

ISBN-13 (pbk): 978-1-4842-3290-3 ISBN-13 (electronic): 978-1-4842-3291-0


https://doi.org/10.1007/978-1-4842-3291-0

Library of Congress Control Number: 2017961309


Copyright © 2017 by Zarrar Chishti
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of
the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations,
recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or
information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar
methodology now known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol
with every occurrence of a trademarked name, logo, or image we use the names, logos, and images
only in an editorial fashion and to the benefit of the trademark owner, with no intention of
infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they
are not identified as such, is not to be taken as an expression of opinion as to whether or not they are
subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of
publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for
any errors or omissions that may be made. The publisher makes no warranty, express or implied, with
respect to the material contained herein.
Cover image designed by Freepik
Managing Director: Welmoed Spahr
Editorial Director: Todd Green
Acquisitions Editor: Aaron Black
Development Editor: James Markham
Technical Reviewer: Massimo Nardone
Coordinating Editor: Jessica Vakili
Copy Editor: Kim Burton-Weisman
Compositor: SPi Global
Indexer: SPi Global
Artist: SPi Global
Distributed to the book trade worldwide by Springer Science+Business Media New York,
233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail
[email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC
and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc).
SSBM Finance Inc is a Delaware corporation.
For information on translations, please e-mail [email protected], or visit
http://www.apress.com/rights-permissions.
Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions
and licenses are also available for most titles. For more information, reference our Print and eBook
Bulk Sales web page at http://www.apress.com/bulk-sales.
Any source code or other supplementary material referenced by the author in this book is available to
readers on GitHub via the book's product page, located at www.apress.com/978-1-4842-3290-3. For
more detailed information, please visit http://www.apress.com/source-code.
Printed on acid-free paper
Table of Contents
About the Author��������������������������������������������������������������������������������vii
About the Technical Reviewer�������������������������������������������������������������ix
Acknowledgments�������������������������������������������������������������������������������xi
Preface����������������������������������������������������������������������������������������������xiii

Chapter 1: Introduction������������������������������������������������������������������������1
Introducing Our Game: Space Zombies������������������������������������������������������1
Setting up Your Work Environment�������������������������������������������������������������4
Part 1: Setting up Our Folders������������������������������������������������������������������������������������� 4
Part 2: Setting up Our Files������������������������������������������������������������������������������������������ 6

Hosting and Media Files���������������������������������������������������������������������������10


Part 1: Your Computer vs. Hosting Servers ��������������������������������������������������������������� 10
Part 2: Download the Media for Your Project������������������������������������������������������������� 11

Chapter 2: In the Beginning, There Was HTML������������������������������������15


Hello World�����������������������������������������������������������������������������������������������15
Background Image�����������������������������������������������������������������������������������18
Adding the Rest of the Images�����������������������������������������������������������������20

Chapter 3: Time to Apply a Little CSS�������������������������������������������������23


Start with a Quick Test�����������������������������������������������������������������������������24
Our Background Image����������������������������������������������������������������������������28
Our Other Images�������������������������������������������������������������������������������������32

iii
Table of Contents

Chapter 4: Apply Intelligence with JavaScript�����������������������������������37


Why Do We Need to Resize?���������������������������������������������������������������������37
How Do We Universally Resize?���������������������������������������������������������������38
Let’s Resize Our Images���������������������������������������������������������������������������46

Chapter 5: Take a Shot: Part 1������������������������������������������������������������51


Changing Our Cursor and Registering a Click������������������������������������������51
Making Our Gun Act More Realistic����������������������������������������������������������55
Animating the Gun with Sprite Sheets�����������������������������������������������������60
Part 1������������������������������������������������������������������������������������������������������������������������� 60
Part 2������������������������������������������������������������������������������������������������������������������������� 63
Part 3������������������������������������������������������������������������������������������������������������������������� 64
Part 4������������������������������������������������������������������������������������������������������������������������� 68

Reloading Our Gun�����������������������������������������������������������������������������������71


Firing Our Gun������������������������������������������������������������������������������������������78
One Last Thing…�������������������������������������������������������������������������������������81

Chapter 6: Where Are the Zombies?���������������������������������������������������85


Creating a Zombie: Part 1�������������������������������������������������������������������������85
Creating a Zombie: Part 2�������������������������������������������������������������������������86
Moving the Zombie Closer������������������������������������������������������������������������95
Creating All the Zombies��������������������������������������������������������������������������99
Generating a Zombie Life Cycle��������������������������������������������������������������102

Chapter 7: Take a Shot: Part 2����������������������������������������������������������107


Hitting a Zombie�������������������������������������������������������������������������������������107
Making the Hits Count����������������������������������������������������������������������������113

iv
Table of Contents

Zombie Down!����������������������������������������������������������������������������������������119
Part 1: Create Six Bubble Zombie Elements������������������������������������������������������������ 120
Part 2: Activate the Counter Bubble Zombie������������������������������������������������������������ 129
Part 3: Animate the Bubble Zombies����������������������������������������������������������������������� 136

Reloading the Gun����������������������������������������������������������������������������������146


Clean up the Depths and Click Zones�����������������������������������������������������157
Part 1: Ensuring Gun Fire����������������������������������������������������������������������������������������� 157
Part 2: Zombie Depth Levels������������������������������������������������������������������������������������ 163

Intro Splash and “Game Over” Screens�������������������������������������������������171


Part 1: Images Folder���������������������������������������������������������������������������������������������� 171
Part 2: Stopping and Starting���������������������������������������������������������������������������������� 172

Chapter 8: Add Some Bling to Our Game������������������������������������������191


What’s the Score?����������������������������������������������������������������������������������192
Sprinkle of Special Effects���������������������������������������������������������������������203
Part 1: Get Started��������������������������������������������������������������������������������������������������� 204
Part 2: Displaying the Effects���������������������������������������������������������������������������������� 204

Turn up the Sound Effects����������������������������������������������������������������������219


Part 1: Getting Started��������������������������������������������������������������������������������������������� 220
Part 2: Adding Sound Effects����������������������������������������������������������������������������������� 220

Embedding the Game�����������������������������������������������������������������������������225


Part 1: Getting Started��������������������������������������������������������������������������������������������� 225
Part 2: Modify the default.html File������������������������������������������������������������������������� 226

Game Over. Restart?�������������������������������������������������������������������������������244

Index�������������������������������������������������������������������������������������������������247

v
About the Author
Zarrar Chishti is a software and games
development consultant with over 500 games
developed for companies around the world. He
is sought after to advise on the development
of viral games for major marketing campaigns.
His consultancy and development firm include
prestigious companies such as Turner Media,
British Airways and Channel 4 among the
many clients that keep coming back when a
new product or service is being launched.
After graduating from Glasgow University
in 1996 with a prestigious joint honors degree in Software Engineering,
Zarrar contracted as a software developer in both London and L.A. for 5
years. In 2001 he opened his own software firm in Glasgow and within 2
years was employing 10 staff. This was to grow to 30 in 2005 when he began
to offer games development to his clients.
One of the most notable game projects Zarrar has produced includes
an interactive comic for the popular Ben 10 TV series. The project was a
notable success that took his firm 10 months to deliver. It was rolled out
in over 25 countries in localized language editions. Other projects include
building a series of games for the ever popular Big Brother TV franchise
and an employee training game for Legal and General.

vii
About the Technical Reviewer
Massimo Nardone has more than 22 years
of experiences in security, web/mobile
development, and cloud and IT architecture.
His true IT passions are security and Android.
He has programmed and taught how to
program with Android, Perl, PHP, Java, VB,
Python, C/C++ and MySQL for more than 20
years.
He holds a master’s degree in computing
science from the University of Salerno, Italy.
He has worked as a project manager, software engineer, research
engineer, chief security architect, information security manager, PCI/SCADA
auditor and senior lead IT security/cloud/SCADA architect for many years.
His technical skills include security, Android, cloud, Java, MySQL,
Drupal, Cobol, Perl, web and mobile development, MongoDB, D3, Joomla,
Couchbase, C/C++, WebGL, Python, Pro Rails, Django CMS, Jekyll,
Scratch, and more.
He currently works as chief information security office (CISO) for
Cargotec Oyj.
He worked as visiting lecturer and supervisor for exercises at the
Networking Laboratory of the Helsinki University of Technology (Aalto
University). He holds four international patents (PKI, SIP, SAML, and Proxy
areas).
Massimo has reviewed more than 40 IT books for various publishing
companies. He is the coauthor of Pro Android Games (Apress, 2015).

ix
Acknowledgments
To Pops - you were an amazing dad who has left a massive hole in our lives.
To my closest friend, who has been (and continues to be) there for me
at the times when it matters the most: my brother Ibrar. Thank you to my
parents, who gave me the most amazing education and start to life. My one
constant and partner in crime, my wife Sadia. My son, whom I am so proud
of (incidentally, he was my initial editor for the book) and my “janno-jaan”
daughters: Sara, Aisha, and Rushda. I would be in a tremendous amount
of trouble if I did not also acknowledge Bella, our Bengal cat.
I would like to say a heartfelt thank you to my agent, Carole. You agreed
to represent me, despite my thick Scottish accent! Your guidance and
patience at the start will always be remembered and appreciated. Also,
thank you to the awesome and gorgeous team at Apress: Aaron and Jessica.
I had a great time working with you both and you made this “noob” feel
like part of the team.
I want to thank two people who have inspired me to write books. My
Latin teacher Mr. Temperely and my favorite author of all time, David Blixt.
I would also like send my love and appreciation to all my staff, both past
and present: Alasdair, George, Paul (the Great), Les, and Claire. Also, my
thanks to those clients that gave me my initial start despite having little or
no experience.
Finally, I would like to thank the nurses and doctors at Monklands
Haematology department who looked after my wife, Sadia. I will always
remember your commitment, passion, and support that you gave to her.
Thank you for sending her home to us.

xi
Preface
Welcome to the wonderful world of HTML5 game development. Are you
looking for a new challenge or looking to expand your current skill set?
Then get ready to start your journey. This book has been written with a
simple goal in mind: to provide the means for anyone to develop their first
HTML5 game.
This is a great time to break into the most lucrative game development
platform in the world. The global demand for the HTML5 game
development platform has expanded so quickly that it is currently crying
out for seasoned developers from more traditional environments to
cross over. Never before has there been such a widely accepted platform
by literally every manufacturer and operating system. This, in turn,
has convinced marketing departments to move away from traditional
platforms, such as dedicated mobile apps, for the more widely accepted
HTML5 format.
In short, there has never been a better time for a seasoned IT
programmer to cross over and capitalize in this lucrative market with their
much sought-after talents and experience.
I have spent the last five years training developers from a wide range
of programming disciplines to cross-train in HTML5 game development.
Whatever your vocation, whether it be an application databases systems
developer or a professional web developer, with this book you will learn to
evolve your current coding skills to enable you to become eligible for the
biggest gaming platform in the world.
From the first chapter, you immediately see encouraging results as
you power through a challenging and fun project that has been uniquely
designed and developed for this book.

xiii
Preface

Why This Book


This book was written with a simple goal in mind: to help seasoned
programmers from other disciplines to cross over to HTML5 game
development.
No apps need to be purchased. No special hardware or software is
required. As long as you have a simple computer with Internet access, you
can start today.
How quickly you build this game is entirely up to you. For each major
step we come across, you can decide to either study the technical aspects
or skip ahead to the next step. Either way, by the end of this book, you will
have a playable game to show off to friends and family.
This book is perfect for anyone that just wants to roll up their sleeves
and start developing a game for themselves. I believe that by the end of
this book, you will be in a far better position to make a decision on whether
you want to invest your time and money in becoming a qualified games
developer.

What You Will Need


Any computer will do.

• You do not need a super-fast computer

• You do not need an expensive IDE installed

• You do not need the latest graphics card

You can build this game using the computer/laptop that you already
have—as long as it switches on and you can run the already installed
Notepad program (if you are using Windows) or TextEdit (if you are on an
Apple Mac).

xiv
Preface

What about your phone or tablet? Technically, it is possible; however, it


is not ideal because the operating environment is not suited to coding (i.e.,
typing). If you do wish to use these devices, then you may wish to invest in
a Bluetooth keyboard and an external memory card.

How to Use This Book


During this project, I have spent a great deal of my time minimizing the
amount of code that you need to write. However, I had to balance this
with making code that was still readable, which means that in occasional
instances of this book, you will find some lengthy portions of code to write.
I do apologize for this; however, keep in mind that you will be able to reuse
the code in your next project.
The following icons appear in the book.

In this section, you will see the actual code that will need to be written. It is
important to ensure that you copy the code exactly as it is written.
On most occasions, you will only need to write the lines that are
written in bold. Also, the lines of code that existed before but have just
been modified are in red.

xv
Preface

In this section, you will see interesting facts and explanations of the code
that has just been written. If you wish to build on your coding knowledge
as you proceed, then you will find a great source of information here.
However, feel free to ignore this section if you just want to get on with
building your game.

Did something go wrong? Did the code you just wrote not work? Not to
worry. You will find common (and some not so common) mistakes here
with solutions on how to fix them.

xvi
CHAPTER 1

Introduction
“If you have a garden and a library,
you have everything you need.”
Marcus Tullius Cicero
(106 BC – 43 BC)

var replaceWord1 = str.replace("garden", "computer");

var replaceWord2 = str.replace("a library", "time");

I have been developing software since 1996 and I have developed games
for small and large companies for over a decade now. Like any form of
development in the real world, you need to know why you are building
the game before you think of coding strategies and build processes. In the
gaming world, this comes in the form of the game’s story. This includes the
background, reasons to play, and the goals of the game.

Introducing Our Game: Space Zombies


So here is our story, which we will develop into a game.
Hi. My name is Ace Star. The year is 2107. For the last three
months, I have been stationed as a security guard on the only moon
of planet ZC636, which is in the Andromeda Galaxy. In addition to
me and a group of dignitaries from Earth, there is a group of about
500 top scientists stationed here to work on secret experiments.
1
© Zarrar Chishti 2017
Z. Chishti, Cross Over to HTML5 Game Development,
https://doi.org/10.1007/978-1-4842-3291-0_1
Chapter 1 Introduction

I need your help.


Last night, there was an explosion in one of the labs. A gas was released
that turned all the scientists in the lab into zombies.
I have positioned myself outside the only doors of the colony’s main
building. The other survivors are safely inside. I am the last line of defense
before help arrives from Earth.
I discovered that our weapons are useless against the zombies. While
running out of the labs, however, I found a new, experimental weapon.
It seems to do the trick.
I can hear them coming. Are you ready?

Let’s have a look at a few of the graphics that we will use for the
development.

This is the background image for our game.


It will fill the screen by stretching out both
horizontally and vertically.
Our zombies will spawn from where the ground
meets the sky. Once spawned, they will come
toward us, growing bigger.
Say hello to Professor Z, our average zombie. In
terms of speed, he is not very fast and he does
not suddenly sprint to the front. He simply heads
toward you at his own leisurely speed! In terms of
our weapon shots, he will not be too hard or too
easy to “neutralize.” It takes two zaps to get him.
Say ciao to Belladonna, our fastest zombie.
Keep an eye on her because she will appear one
minute and then suddenly sprint to the front.
She will not be too hard to neutralize, however.
One zap will get her.

2
Chapter 1 Introduction

Finally, this is Brad, our heavyweight zombie.


Unfortunately, due to all of those hours lifting
weights, he is slower than the average zombie.
He takes his time to gain speed once he spawns.
He will be harder to neutralize, however. It takes
three zaps to get him.
This is the experimental weapon that our hero
found in one of the labs. When fired, it zaps
out a special liquid, which when successfully
administered, encases the zombie in an air
bubble.
It will need to be reloaded often.
This is our Reload button. From a game-design
point of view, it adds another dimension to the
gameplay.
This is our game’s logo. We will not see it until
the last chapter of the book, when we embed our
game.
This is the box that we will embed into our
game. Initially, you see the game span the
entire screen. Near the end, however, we look at
embedding the code into this box.
This is the background image that we use in the
final chapter. The background is the main image
used when we build a dedicated web page to
embed our game into.

3
Chapter 1 Introduction

The following is a screenshot of the finished game.

Setting up Your Work Environment


This section discusses how to set up your work environment.

Part 1: Setting up Our Folders


You need to create a work folder where all of your work files can be stored.
This makes it easier to distinguish your work files from all the others on
your computer. So first, create a root (or master) folder called My_Work_
Files in the C drive.

4
Chapter 1 Introduction

Once you have your root folder, the next step is to create the subfolders
that you will need for the game. Create four folders inside My_Work_Files.
Name the folders as follows:

• CSS

• Images

• Raw Images

• js

Your folder should look like the following screenshot.

The CSS folder will hold special code files that help structure the design of
the game. All the files in this folder will end in .css.
The js folder will hold all of our JavaScript files, which will form the
engine for our game. They will contain commands and instructions that will
control what happens in our game. All the files in this folder will end in .js.

5
Chapter 1 Introduction

The Images folder, as the name suggests, will contain all the image or
media files that we will need for the game.
The Raw Images folder will not technically be used for raw images. In
our case, we will use this folder as special temporary housing for all of our
media. We will move them into the Images folder when we need them.

Part 2: Setting up Our Files


For the purposes of this book, I will use Notepad (if you are using an Apple
computer, then I would use TextEdit). I find Notepad simpler and easier
to use; however, almost any IDE (Integrated Development Environment)
can be used for this project. So go ahead and use the IDE that you are most
comfortable with.
If you do want to use an IDE, here is a list of a few that are free to use:

• Eclipse. This is an open source editor that is typically


used for C and C++ (as well as other high-level
languages) projects.

• NetBeans. Like Eclipse, this is an open source


editor; however, it comes bundled with a plethora of
development frameworks.

• Aptana. A very popular IDE among web developers, it can


be plugged into Eclipse. Typically used for HTML projects.

• CodeRun. This is a slightly unusual choice in that


it runs on a browser (i.e., it is a web-based IDE).
Personally, I find it excellent for last-minute fixes when
at a remote location.

• Visual Studio Community. This is free for individual


programmers and comes packed with all the amazing
features that you will find in Visual Studio Professional
series.
6
Chapter 1 Introduction

Although using an IDE has its benefits, I think that it is worth keeping
in mind this excellent quote about using IDEs for multiple languages:

“Although many IDEs can handle more than one language, few do it
well. Plus, it’s likely overkill if you are just getting started.”

Now that the folders are set up, let’s create the files that you will use to
develop the game.
First, you need to create a default.html file. If you are using an IDE,
click File ➤ Create New and select HTML. If you are using Notepad, open a
new file and save it as default.html.
Your folder should now look like this:

Now, we need to create files within some of the folders we created.


Double-click the js folder. Repeat the preceding steps (i.e., create a New
File and then Save As). The following are the file names to enter:
• > SZ_main.js
• > SZ_movement.js
• > SZ_setupContent.js
• > SZ_SS.js
• > SZ_touch.js
• > SZ_zombie_movement.js

7
Chapter 1 Introduction

Your js folder should now look like this:

Finally, we need to create a file within the CSS folder. Repeat the steps
from earlier (i.e., create a New File and then Save As). The file name to
enter is

> SZ_master.css.

Your CSS folder should now look like this:

8
Chapter 1 Introduction

We need our files to work across the worldwide network successfully, so we


should try to keep to the standardized naming conventions.
It is best to avoid character spaces in file names. Technically, this is
acceptable in local environments (Apple and Windows OS), however,
character spaces are not recognized by other systems. Ideally, use an
underscore or a hyphen character to separate words within file names.
Do not use any special characters, such as !, ?, %, #, or /. It is best to
limit file names to underscores, numbers, and letters.
For this project, you will notice that I try to consistently start all of my
file names with SZ_. This is because they are the initials for the name of the
game—Space Zombies. It is important to be consistent and descriptive in
naming and organizing files so that it is obvious where to find specific data
and what the files contain.
By naming your files in a meaningful manner, you increase your
chances of finding those files in the future and knowing what information
they contain. When you come to develop new games, you will easily be
able to locate Space Zombie files by searching for all files starting with SZ_.
Finally, it is good practice to keep file names as short as possible. Apart
from adding to the size of the file, it also makes them easier to remember
six months down the line.

9
Chapter 1 Introduction

Hosting and Media Files


As long as the files remain on your hard drive (the files and folders created
earlier), you will be able to test the game comfortably on your computer.
This is certainly okay for budding developers starting out.
Nonetheless, at some point when you have developed several games,
you may wish to showcase them for all to see and play.
To do this, you need to upload your files to a server computer. A server
is essentially a computer that is connected to the Internet.

Part 1: Your Computer vs. Hosting Servers


You need to open an account with a server computer. If you do a Google
search for “server hosting free trial,” you have several options available.
If you are still unsure, please do not hesitate to message me on Twitter
@zarrarchishti.

The following is a short list of available hosting options.

Dedicated Server

This is the most expensive option. Essentially, you own the computer that
is connected to the Internet. This is only an option if you are either a huge
company or a reseller.

10
Chapter 1 Introduction

Shared Server

This is generally the most economical option for hosting. It is very much
for people like you, who are renting a piece of the server. The main
advantage is the ridiculously low cost, of course. However, as your game
development expertise increases, you may find this option to be limiting
and unfit for your specific needs.

Cloud Hosting

Whereas the prior two options rely on one physical computer, cloud
hosting allows an unlimited number of computers to act as one system.

Part 2: Download the Media for Your Project


The media files (image and sound files) used in the project are available
for you to download.
Open your Internet browser and go to the following URL:

http://zarrarchishtiauthor.com/downloads/

Click the Download button. This will initiate a download. The browser
will let you know when it has completed. Navigate to your download folder
and locate the downloaded file.
It should be a file called raw_media_1.rar. Now you need to extract the
files from this zipped file in a new folder called Raw Media. Double-click
this folder and you will see the following four folders:

• > Images

• > JS

• > sounds

• > html_web

11
Chapter 1 Introduction

First, copy all four folders to your Raw Images folder, which is in the
My_Work_Files folder.
At this stage, we are only interested in the files inside the JS folder. As
we progress through the game, we will go back to the other folders and
copy the files as needed. Double-click the JS folder (in the Raw Images
folder). Using the same technique as before to copy files, go ahead and
copy all the files, and then paste them into your own js folder (in the My_
Work_Files folder).
Your js folder (in the My_Work_Files folder) should now look like this:

That’s it for now! We have successfully set up our game development


environment. We are now ready to start coding our game!

12
Chapter 1 Introduction

The files we copied over from the JS folder are special JavaScript programs
that we can use for our game. Imagine a library of code maintained by
companies like Google that contain functions that make our lives easier.
The files—for instance, jQuery—are fast, small, and feature-rich
JavaScript libraries. Together they make things like HTML document
traversal and manipulation, event handling, animation, and AJAX much
simpler with an easy-to-use API that works across a multitude of browsers.
When using a library such as this, we do not need to ever worry about
how they work. All we need to know is what they do so that we can decide
whether we want to use them in our games.
Another advantage of using libraries such as jQuery is that it runs
exactly the same in all major browsers, including Internet Explorer 6! So no
need to worry about cross-browser issues.
Usually, we link to these files directly from the source servers. The
advantage of doing it this way is that we always get the latest copy of the
code when running our game. However, since we want to be able to play
the game offline, let’s choose to download them into our local folders.

13
Chapter 1 Introduction

1) In Windows, did the option to Extract Here


appear? If not, you need to download WinRAR from
the following:

http://www.win-rar.com/download.html

2) Are you using a laptop? To right-click, you need to

first click and then click the mousepad.

3) When downloading the media files, did you receive


a message from your browser warning you that
the download is not commonly used and may be
dangerous? If yes, this is because I chose to WINRAR
rather than to WINZIP the file. The files are not
dangerous. You may click Keep; however, feel free to
run a virus check on the folder before opening.

14
CHAPTER 2

In the Beginning,
There Was HTML
“Nine people can’t make a baby in a month.”
Fred Brooks

HTML is a mark-up language that is used to develop web sites. So why do


we need this for our game? It is best to imagine HTML as the skeleton or
bone structure of our game.
As a side note, once you have completed this chapter, you will have
not only started your journey into game development, but also web
development!

H
 ello World
During my 20 years of programming, I have learned many programming
languages. The first project that I always work on is learning how to output
the words “Hello World.” to the screen. I bet that you follow this tradition
too, so let’s develop a “Hello World” page in HTML.
Open the default.html file in Notepad or TextEdit in the My_Work_Files
folder using the same program or IDE that you used in the “Part 2: Setting up
Our Files” section in Chapter 1.

15
© Zarrar Chishti 2017
Z. Chishti, Cross Over to HTML5 Game Development,
https://doi.org/10.1007/978-1-4842-3291-0_2
Chapter 2 In the Beginning, There Was HTML

When the file opens, it should be completely blank. Type the following
lines:

<html>
<head>
</head>
<body>
  <div id="SZ_maincontent">
   Hello World.
  </div>
</body>
</html>

Navigate to the menu, click File and then click on Save. You can now
close this file. Navigate back to the menu, click File, and then click Exit/
Close.
Are you ready to test your very first program?
Go back to the My_Work_Files folder and double-click the default.
html file. This should open in your default Internet browser; for example,
Microsoft Edge, Google Chrome, or Safari.
The page that opens up on the browser should be a completely blank
page with the words “Hello World.” displayed in the top-left corner.
Excellent. Our program works and we have written our first piece of code!
Obviously, this is nowhere near a game yet. All the same, persevere
with the work between now and that point. Rest assured, by the end of
this book, we will have developed the entire game. It will most certainly be
worth it. And you will be learning a lot of different techniques to get you
started on your journey to developing a suite of games!

16
Exploring the Variety of Random
Documents with Different Content
back
back
back
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and


personal growth!

textbookfull.com

You might also like