Usefull links:
Notepad ++
Andy Harris' page Right click on the file "simpleGame.js" and select "Tallenna kohde levylle" or "Save target as". Save that file in the same folder where you have your html-pages. On your html page add a link in the <head> section to the file with <"script src="simpleGame.js">.
Look at the documentation.html too. It tells you what kind of properties simpleGame.js game engine has built in so what can you easily add to your game.
In chapter 9 Going Mobile you can find the car image if you want to use that.
New things in the codes are highlighted with yellow.
This first code:a car and a background canvas. The car can be steered with arrow keys.
In this code there are two more sprites, the houses. You need to have an image for them but you can use the same image for both. There is also collision detection and the car bumps backwards if it hits a house. Minor additions are maximum speed for the car and bounce effect which will stop the car going out of canvas.
A sound effect is added and played if the car hits a house. There is also maximum speed and a bump effect for reverse driving.
This time we add an "enemy" which moves and changes its direction randomly. We also add possibility for shooting and an image change when you hit the target.
This is code 4 about adding an "enemy"
This is code 5 about shooting and hitting the target
These lessons are about how to construct a new object by yourself and create and treat many instances of it in the same time with a "for" -loop and special variables called arrays.
We also add some of the code as an external file (library).
Addition to the external library code: created crimeCar objects will be starting from different points. That is made by giving them a random value on x-axis.
Making the enemy shoot by creating the shells and addind a fire function for them. The shells are set in an array and located in the enemy cars when they are shot. Shooting is automatic and randomized.
Download Google Grasshopper app to ypur phone and learn Javascript! Visit the Grasshopper web page to see more.
These codes are examples of creating an animated game character. The methods of the Simplegame game engine make it possible to add a series of images for a sprite. Those images are then shown as an animation. If you use some other set of images he size of the image and each frame may need adjustment to work properly but in this example they are already adjusted. In method character. loadAnimation the first two parameters are the width and the height of the whole image and the next two the width and height of one frame: calculate them from the image! The first code is just about the character and the second one has a background. The character goes freely on the background but if you want the houses or some other objects to stop it try adding more sprites on those places with transparent images and collision detection.
First code with an animated character. Download the png image for this from below on this page.
Second code with a background image added. The background image is below as well. Both images are also at Harris'
page on chapter 8. You can also look at the documentation there to look at the animation methods of the game engine.
Experimental code with another image.
Tank game 2025 basic structure
You need to set this file + tank.png + SimpleGame.js to the same folder!
My images are here, you can use them for testing and make yours with Gimp or some other image manipulation software. You can download Gimp for free.
Tank
Ammo
Leopard 2A4
NEW IMAGES:
Tank wrecked
Leopard 2A4 wrecked
Background
Pond
Image for the walk animation
The background image for the walking character animation
The other car
The bullet
The wrecked car
House image if you need.
You can download great sounds from Freesound just have to register.
Some sounds I used:
Gunshot
Tank moving
Crash sound
Car engine sound
Shooting
