@Afafks123132132165

Как сделать поворот за мышью?

Как сделать поворот за мышью?
<!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>
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
twobomb
@twobomb
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;
}

Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы