JS & Canvas from scratch
Posted: Thu May 23, 2013 9:52 am
You will find here a work in progress of a tutorial, which should hopefully grow up to a full (maybe minimal) iso game written without any engine.
Latest result is visible here:
http://temp.nowhere-else.org/iso_game/
Why not use any engine? First of all, because you can start with just notepad.exe or vi. And also to show that you can do a lot with your own skills. Finally, understanding how things works do help to code better, and may help you in case you need to edit an existing engine or write your own game.
So let's start. Personally I code JS with the help of webstorm, however you can use whatever text editor you want, from the most basic one to eclipse or visual studio. Up to you.
Create a directory on your computer, and let's call it: iso_game, inside this directory we will create the files required to make our game. Nothing too fancy mind you, but still something cool.
Go inside the iso_game directory and create an empty file called index.html then edit it with your preferred editor:
Now don't jump on me already complaining there is no end to the html or the body tag. It works without, so no need here to add them. If you are not happy add them.
This is nearly the minimum to make your html work fine on most browser. We will support IE 9+, FF and Chrome. It may work on others but I will not make any support for them.
We now need something to draw on, and in HTML5 this is called a canvas:
Ok the canvas is now called gameCanvas... however you will still see... nothing. To draw on the canvas we need to write some Javascript. At start we will mix the JS (Javascript) with the HTML, however it's good practice to avoid it as much as possible, and keep your JS code on separated files.
If you save this, and open it with your browser (double click on the file), you should see a "nice" red square on your page. Congratulations you have done your first canvas HTML5 page!
Latest result is visible here:
http://temp.nowhere-else.org/iso_game/
Why not use any engine? First of all, because you can start with just notepad.exe or vi. And also to show that you can do a lot with your own skills. Finally, understanding how things works do help to code better, and may help you in case you need to edit an existing engine or write your own game.
So let's start. Personally I code JS with the help of webstorm, however you can use whatever text editor you want, from the most basic one to eclipse or visual studio. Up to you.
Create a directory on your computer, and let's call it: iso_game, inside this directory we will create the files required to make our game. Nothing too fancy mind you, but still something cool.
Go inside the iso_game directory and create an empty file called index.html then edit it with your preferred editor:
Code: Select all
<!DOCTYPE html>
<html style='height: 100%; width: 100%;'>
<head>
<title>My ISO Game</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body style='margin: 0px;height: 100%; width: 100%;'>
This is nearly the minimum to make your html work fine on most browser. We will support IE 9+, FF and Chrome. It may work on others but I will not make any support for them.
We now need something to draw on, and in HTML5 this is called a canvas:
Code: Select all
<!DOCTYPE html>
<html style='height: 100%; width: 100%;'>
<head>
<title>My ISO Game</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body style='margin: 0px;height: 100%; width: 100%;'>
<canvas id='gameCanvas' width='600' height='600'></canvas>
Code: Select all
<!DOCTYPE html>
<html style='height: 100%; width: 100%;'>
<head>
<title>My ISO Game</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body style='margin: 0px;height: 100%; width: 100%;'>
<canvas id='gameCanvas' width='600' height='600'></canvas>
<script>
var canvas=document.getElementById('gameCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='red';
ctx.fillRect(0,0,600,600);
</script>