Html canvas javascript game glitch; help appreciated

Dev Shed Forums Sponsor:

February 12th, 2013, 02:13 PM

acosmist

Registered User

Join Date: Feb 2013

Posts: 2

Time spent in forums: 1 h 18 m 26 sec
Reputation Power: 0

Html canvas javascript game glitch; help appreciated

Below is the content of my .js file for a simple game experiment I am doing using html and javascript.

The intent is to control a smiley face, causing it to move through openings in a boundary that lines the edge of the canvas. Every time you move off the top of the canvas through a door, you appear in a door at the bottom, and the other walls change to reflect the contents of a new room.

The problem is that sometimes the smiley moves through the opening and appears in a new room, sometimes it doesn't. I troubleshot this issue with alert boxes and determined that the smiley is being assigned the new coordinate, but then when the alert box is closed, the smiley has not moved and the room has not changed. It is as though the smiley is moving into the next room, and then being returned to its previous position. But I can't for the life of me figure out why.

Any help offered would be appreciated.

Code:

var wallWidth = 5;
var northDoor, southDoor, eastDoor, westDoor;
var numberOfRooms = 100;
var doors = new Array();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var smileyImage = new Image();
smileyImage.src = 'faces/smiley.png';
smileyImage.addEventListener('load', init, false);
var smiley = {
	image: smileyImage, 
	x: 250, 
	y: 250, 
	width: 25, 
	height: 25, 
	speed: 50,
	room: 0
};

function Door(room1, room2){
	this.room1 = room1;
	this.room2 = room2;
};

function drawSmiley(){
	ctx.drawImage(smiley.image, smiley.x, smiley.y, smiley.width, smiley.height);
}

function makeDoors(){
	for(i = 0; i < numberOfRooms; i ++){
		var room2 = Math.random() < .5 ? i + 1 : i + 10;
		doors[doors.length] = new Door(i, room2);
	}
}

function drawWalls(){
	northDoor = southDoor = eastDoor = westDoor = false;
	for(i = 0; i < doors.length; i ++){
		if(doors[i].room2 - doors[i].room1 === 1 && smiley.room === doors[i].room1){
			eastDoor = true;
			ctx.fillRect(canvas.width - wallWidth, 0, wallWidth, (canvas.height / 5) * 2);
			ctx.fillRect(canvas.width - wallWidth, (canvas.height / 5) * 3, wallWidth, (canvas.height / 5) * 2);
		}
		if(doors[i].room2 - doors[i].room1 === 1 && smiley.room === doors[i].room2){
			westDoor = true;
			ctx.fillRect(0, 0, wallWidth, (canvas.height / 5) * 2);
			ctx.fillRect(0, (canvas.height / 5) * 3, wallWidth, (canvas.height / 5) * 2);
		}
		if(doors[i].room2 - doors[i].room1 === 10 && smiley.room === doors[i].room1){
			northDoor = true;
			ctx.fillRect(0, 0, (canvas.width / 5) * 2, wallWidth);
			ctx.fillRect((canvas.width / 5) * 3, 0, (canvas.width / 5) * 2, wallWidth);
		}
		if(doors[i].room2 - doors[i].room1 === 10 && smiley.room === doors[i].room2){
			southDoor = true;
			ctx.fillRect(0, canvas.height - wallWidth, (canvas.width / 5) * 2, wallWidth);
			ctx.fillRect((canvas.width / 5) * 3, canvas.height - wallWidth, (canvas.width / 5) * 2, wallWidth);
		}
	}
	if(!eastDoor){
		ctx.fillRect(canvas.width - wallWidth, 0, wallWidth, canvas.height);
	}
	if(!westDoor){
		ctx.fillRect(0, 0, wallWidth, canvas.height);
	}
	if(!northDoor){
		ctx.fillRect(0, 0, canvas.width, wallWidth);
	}
	if(!southDoor){
		ctx.fillRect(0, canvas.height - wallWidth, canvas.width, wallWidth);
	}
}

function init(){	
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	drawWalls();
	drawSmiley();
	document.addEventListener('keydown', move, false);
}

function move(e){
	var keyID = e.keyCode || e.which;
	if(keyID === 37){
		smiley.x -= smiley.speed;
	}
	if(keyID === 38){
		smiley.y -= smiley.speed;
	}
	if(keyID === 39){
		smiley.x += smiley.speed;
	}
	if(keyID === 40){
		smiley.y += smiley.speed;
	}
	if(smiley.x < wallWidth){
		if(!westDoor || smiley.y < (canvas.height / 5) * 2 || smiley.y > (canvas.height / 5) * 3){
			smiley.x = wallWidth;
		}else{
			smiley.room --;
			smiley.x = canvas.width - wallWidth;
		}
	}
	if(smiley.x + smiley.width > canvas.width - wallWidth){
		if(!eastDoor || smiley.y < (canvas.height / 5) * 2 || smiley.y > (canvas.height / 5) * 3){
			smiley.x = canvas.width - smiley.width - wallWidth;
		}else{
			smiley.room ++;
			smiley.x = wallWidth;
		}
	}
	if(smiley.y < wallWidth){
		if(!northDoor || smiley.x < (canvas.width / 5) * 2 || smiley.x > (canvas.width / 5) * 3){
			smiley.y = wallWidth;
		}else{
			smiley.room += 10;
			smiley.y = canvas.height - wallWidth;
		}
	}
	if(smiley.y + smiley.height > canvas.height - wallWidth){
		if(!southDoor || smiley.x < (canvas.width / 5) * 2 || smiley.x > (canvas.width / 5) * 3){
			smiley.y = canvas.height - smiley.height - wallWidth;
		}else{
			smiley.room -= 10;
			smiley.y = wallWidth;
		}
	}
}

makeDoors();
setInterval(init, 50);

February 12th, 2013, 02:58 PM