Games in JavaScript Part 1: HTML, CSS, and JS

I know, you are here to learn to code in JavaScript, but we will get to that in the next lesson. This lession is a quick crash course in HTML and CSS.

Why? Well your web browser reads HTML, displays it according to CSS, and only runs JavaScript code when told to do so by HTML. No HTML, no running JavaScript.

Setup

To complete the lessions in this tutorial, all you need is a simple text editor (even Notepad will work) and a web browser. However, I would highly recommend downloading a text editor that is designed for code editing.

My recommendation for a lightweight editor would be Notepad++. It has an installable version along with a portable version that doesn't need installation (An extra lightweight portable version as well). You can put the portable versions on a flash drive and use it on any Windows PC with a USB port.

For a full feature code editor I would recommend Microsoft's Visual Studio Code. Much more resource intensive but much more powerful and add ons for just about any of your coding needs. Both are ready to go for all the coding we will be doing out of the box.

Graphics

While I wont be covering designing your graphic assets in this tutorial, I will give you the tools I use.

Specifically for map design we have Tiled Map Editor. Great tool for creating 2D maps for both top down and side scrolling games.

For sprite and map design we have Aseprite. Another great tool for creating 2D maps and an even better tool for creating 2d animated sprites.

And lastly for making animated sprites we have PixelOver. A great tool for animating your 2D sprites.

If you don't want to get into making your own assests yet, there is also a whole section of this site dedicated to game assets, with a large selection for free.

HTML

NOTE: This lession is only going to teach you the basics of HTML. Just enough to run and display your JavaScript content and display some text.

HTML is short for HyperText Markup Language. At first it was devolped to just display text and allow you to link to other webpages. Now, you can display text, images, videos, audio, and even full on applications through JavaScript. There are spin offs of JavaScript with additional libraries to make coding easier for specific tasks. For example, there is Phaser for 2D game devolpment and Babylon.js or Three.js for 3D game devolpment. These are great for saving you time on your projects. However, they will add some bloat to your games making them run less efficently. More importantly you will not learn how the libraries work under the surface. Since you are here to learn, we will be using vanilla JavaScript.

When you open a web browser and go to a website, in short your web browser will send a web server a HTTP/HTTPS request. The server will respond to that request (most of the time) by sending your computer back a HTML file called index.html. We are going to create our first index.html file now and then I'll explain what everything does.

index.html

Please download this example
This is the HTML code for this webpage you are looking at right now.

Starting at line 1 there is the <!DOCTYPE=html>. This tells your browser to display the document as a modern HTML document (the technical term is to render it in standards mode). Without it certain browsers may try and display the webpage using older html standards (technical term is rendering it in quirks mode). Do not worry too much about what this does and just include it at the top of your HTML documents.

Home

Still under devolpment! Last update on: