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>