Я делаю игру по этому туториалу
https://proglib.io/p/raycasting-for-the-smallest
Но что то не работает не знаю почему помогите пожалуйста мне, а то что то непонятно ничего
<!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;
mapx = 0;
mapy = 0;
c = 0;
rays = [];
blocks = [];
map = [1,1,1,1,1,1,1,1,1,1,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0];
for(i = 0; i < 100; i++){
rays.push({x:0,y:0,angle:i,radius:100});
}
for(i in map){
if(map[i] == 1){
blocks.push({x:mapx,y:mapy});
mapx+=32;
}else{
mapx+=32;
}
if(mapx > 320){
mapy+=32;
}
}
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 blocks){
ctx.fillRect(blocks[i].x,blocks[i].y,32,32);
}
for(i in rays){
rays[i].x = x + c*Math.cos(rays[i].angle);
rays[i].y = y + c*Math.sin(rays[i].angle);
if (map[(Math.floor(rays[i].x))+(Math.floor(rays[i].y))*10]!=0){
rays[i].x = rays[i].x;
rays[i].y = rays[i].y;
rays[i].radius = rays[i].radius;
}
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.moveTo(x+8,y+8);
ctx.lineTo(rays[i].x,rays[i].y);
ctx.stroke();
ctx.closePath();
c+=.05;
}
ctx.fillRect(x,y,16,16);
}
setInterval(game,20);
</script>
</body>
</html>
