<!DOCTYPE html>
<html>
<head>
<title>Game</title>
</head>
<body>
<canvas id = "canvas" width = "320" height = "320"></canvas>
<style>
#canvas{
border:1px solid black;
}
</style>
<script type="text/javascript" src = "engine.js"></script>
<script type="text/javascript">
document.getElementById("canvas");
var ctx = canvas.getContext("2d");
dx = 0;
dy = 0;
player = [];
ray = [];
for(i = 0;i < 20;i++){
ray.push({x:0,y:0,stop:0,angle:i,radius:100});
}
player.push({x:160,y:160,w:32,h:32});
function game(){
ctx.clearRect(0,0,320,320);
for(i in ray){
for(j in player){
for(q = 0;q < 100;q++){
ray[i].x = Math.cos(ray[i].angle/180*Math.PI) * q + player[j].x + 16;
ray[i].y = Math.sin(ray[i].angle/180*Math.PI) * q + player[j].y + 16;
}
ctx.beginPath();
ctx.moveTo(player[j].x+16,player[j].y+16);
ctx.lineTo(ray[i].x,ray[i].y);
ctx.stroke();
ctx.closePath();
}
ray[i].angle+=1;
}
for(i in player){
arc(player[i],32,"red");
}
}
setInterval(game,20);
</script>
</body>
</html>
var mouseX = 0,mouseY = 0;
//Вешаем обработчки на движение мыши
canvas.addEventListener("mousemove", function(e) {
mouseX = e.offsetX;
mouseY = e.offsetY;
});
//... function draw
player.angle = getAngle(player.x,player.y,mouseX,mouseY);//в радианах
//...
var angleStep = (1).toRadian();//Шаг угла между лучами
var angleRayStart = player.angle - angleStep * rays.length/2;//Угол первого луча, далее угол увеличивается на angleStep, таким образом средний луч будет где-то как раз куда смотрит игрок
//...
//Получить угол между двумя точками
function getAngle(dx, dy, dx1, dy1) {
return Math.atan2(dy - dy1, dx - dx1) + Math.PI;
}