Unexpected "Illegal return statement"

Question

So i have my code here:

var canvas = document.getElementById('c');
var ctx = c.getContext('2d');
var player = {
	x: 0,
	y: 0,
	width: 20,
	height: 20,
	speed: 3,
	velX: 0,
	velY: 0,
	jumping: false,
	grounded: false,
	gravity: 0.35,
	friction: 0,
	glitchCooldown: 0,
	keys: []
};
var walls = [];
walls.push({
	x: 50,
	y: 230,
	width: 20,
	height: 20
})
walls.push({
	x: 150,
	y: 230,
	width: 20,
	height: 20
})
player.y = canvas.height - player.width;
document.body.addEventListener("keydown", function(e) {
    player.keys[e.keyCode] = true;
});
 
document.body.addEventListener("keyup", function(e) {
    player.keys[e.keyCode] = false;
});
function update() {
	if (player.keys[68]) {
		if (player.velX < player.speed) {
			player.velX++;
		}
	};
	if (player.keys[65]) {
		if (player.velX > -player.speed) {
           player.velX--;
       }
	};
	if (player.keys[87]) {
  		if (!player.jumping) {
  			player.jumping = true;
  			player.grounded = false;
  			player.velY = -player.speed*2;
  		}
	};
	if (player.keys[74]) {
		glitch('backward');
	};
	if (player.keys[75]) {
		glitch('down')
	};
	if (player.keys[76]) {
		glitch('forward')
	};
	player.velY += player.gravity;
	player.velX *= player.friction;
	player.x += player.velX;
	player.y += player.velY;
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	player.grounded = false;
	for (var i = 0; i < walls.length; i++) {
        rect('black', walls[i].x, walls[i].y, walls[i].width, walls[i].height);
        var dir = colCheck(player, walls[i]);
        if (dir === "l" || dir === "r") {
    		player.velX = 0;
    		player.jumping = false;
 		} else if (dir === "b") {
    		player.grounded = true;
     		player.jumping = false;
 		} else if (dir === "t") {
    		player.velY *= -1;
 		}
    }
    if (player.grounded){
    	player.velY = 0;
	}
	if (player.glitchCooldown <= 0) {
		player.glitchCooldown = 0;
	}
	player.glitchCooldown--;
 	rect('black', player.x, player.y, player.width, player.height);
	requestAnimationFrame(update);
};
requestAnimationFrame(update)
function rect(color, x, y, width, height) {
	ctx.fillStyle = color;
	ctx.fillRect(x, y, width, height);
}
function glitch(x) { 
		if (player.glitchCooldown <= 0) {
		setTimeout(function(){player.width = 0}, 200);
    	setTimeout(function(){player.width = 20}, 220);
    	setTimeout(function(){player.width = 0}, 400);
    	setTimeout(function(){player.width = 20}, 420);
    	setTimeout(function(){player.width = 0}, 500);
    	setTimeout(function(){player.width = 20}, 510);
    	setTimeout(function(){player.width = 0}, 530);
    	setTimeout(function(){player.width = 20}, 550);
    	if (x == 'forward'){setTimeout(function(){player.x += 20;}, 700)};
   		if (x == 'backward'){setTimeout(function(){player.x -= 20;}, 700)};
    	if (x == 'down'){setTimeout(function(){player.y += 20;}, 700)};
   		setTimeout(function(){player.glitchCooldown = 120}, 700);
	}
}
function colCheck(shapeA, shapeB) {
    // get the vectors to check against
    var vX = (shapeA.x + (shapeA.width / 2)) - (shapeB.x + (shapeB.width / 2)),
        vY = (shapeA.y + (shapeA.height / 2)) - (shapeB.y + (shapeB.height / 2)),
        // add the half widths and half heights of the objects
        hWidths = (shapeA.width / 2) + (shapeB.width / 2),
        hHeights = (shapeA.height / 2) + (shapeB.height / 2),
        colDir = 'l';
 
    // if the x and y vector are less than the half width or half height, they we must be inside the object, causing a collision
    if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) {         // figures out on which side we are colliding (top, bottom, left, or right)         var oX = hWidths - Math.abs(vX),             oY = hHeights - Math.abs(vY);         if (oX >= oY) {
            if (vY > 0) {
                colDir = "t";
                shapeA.y += oY;
            } else {
                colDir = "b";
                shapeA.y -= oY;
            }
        } else {
            if (vX > 0) {
                colDir = "l";
                shapeA.x += oX;
            } else {
                colDir = "r";
                shapeA.x -= oX;
            }
        }
    }
    return colDir;
}
function random() {
	var x = Math.floor((Math.random() * 10) + 1);
    return x;
}

<html>
<head>
	<title>CoRRupTed</title>
	<link rel="stylesheet" href="design.css">
</head>
<body>
<canvas height='250' width='1350' style='border: 1px solid black' id='c'>Your browser do not support the &lt;canvas&gt; tag. Please update your browser.</canvas>
<script src='main.js'></script>
</body>
</html>

As you can see, my colCheck function is not working properly. It suppose to return colDir as 'l', 'r', 'b' or 't'. Buut the error says "Illegal resturn statement", so I think that colCheck is returning colDir as null. Therefore, in my code, I already write var col = colCheck(player, walls[i]), but it is still not working properly. Any ideas?

Answer 1

This is because you are not consistently styling your code.

The error means you have mismatching opening and closing braces.

the line

 if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) {         // figures out on which side we are colliding (top, bottom, left, or right)         var oX = hWidths - Math.abs(vX),             oY = hHeights - Math.abs(vY);         if (oX >= oY) {

should be. Comments within /* */ have been added by me.

   /* DONT make comment run past right edge of screen put them in the line above */
   // figures out on which side we are colliding (top, bottom, left, or right)
   if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) {         
       /* DONT use , to separate variable declarations */
       const oX = hWidths - Math.abs(vX); /*Use consts for vars that don't change*/
       const oY = hHeights - Math.abs(vY);         
       if (oX >= oY) {