I have a program that draws a tilemap, and there is a player that can move around and collide with the tiles, my end goal is to make a raycaster, which will make a pseudo-3d rendering of a 2d tilemap, in order to do this, I will need to cast a ray which will intersect with a wall, I know how to cast a ray, but I have no clue where to start with the intersection implementation, if anyone has any tips, or knows how to do this, can you please help, here is my code.
c = document.getElementById("c");
w = c.width;
h = c.height;
ctx = c.getContext("2d");
var tilesize = 50;
var player = {
x: 80,
y: 80,
size: 10,
speed: 1,
dir: 0,
rot: 0,
rotSpeed: 0.02,
rotDir: 0,
};
var map = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 1, 1, 0, 0, 0, 0, 0, 1],
[1, 0, 1, 1, 0, 0, 1, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 1, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 1, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 1, 1, 1, 1],
[1, 1, 1, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];
function keydown(event) {
switch (event.keyCode) {
case 87:
player.dir = 1;
break;
case 83:
player.dir = -1;
break;
case 68:
player.rotDir = -1;
break;
case 65:
player.rotDir = 1;
break;
}
}
function keyup(event) {
switch (event.keyCode) {
case 87:
player.dir = 0;
break;
case 83:
player.dir = 0;
break;
case 68:
player.rotDir = 0;
break;
case 65:
player.rotDir = 0;
break;
}
}
var gameloop = setInterval(function () {
ctx.clearRect(0, 0, w, h);
//move
rotstep = player.rotSpeed * player.rotDir;
movestep = player.speed * player.dir;
player.rot += rotstep;
newY = player.y - Math.cos(player.rot) * movestep;
newX = player.x - Math.sin(player.rot) * movestep;
leftbY = player.y - 10 - Math.cos(player.rot) * movestep;
leftbX = player.x - 10 - Math.sin(player.rot) * movestep;
rightbY = player.y + 10 - Math.cos(player.rot) * movestep;
rightbX = player.x + 10 - Math.sin(player.rot) * movestep;
//borders
var leftcol = Math.floor(leftbX / tilesize);
var leftrow = Math.floor(leftbY / tilesize);
var rightcol = Math.floor(rightbX / tilesize);
var rightrow = Math.floor(rightbY / tilesize);
if (map[rightcol][rightrow] == 0 && map[leftcol][leftrow] == 0) {
player.y = newY;
player.x = newX;
}
//map
for (y = 0; y < map.length; y++) {
for (x = 0; x < map[y].length; x++) {
ctx.fillStyle = ["white", "black"][map[y][x]];
ctx.fillRect(x * tilesize, y * tilesize, tilesize, tilesize);
}
}
//player
markerY = player.y - Math.cos(player.rot) * 30;
markerX = player.x - Math.sin(player.rot) * 30;
ctx.fillStyle = "red";
ctx.beginPath();
ctx.ellipse(
player.x,
player.y,
player.size,
player.size,
player.rot * (Math.PI / 180),
0,
2 * Math.PI
);
ctx.fill();
//marker
ctx.beginPath();
ctx.moveTo(player.x, player.y);
ctx.lineTo(markerX, markerY);
ctx.strokeStyle = "Blue";
ctx.stroke();
}, 1000 / 30);
document.addEventListener("keydown", function (event) {
keydown(event);
});
document.addEventListener("keyup", function (event) {
keyup(event);
});<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<canvas height="500px" id="c" width="500px"></canvas>
</body>
</html>