#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    2
    Rep 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);
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    2
    Rep Power
    0
    I actually solved the problem just now. Added some elses to this function.

    Code:
    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{
    			alert(smiley.x);
    			smiley.room --;
    			smiley.x = canvas.width - wallWidth;
    			alert(smiley.x);
    		}
    	}else 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;
    		}
    	}else 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;
    		}
    	}else 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;
    		}
    	}
    }

IMN logo majestic logo threadwatch logo seochat tools logo