Create a 2d shoot'em up game in html5 and javascript (Updated 2016-05-11)
If you would like to create a 2d game in html5 and javascript, this is a simple guide how to start.
I show you in small steps how to create a very simple shoot'em up game.
First download an js-lib that you can use. I found the lib Phaser from MIT,
and it is a great lib with many functions and examples.
Link: http://phaser.io/download/stable
You could also download examples from here (my code is written with help of these examples)
Link: https://github.com/photonstorm/phaser-examples
You need to unzip the examples to be on the same directory level as the Phaser lib like this:
.\phaser
.\phaser-examples-master
Figure 1: Screenshot from the game.
First create a directory for your game in:
.\phaser-examples-master\phaser-examples-master\examples
e.g. REgame
We will store our javascript file in this directory.
Then create a html5 page to load our js.
e.g. .\phaser-examples-master\phaser-examples-master\examples\REgame.html
It should contain the these lines:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple shoot'em up game</title>
<script src="_site/js/jquery-2.1.4.min.js"
type="text/javascript"></script>
<script src="_site/js/jquery.cookie.js" type="text/javascript"></script>
<script src="_site/js/RecordRTC.js" type="text/javascript"></script>
<script src="_site/js/Blob.js" type="text/javascript"></script>
<script src="_site/js/CanvasToBlob.js" type="text/javascript"></script>
<script src="_site/js/FileSaver.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="_site/css/debug.css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="phaser-example" width="800" height="600"
src="iframe.php?f=REgame/REgame.js" style="border: 1px solid
#2ab7ec"></iframe>
</script>
</body>
</html>
The first lines of code loads the libs we are using, and the line starting with "iframe" loads our javascriptgame.
If you would ike to test the html-file, you can replace the filename with one of the examples.
<iframe id="phaser-example"
width="800" height="600" src="iframe.php?f=games/invaders.js"
style="border: 1px solid #2ab7ec"></iframe>
You will also need a webserver to get things to run. PHP contains a webserver. You can download php from here, you propably need it also for other purposes anyway.
link: http://windows.php.net/download/
After installation goto the phaser root-directory.
To start a webserver type:
php -S 127.0.0.1:8081
Where 127.0.0.1 is the loopback interface and 8081 is the port number.
To start a game you can start Firefox and enter:
http://127.0.0.1:8081/phaser-examples-master/examples/REtest.html
If the program do not run correct in the browser, press the key f12 and a debug window will show up.
In Part 1 we will create a canvas to place objects on. We will load 2
images and add them as sprites, one player and one enemy. The wasp enemy
will also rotate around its upper middle point.
REgamePart1.js REgamePart1.html (Click right mouse button and Save as)
In Part 2 we will add keys to control our player.
Cursor keys to move and later space to fire.
REgamePart2.js REgamePart2.html (Click right mouse button and Save as)
In part3 we will add bullets for
the player and move the enemy if it is hit.
REgamePart3.js REgamePart3.html (Click right mouse button and Save as)
And finally in Part 4 we will add score, when bullet hits the enemy.
The enemy will also fire bullets and after 3 hits (lives) the game is over.
REgamePart4.js REgamePart4.html (Click right mouse button and Save as)
All the files are here: REgame.zip