如何解决找到一条线和生成的画布方块之间的交点
我有一个绘制瓷砖地图的程序，并且有一个可以四处移动并与瓷砖碰撞的播放器，我的最终目标是制作一个光线投射器，它将对 2d 瓷砖地图进行伪 3d 渲染，在为了做到这一点，我需要投射一条与墙相交的射线，我知道如何投射一条射线，但我不知道从哪里开始交叉实施，如果有人有任何提示，或者知道如何这样做，你能帮忙吗，这是我的代码。
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,];
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,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.rot * (Math.PI / 180),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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
