Вот пишу я рейкастинг и хочу сделать так что бы игра показывала только вертикальные стены.Сделал вот такой код но он кривой.Как можно добиться правильного результата?Код внизу.
<!DOCTYPE html>
<html>
<head>
<title>Raycast</title>
</head>
<body>
<canvas id = "canvas" width = "640" height = "480"></canvas>
<style>#canvas{border:1px solid black;}</style>
<script type="text/javascript">
document.getElementById("canvas");
var ctx = canvas.getContext("2d");
x = 160;
y = 240;
bx = 0;
by = 0;
move = 0;
left = 0;
right = 0;
down = 0;
angle = 10;
step = 0;
working = 0;
length = 0;
drawline = [];
raydalnostis = [];
rays = [];
blocks = [];
map = [1,1,1,1,1,1,1,1,1,1,
1,0,0,1,0,0,0,0,0,1,
1,0,0,1,0,0,0,0,0,1,
1,0,0,1,0,0,0,0,0,1,
1,0,0,0,1,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,0,0,1,
1,1,1,1,1,1,1,1,1,1];
for(i = 0;i < 20;i++){
rays.push(i);
}
for(i = 0;i < map.length;i++){
if(map[i] == 1){
blocks.push({x:bx,y:by});
}
bx+=32;
if(bx > 288){
by +=32;
bx = 0;
}
}
for(i = 0;i < 20;i++){
raydalnostis.push(0);
}
for(i = 0;i < 20;i++){
drawline.push(0);
}
document.addEventListener("keydown",function(e){
if(e.keyCode == 38){
move = 1;
}
if(e.keyCode == 39){
right = 1;
}
if(e.keyCode == 40){
down = 1;
}
if(e.keyCode == 37){
left = 1;
}
});
document.addEventListener("keyup",function(e){
if(e.keyCode == 38){
move = 0;
}
if(e.keyCode == 39){
right = 0;
}
if(e.keyCode == 40){
down = 0;
}
if(e.keyCode == 37){
left = 0;
}
});
ctx.strokeStyle = "red";
function game(){
ctx.clearRect(0,0,640,480);
ctx.fillStyle = "black";
for(i in blocks){
ctx.fillRect(blocks[i].x,blocks[i].y,32,32);
}
ctx.fillRect(x,y,1,1);
for(i = 0;i < rays.length;i++){
working = 0;
length = 300;
for(j = 0;j < 300;j++){
var rayx = Math.cos(rays[i]/180*Math.PI)*j+x;
var rayy = Math.sin(rays[i]/180*Math.PI)*j+y;
length-=1;
for(q in blocks){
if(rayx >= blocks[q].x && rayx <= blocks[q].x+32 && y <= blocks[q].y+32 && y >= blocks[q].y){
drawline[i] = 1;
raydalnostis[i] = length;
working = 1;
break;
}else{
drawline[i] = 0;
}
}
if(working == 1){
break;
}
}
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(rayx,rayy);
ctx.stroke();
ctx.closePath();
if(left == 1){
rays[i]-=2;
}
if(right == 1){
rays[i]+=2;
}
}
if(left == 1){
angle-=2;
}
if(right == 1){
angle+=2;
}
var rayx = Math.cos(angle/180*Math.PI)*100+x;
var rayy = Math.sin(angle/180*Math.PI)*100+y;
if(move == 1){
x+=(rayx - x)/100;
y+=(rayy - y)/100;
}
if(down == 1){
x+=-(rayx - x)/100;
y+=-(rayy - y)/100;
}
step = 0;
for(i = 0;i < 20;i++){
if(drawline[i] == 1){
ctx.fillStyle = "rgb("+raydalnostis[i]/2+",0,0)";
ctx.fillRect(320+step,240-raydalnostis[i]/2,16,raydalnostis[i]);
}
step+=16;
}
}
setInterval(game,20);
</script>
</body>
</html>
