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

Question

Afafks123132132165 @Afafks123132132165

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 = 160;
y = 160;
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:199,y:170});

function draw(){
  ctx.clearRect(0,0,320,320);
  for(i in rays){
    rays[i].raysa = 0;
    for(j = 0;j < 1000;j++){
      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;
      for(q in blocks){
        if(rays[i].x == blocks[q].x && rays[i].y >= blocks[q].y && rays[i].y <= blocks[q].y + 32){
          rays[i].qq = 1;
        }else{
          rays[i].qq = 0;
        }
      }
      if(rays[i].qq == 0){
        rays[i].raysa+=1;
      }
    }
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(rays[i].x,rays[i].y);
    ctx.stroke();
    rays[i].angle+=2;
  }
  for(i in blocks){
    ctx.strokeRect(blocks[i].x,blocks[i].y,32,32);
  }
}

setInterval(draw,20);
</script>
</body>
</html>

пример на jsfiddle

Вопрос задан более трёх лет назад
198 просмотров

4 комментария

Подписаться 1 Средний 4 комментария

Решения вопроса 1

11 комментариев

Afafks123132132165 @Afafks123132132165 Автор вопроса
что за блок? block=>?
block=>ray.x>=block.x

let isStop = blocks.some(block=>ray.x>=block.x && ray.x <= block.x + 32 && ray.y >= block.y && ray.y <= block.y + 32);
Написано более трёх лет назад
Роман @lastuniverse

Afafks123132132165, я ваш цикл по блокам заменил на метод массивов SOME. посмотрите его описание
Если в кратце, то some - перебирающий массив метод. Вызываемый у массива (в вашем случае blocks) и принимающий в качестве аргумента функцию - обработчик, которая последовательно будет вызываться для каждого элемента массива до тех пор пока не дойдет до конца массива или не вернет true.

Заменил для того, что по логике, если блоков несколько, то условием прекращение трассировки луча является столкновение с любым из блоков, то есть при столкновении далее трассировку производить не нужно, а соответственно и сравнивать луч с другими блоками тоже.

Написано более трёх лет назад
Afafks123132132165 @Afafks123132132165 Автор вопроса

Роман, А уже все я просто условие поменял спс тебе

Написано более трёх лет назад
Afafks123132132165 @Afafks123132132165 Автор вопроса

Роман, А стопэ у меня со вторым блоком не работает вот это поворот

Написано более трёх лет назад
Роман @lastuniverse

Afafks123132132165, возмите мой вариант, там работает с любым количеством блоков

Написано более трёх лет назад

Afafks123132132165 @Afafks123132132165 Автор вопроса

Роман, Я знаю вы дали мне рабочий код но все же я решил переписать свой учитывая ошибки можете сказать почему он не работает?

<!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>

Написано более трёх лет назад

Роман @lastuniverse

Afafks123132132165, потому что вы намудрили непонятно что:
1. переменная j у вас и тут for(j = 0;j < 1000;j++){...} и во вложенном цикле (for(j in blocks){...}
2. соответственно переменная range у вас не длинна луча а index блока в массиве
3. вы создали в лучах переменную stop и вынужденны обнулять ее в отдельном цикле for(j in blocks){...}
4. переменная range тоже нафиг не нужна. Пользуйтесь оператором выхода из цикла break. Это во первых уменьшит количество итераций по циклам for(j = 0;j < 1000;j++){...} и for(j in blocks){...} а во вторых избавит от необходимости запоминать значение длинны луча в range, и как следствие вам не надо будет пересчитывать отдельно концы лучей.
5. ну и вместо setInterval используйте requestAnimationFrame, это уберет подвисания графики

в общем вот вам исправленная версия вашего кода, дивитесь и разбирайтесь
snippet

Написано более трёх лет назад
Роман @lastuniverse

Afafks123132132165, а еще лучше отвлекитесь от своей задачи и по релаксируйте ))))
snippet

Написано более трёх лет назад
Afafks123132132165 @Afafks123132132165 Автор вопроса

Роман, Спасибо

Написано более трёх лет назад
Afafks123132132165 @Afafks123132132165 Автор вопроса

Роман, Нет серьезно спасибо

Написано более трёх лет назад
Роман @lastuniverse

