Thanks a lot for that information. I'm almost there, it's just something that goes wrong. When it creates the bullet then the game freezes. I'd better post my whole game code. Ignore everything except the bullet code. Can you see what's wrong? If you look at the comments I've made then you can see at the top that I somehow need that bullet variable that I've created. I don't know why. Can someone see the problem? I'm almost there so it should be something very small to fix which I can't see:
var canvasJet = document.getElementById('canvasJet');
var ctxJet = canvasJet.getContext('2d');
var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');
var canvasBullet = document.getElementById('canvasBullet');
var ctxBullet = canvasBullet.getContext('2d');
var jet1 = Jet();
//This bullet variable is not supposed to be there, but if I remove it then it doesn't work
var bullet = CreateBullet(200,200);
var bullets = new Array();
var requestAnimFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
var background = new Image();
background.src = 'images/background.png';
background.addEventListener('load', init, false);
var plane = new Image();
plane.src = 'images/PlaneLeft.gif';
plane.addEventListener('load', init, false);
var bulletImage = new Image();
bulletImage.src = 'images/Bullet.gif';
bulletImage.addEventListener('load', init, false);
// main functions
function init() {
loop();
document.addEventListener('keydown', checkKeyDown, false);
document.addEventListener('keyup', checkKeyUp, false);
}
function loop() {
ctxBg.drawImage(background, 0, 0);
jet1.draw();
jet1.move();
bullet.draw();
requestAnimFrame(loop);
}
function clearCtxBg() {
ctxBg.clearRect(0, 0, 800, 600);
}
// end of main functions
// My jet code
function Jet()
{
var x = 200;
var y = 300 ;
var dx = 0;
var dy = 0 ;
var Jet = function()
{
}
Jet.prototype.draw = function(){
jet1.update();
ctxJet.drawImage(plane, x, y);
}
Jet.prototype.setDX = function(speed)
{
dx = speed;
}
Jet.prototype.setDY = function(speed)
{
dy = speed;
}
Jet.prototype.getX = function()
{
return x;
}
Jet.prototype.getY = function()
{
return y;
}
Jet.prototype.update = function(){
ctxJet.clearRect(0, 0, 800, 600);
}
Jet.prototype.move = function()
{
x += dx;
y += dy;
return this;
}
return new Jet();
}
// End of jet code
// My bullet code
function CreateBullet(startX, startY)
{
var x = startX;
var y = startY;
var Bullet = function()
{
}
Bullet.prototype.draw = function(){
bullet.update();
for(b in bullets){
ctxBullet.drawImage(bulletImage, jet1.getX(), jet1.getY());
b.move(1,0);
}
}
Bullet.prototype.getX = function()
{
return x;
}
Bullet.prototype.update = function(){
ctxBullet.clearRect(0, 0, 800, 600);
}
Bullet.prototype.getY = function()
{
return y;
}
Bullet.prototype.move = function(dx,dy)
{
x += dx;
y += dy;
}
return new Bullet();
}
// End of bullet code
// Keyboard code
function checkKeyDown(e) {
var keyID = e.keyCode || e.which;
if (keyID === 38 ) { //up arrow
jet1.setDY(-1);
}
if (keyID === 39 ) { //right arrow
jet1.setDX(1);
bullets[bullets.length] = new CreateBullet(jet1.getX(),jet1.getY());
}
if (keyID === 40 ) { //down arrow
jet1.setDY(1);
}
if (keyID === 37 ) { //left arrow
jet1.setDX(-1);
}
if (keyID === 87) { //W key
}
}
function checkKeyUp(e) {
var keyID = e.keyCode || e.which;
if (keyID === 38 ) { //up arrow
jet1.setDY(0);
}
if (keyID === 39 ) { //right arrow
jet1.setDX(0);
}
if (keyID === 40 ) { //down arrow
jet1.setDY(0);
}
if (keyID === 37 ) { //left arrow
jet1.setDX(0);
}
if (keyID === 87) { //W key
}
}
// end of keyboard code