Как сделать так что бы при соприкосновении луча и обекта луч останавливался.
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
</head>
<body>
<canvas id = "canvas" width = "320" height = "480"></canvas>
<script type="text/javascript">
document.getElementById("canvas");
var ctx = canvas.getContext("2d");
x = 152;
y = 232;
left = 0;
right = 0;
rays = [];
blocks = [];
for(i = 0; i < 100; i++){
rays.push({x:0,y:0,angle:i,radius:100});
}
blocks.push({x:x+16,y:y+16});
document.addEventListener("keydown",function(e){
if(e.keyCode == 87){
y-=16;
}
if(e.keyCode == 65){
x-=16;
}
if(e.keyCode == 68){
x+=16;
}
if(e.keyCode == 83){
y+=16;
}
if(e.keyCode == 37){
left = 1;
}
if(e.keyCode == 39){
right = 1;
}
});
document.addEventListener("keyup",function(e){
if(e.keyCode == 37){
left = 0;
}
if(e.keyCode == 39){
right = 0;
}
});
function game(){
ctx.clearRect(0,0,320,480);
for(i in rays){
rays[i].x = Math.cos((rays[i].angle/180) * Math.PI)*rays[i].radius + x + 8;
rays[i].y = Math.sin((rays[i].angle/180) * Math.PI)*rays[i].radius + y + 8;
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.moveTo(x+8,y+8);
ctx.lineTo(rays[i].x,rays[i].y);
ctx.stroke()
if(left == 1){
rays[i].angle-=5;
}
if(right == 1){
rays[i].angle+=5;
}
}
for(i in blocks){
ctx.fillRect(blocks[i].x,blocks[i].y,32,32);
}
ctx.fillRect(x,y,16,16);
}
setInterval(game,20);
</script>
</body>
</html>
