Задать вопрос
@Afafks123132132165
javascript

Почему данный код работает неправильно?

Пишу рейкастинг на JavaScript написал вот такой код но когда луч доходит до определенного момента он застряет.
<!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 = 10;
y = 10;
j = 0;
rays = [];
blocks = [];
for(i = 0;i < 20;i++){
  rays.push({x:0,y:0,radius:0,qq:0,angle:i,raysa:0});
}
blocks.push({x:20,y:20});

function draw(){
  ctx.clearRect(0,0,320,320);
  for(i in rays){
      if(rays[i].qq == 0){
        rays[i].x = Math.cos(rays[i].angle/180*Math.PI) * rays[i].raysa + x;
        rays[i].y = Math.sin(rays[i].angle/180*Math.PI) * rays[i].raysa + y;
        rays[i].radius = rays[i].raysa;
        if(rays[i].x >= 100){
          rays[i].qq = 1;
        }
        rays[i].raysa+=1;
        if(rays[i].qq == 1){
          rays[i].x = Math.cos(rays[i].angle/180*Math.PI) * rays[i].radius + x;
          rays[i].y = Math.sin(rays[i].angle/180*Math.PI) * rays[i].radius + y;          
        }
      }
    if(j%10 == 0){
      console.log(rays[i].x);
    }
  ctx.beginPath();
  ctx.moveTo(x,y);
  ctx.lineTo(rays[i].x,rays[i].y);
  ctx.stroke();
  rays[i].angle+=2;
  j++;
  }
}

setInterval(draw,20);
</script>
</body>
</html>
  • Вопрос задан
  • 127 просмотров
4 комментария
Подписаться 1 Средний 4 комментария
Пригласить эксперта
Ответы на вопрос 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Давайте переменным и свойствам осмысленные названия.
Что за qq, raysa, j?

Сейчас этот неаккуратный код не работает, видимо, потому, что свойство qq у всех лучей рано или поздно становится 1 и у них перстают обновляться координаты.

Вместо 0 и 1 давайте логической переменной значения false и true. Назовите её как-то понятно, типа isStopped

Например, так, точно тот же код, но немного чище и может понятнее:
spoiler
const ctx = document.getElementById("canvas").getContext("2d");

const gun = {
  x: 10,
  y: 10,
}
const rays = [];
const blocks = [];

for (let i = 0; i < 20; i++) {
  rays.push({x: 0, y: 0,
    angle: i,
    radius: 0,
    isStopped: false,
    raysa: 0
  });
}

blocks.push({x: 20, y: 20});

function draw() {
  rays.forEach(ray => {
    const radians = ray.angle / 180 * Math.PI;
    if (!ray.isStopped) {
      ray.x = Math.cos(radians) * ray.raysa + gun.x;
      ray.y = Math.sin(radians) * ray.raysa + gun.y;
      ray.radius = ray.raysa;
      if (ray.x >= 100) ray.isStopped = true;
      
      ray.raysa += 1;
      if (ray.isStopped) {
        ray.x = Math.cos(radians) * ray.radius + gun.x;
        ray.y = Math.sin(radians) * ray.radius + gun.y;
      }
    }
    ray.angle += 2;

    if (i % 10 == 0) console.log(ray.angle);

    ctx.clearRect(0, 0, 320, 320);
    ctx.beginPath();
    ctx.moveTo(gun.x, gun.y);
    ctx.lineTo(ray.x, ray.y);
    ctx.stroke();
  });
}

//setInterval(draw,20);
Ответ написан
4 комментария
4 комментария
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
JavaScript FullStack разработчик
Rocket • Брянск
от 60 000 до 100 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Провести анализ сайта с точки зрения программирования
18 мая 2024, в 01:21
2000 руб./за проект
Директ: настройка и ведение для салона красоты в Москве
18 мая 2024, в 00:47
12000 руб./за проект
Предложить и рассчитать фильтр переключателя аудио
17 мая 2024, в 23:44
1000 руб./за проект
Ещё заказы