Afafks123132132165, крайне рекомендую разобраться с вариантом от twobomb

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 2

3 комментария

Afafks123132132165 @Afafks123132132165 Автор вопроса

Спасибо но ты замудрил тот чувак только подправил отмечу как нравиться ок?

Написано более трёх лет назад
twobomb @twobomb

Afafks123132132165, Замудрено было изначально оно. Интересно ты сам придумал такой алгоритм? В принципе он то работает "как-то", ну я бы назвал это костылем, просто это обрезка лучей "на глаз". И для каждого луча по 1000 раз проходить и проверять, это не очень то.
Проверил скорость работы, мой алгоритм в ~30+ раз быстрее, а когда у тебя будет очень много объектов и особенно если будет больше лучей, то это играет весомую роль. Поэтому всетаки рекомендую разобраться. Ничего сложного, там основная фукнция это проверка пересечения двух отрезков и она же возвращает координаты точки пересечения, а квадрат это по сути 4 отрезка( 4 стороны), проверяем пересечение луча с каждой из сторон, и возвращаем точку пересечения ближайшую к началу отрезка луча (так как отрезок может проходить сквозь квадрат и будет 2 точки пересечения, пример).
А если у тебя в игре будет что то сложнее чем квадрат, какой нибудь полигон, то твой алгоритм окажеться бесполезным, ты же не будешь оберезать лучи по bbox'y полигона :D . А полигон можно представить как множество отрезков. И еще один момент это поворот, как только начнешь крутить свои квадраты, начнуться проблемы....

Написано более трёх лет назад
Роман @lastuniverse

Afafks123132132165, послушай twobomb, он дело говорит)))

Написано более трёх лет назад

2 комментария

Роман @lastuniverse

нет, у него там условие не верное)))

у него:

rays[i].x == blocks[q].x && rays[i].y >= blocks[q].y && rays[i].y <= blocks[q].y + 32

а должно быть:

rays[i].x>=blocks[q].x && rays[i].x <= blocks[q].x + 32 && rays[i].y >= blocks[q].y && rays[i].y <= blocks[q].y + 32

Написано более трёх лет назад

Роман @lastuniverse

вернее, вы правы, но он еще забыл дописать && rays[i].x <= blocks[q].x

Написано более трёх лет назад

Ваш ответ на вопрос

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

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

JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 13 часов назад
- 76 просмотров
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 78 просмотров
2

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 985 просмотров
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- вчера
- 51 просмотр
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 83 просмотра
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 96 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 206 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 101 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 93 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Какие есть высокоуровневые компонентные javascript фреймворки?
- 1 подписчик
- 19 дек.
- 171 просмотр
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

20000 руб./за проект

Собрать из исходного кода и запустить в докере рабочее приложение с бд

22 дек. 2024, в 22:57

500 руб./за проект

Аппликация для фильтра заказов

22 дек. 2024, в 20:40

10000 руб./за проект

Ну вы б хотя бы откомментировали код. Что происходит (должно происходить). Я уж не говорю о jsfiddle или codepen.
Николай Чуприк, для тех кто реально может помочь в вопросе и без комментариев все понятно. Но следуя правилам хорошего тона комментарии к коду бы не помешали)

Answer 1 · 2020-03-20 15:31:10

Вы неверно написали условие

у вас:

rays[i].x == blocks[q].x && rays[i].y >= blocks[q].y && rays[i].y <= blocks[q].y + 32

должно быть:

rays[i].x>=blocks[q].x && rays[i].x <= blocks[q].x + 32 && rays[i].y >= blocks[q].y && rays[i].y <= blocks[q].y + 32

Ну а бонусом ловите рабочий вариант:

Answer 2 · 2020-03-20 15:51:55

Странный способ, но предложу свой вариант.

P.S. Просто у вас он странно работает, точность зависит от количества циклов, но даже на 1000 циклов явно видно как линии "залазят" на квадраты.
P.P.S. По колизиям можно тут алгоритмы взять.

Answer 3 · 2020-03-20 15:15:25

Потому что строгое равенство не используют для вещественных чисел из-за проблем с точностью их компьютерного представления.

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

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

Минуточку внимания

Войдите на сайт