Tile map collide not working as expected in Javascript

Question

I have been thinking of a way to set-up tile map collision with a player in the same way I have developed the game so far (or similar way if possible, so I do not have to redo everything :) ).

I got some ideas from tutorials and videos and decided to implement it to my code and the player definitely collides with something, though it doesn't look to be the correct tiles that it should be.

For example I want it to walk on over the tiles with Index 1, but to collide with tiles with Index 0 and 3, to stop the player movement.

Here is what I got so far:



    
        
        Canvas Tile Map

And here is a code to test it -

			var canvas = document.getElementById("canvas");
			var context = canvas.getContext("2d");

var go = 0;

var canvasBegX = -64;
var canvasEndX = 999;
var canvasBegY = -64;
var canvasEndY = 649;


var heroX = 0;      
var heroY = 0;      
var heroIndexX = 0;     
var heroIndexY = 0;     
var heroIndexXnew = 0;    
var heroIndexYnew = 0;

//--------------------------------------------------------------
            //ADD CHECKER IF KEY IS PRESSED OR RELEASED

        window.addEventListener('keydown', function (e) {
            canvas.key = e.keyCode;
        })
        window.addEventListener('keyup', function (e) {
            canvas.key = false;
        })
			
//--------------------------------------------------------------
                            //THE MAP
			var mapArray=[

        [3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
				[3,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,3],
				[3,1,1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,0,0,0,0,3],
				[3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,3],
				[3,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,3],
				[3,1,1,1,0,1,1,0,0,0,0,0,1,1,1,1,1,0,0,0,0,3],
				[3,1,1,1,0,1,1,0,0,0,0,0,1,1,1,1,1,0,0,0,0,3],
				[3,0,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,3],
				[3,0,1,1,0,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,3],
				[3,0,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,3],
				[3,0,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,0,0,0,3],
				[3,0,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,0,1,3],
				[3,0,0,0,0,1,1,0,0,0,0,1,1,0,0,1,1,1,1,0,0,3],
				[3,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,3],
        [3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3]
			];

// x= 22
// y= 15




//-----------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------
//-----------------------------------------------------------------------
                  // DRAW PLAYER

  player_image = new Image();

var player = new Object();
player.y = canvas.height/2-220;    //player position y
player.x = canvas.width/2-340;     //player position x
player.Width = 60;
player.Height = 60;



function drawPlayer() {      // drawing the player
    context.beginPath();
    context.fillStyle = "red";
    context.fillRect(player.x,player.y,player.Width,player.Height);
    context.closePath();
}
//-----------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------
//-----------------------------------------------------------------------
                 // These I need for the map co-ordinates and when it moves the map upon key-press
			

      var updateX=(player.x-210);  // Starting point of canvas X
      var updateY=(player.y-160);  // Starting point of canvas Y
			var posX=updateX;
			var posY=updateY;




//------------------------------------------------------------------------------------------------------
//-----------------------------------------------------------------------------------------------------
//-----------------------------------------------------------------------------------------------------
       //DRAW THE MAP AND THE PLAYER      

var grass = new Image();
var stone = new Image();
var black = new Image();

function drawMap() {

var posY = updateY;    // new Y coordinates for the map after movement



			grass.src= 'https://sarahkerrigan.biz/wpmtest/hosting/images/tile/grass.jpeg';
			stone.src = 'https://sarahkerrigan.biz/wpmtest/hosting/images/tile/sand.jpeg';
			black.src = 'https://sarahkerrigan.biz/wpmtest/hosting/images/tile/black.png';

   //---------------------------------------------------------
                    // Draw the map loop
			grass.onload = function (){
			stone.onload = function (){
			black.onload = function (){
			for(var i=0; i < mapArray.length; i++){
				for(var j=0; j < mapArray[i].length; j++){


        


					if(mapArray[i][j]==0){
               if (posY > canvasBegY && posY < canvasEndY && posX > canvasBegX && posX < canvasEndX){
						context.drawImage(grass,posX, posY, 64, 64);   // Load image for grass "0"
						   }
					}



					if(mapArray[i][j]==1){
               if (posY > canvasBegY && posY < canvasEndY && posX > canvasBegX && posX < canvasEndX){
						context.drawImage(stone,posX,posY,64,64);     // Load image for stone "1"
						   }
					}



					if(mapArray[i][j]==3){
               if (posY > canvasBegY && posY < canvasEndY && posX > canvasBegX && posX < canvasEndX){
						context.drawImage(black,posX,posY,64,64);     // Load image for black "3"
						   }
					}


				


					posX+=64;
				}
				posY+=64;
				posX=updateX;   // new X coordinates for the map after movement
   //---------------------------------------------------------
              drawPlayer();          // Draw the player
			}
		}
	 }
	}
}


//-----------------------------------------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------

                // PLAYER MOVEMENT BUTTONS

var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;

var endX=1408;
var endY=960;


document.addEventListener("keydown", keyDownHandler);
function keyDownHandler(e) {
    if(e.keyCode == 39) {
       rightPressed = true;
    }
    else if(e.keyCode == 37) {
       leftPressed = true;
    }
    if(e.keyCode == 40) {
       downPressed = true;
    }
    else if(e.keyCode == 38) {
       upPressed = true;
    }
}
document.addEventListener("keyup", keyUpHandler);
function keyUpHandler(e) {
    if(e.keyCode == 39) {
       rightPressed = false;
    }
    else if(e.keyCode == 37) {
       leftPressed = false;
    }
    if(e.keyCode == 40) {
       downPressed = false;
    }
    else if(e.keyCode == 38) {
       upPressed = false;
    }
}


//----------------------------------------------
                //THE ACTUAL MOVEMENT + BOUNDARIES

function playerMovement(){
//------------------------------
               //CHECK PLAYER X AND Y IN TILE INDEXES

 heroX = Math.abs(updateX - player.x);   //current hero X position starting from beginning of tilemap(outside of visible part)
 heroY = Math.abs(updateY - player.y);   //current hero Y position starting from beginning of tilemap(outside of visible part)
 heroIndexX = heroX/64;   // X index of hero to chech in which tile is currently located
 heroIndexY = heroY/64;   // Y index of hero to chech in which tile is currently located
 heroIndexXnew = Math.ceil(heroIndexX);   //index positioned on the right of the heroes index
 heroIndexYnew = Math.ceil(heroIndexY) -2;   //index positioned on the left of the heroes index

    if(rightPressed) {

      if (isPathTile(mapArray, heroIndexXnew, heroIndexYnew)){             // Nothing happens because you hit a tile
			}else {
         moveRight();                 // if you are not at the wall, you go right
			   }
    }
//------------------------------
    else if(leftPressed) {


         if (isPathTile(mapArray, heroIndexXnew - 2, heroIndexYnew)){             // Nothing happens because you hit a tile
			}else {
         moveLeft();                 // if you are not at the wall, you go left
			   }
    }
//------------------------------
    if(downPressed) {
         if(player.y>updateY+834){}  // Nothing happens because you hit the bottom wall
       else {
         moveDown();                 // if you are not at the wall, you go down
			   }
    }
//------------------------------
    else if(upPressed) {
         if(player.y820){
  updateX=updateX-4.1;       //If you go over this position, move the background
 }
}

function moveLeft(){
 if(player.x>100){
  player.x=player.x-4.1;     //If you are at this position, move the player
 }
 else if(player.x<100){
  updateX=updateX+4.1;       //If you go over this position, move the background
 }
}

function moveUp(){
 if(player.y>80){
  player.y=player.y-4.1;     //If you are at this position, move the player
 }
 else if(player.y<80){
  updateY=updateY+4.1;       //If you go over this position, move the background
 }
}

function moveDown(){
 if(player.y<500){
  player.y=player.y+4.1;     //If you are at this position, move the player
 }
 else if(player.y>500){
  updateY=updateY-4.1;       //If you go over this position, move the background
 }
}



//-----------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------
//-----------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------
//-----------------------------------------------------------------------



//------------------------------------------------------------------------------------------------------
               // MOVEMENT BOUNDARIES WITH TILES 
function isPathTile(mapArray, x, y) {
    return (mapArray[x][y] === 0); // Because 0 is the path tile
}

//-----------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------

//-----------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------
                // THE GAME LOOP 

function gameLoop(){

console.log("index X =" + heroIndexXnew);
console.log("index Y =" + heroIndexYnew);
playerMovement();          //Check for movements
drawMap();                 //Draw the map and the player



requestAnimationFrame(gameLoop);
}
//-----------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------



gameLoop();   // start the gameLoop

			#canvas{
				border: 1px solid black;
			}

All the code has some vars, the tilemap array, drawing the tilemap in only the visible part of the canvas , the player of course with it for every time it draws, then we have the movement and where I believe something is not set correctly. There is a function isPathTile to see if the index next to the current player location is 0 and if it is, it does nothing (when right pressed, so the player does not move). I think that this is where I got it wrong. Much appreciated if anyone can take can a look at this.

Todor · Accepted Answer

After about a week was giving up on this one :D and finally figured it out. I was switching the places of my X and Y indexes and that is why it was not acting as it should be. Showing up the fix here if anyone is interested (only the Player movement has to be updated):

function playerMovement(){
//------------------------------
               //CHECK PLAYER X AND Y IN TILE INDEXES
 heroX = -updateX + player.x;
 heroY = -updateY + player.y;
 heroIndexX = heroX/64;   // get the X index
 heroIndexY = heroY/64;   // get the Y index
 heroIndexXnew = Math.ceil(heroIndexX);
 heroIndexYnew = Math.ceil(heroIndexY);

    if(rightPressed) {
          player_image.src = './images/horseright1.png';



         if(player.x>updateX+1258){  // Nothing happens because you hit the right wall
            }else if (isPathTile(mapArray, heroIndexYnew, heroIndexXnew)){             // Nothing happens because you hit a tile
            }else {
         moveRight();                 // if you are not at the wall, you go right
               }
    }
//------------------------------
    else if(leftPressed) {
          player_image.src = './images/horseleft1.png';


         if(player.xupdateY+834){  // Nothing happens because you hit the bottom wall
            }else if (isPathTile(mapArray, heroIndexYnew, heroIndexXnew)){             // Nothing happens because you hit a tile
            }else {
         moveDown();                 // if you are not at the wall, you go down
               }
    }
//------------------------------
    else if(upPressed) {
         if(player.y



A simple mistake and took me one hell of a time for debugging, though the logic is good and simple. Needs a bit of a touch on how it collides exactly as there are few things to be updated, but overall it works great!

Tile map collide not working as expected in Javascript

Answers (2)

Related Questions