[HowTo] HTML5 Game tutorial Part 1 | Preperation

in #html5game6 years ago

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.

Ok folks, stay tuned and interested. We will read us on the next tutorial.

Coin Marketplace

STEEM 0.28
TRX 0.12
JST 0.033
BTC 71095.13
ETH 3686.44
USDT 1.00
SBD 3.76