[HowTo] HTML5 Game tutorial Part 1 | Preperation
Hey Folks,
Today we start a new tutorial series. We will learn how to write our very first HTML5 Game with Canvas, HTML5 and javascript. So lets get ready to start =D
Preparation
First of all we need something to test. I have installed apache2 on my linux box. Thats the best way to test, because all we need to do is open a browser window, type localhost/game and start playing. So get apache2 from here and install it on your box.
The second step we do is heading to the html directory and create a new folder called game. In my case i do:
$ cd /var/www/html
$ mkdir game
Now i got a brand new unused folder to create our nice game.
All of my projects have the same structure.
Name
|->main files
|->gfx (folder)
+->sfx (folder)
In the root of the directory, i store nearly all files of the project. When i am coding a desktop game with c++ or something like that. HTML5-Games only contain the index.html on the root. Code files a separat stored in a js folder and additionally i also create a css folder in the game directory.
Last but not least we create a html file called index.html with following content.
<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
</body>
</html>
So thats all for today. In the next tutorial we will learn we will create a canvas object and wirte a small hello world like script.