<!DOCTYPE html>
<html>
<head>
<title>Game</title>
</head>
<body>
<canvas id="canvas" width="320" height="320"></canvas>
<style type="text/css">
#canvas{
border:1px solid black;
}
</style>
<script type="text/javascript">
document.getElementById("canvas");
var ctx = canvas.getContext("2d");
x = 160;
y = 160;
rays = [];
blocks = [];
for(i = 0;i < 20;i++){
rays.push({x:0,y:0,a:i - 10,range:0,stop:0});
}
blocks.push({x:145,y:100});
blocks.push({x:180,y:150});
function draw(){
ctx.clearRect(0,0,320,320);
for(i in rays){
if(rays[i].stop == 0){
for(j = 0;j < 1000;j++){
rays[i].x = Math.cos(rays[i].a/180*Math.PI)*j + x;
rays[i].y = Math.sin(rays[i].a/180*Math.PI)*j + y;
for(j in blocks){
if(rays[i].x>=blocks[j].x && rays[i].x <= blocks[j].x + 32 && rays[i].y >= blocks[j].y && rays[i].y <= blocks[j].y + 32){
rays[i].stop = 1;
rays[i].range = j;
}
}
}
}
if(rays[i].stop == 1){
rays[i].x = Math.cos(rays[i].a/180*Math.PI)*rays[i].range + x;
rays[i].y = Math.sin(rays[i].a/180*Math.PI)*rays[i].range + y;
for(j in blocks){
if(!rays[i].x>=blocks[j].x && rays[i].x <= blocks[j].x + 32 && rays[i].y >= blocks[j].y && rays[i].y <= blocks[j].y + 32){
rays[i].stop = 0;
}
}
}
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(rays[i].x,rays[i].y);
ctx.stroke();
ctx.closePath();
rays[i].a+=1;
}
for(i in blocks){
ctx.strokeRect(blocks[i].x,blocks[i].y,32,32);
}
}
setInterval(draw,20)
</script>
</body>
</html>
