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

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

+1 ещё

Средний
Как подключить поисковую систему в js?
- 1 подписчик
- 21 минуту назад
- 12 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 4 часа назад
- 44 просмотра
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- 5 часов назад
- 22 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 6 часов назад
- 24 просмотра
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- вчера
- 140 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 163 просмотра
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 85 просмотров
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- 20 нояб.
- 51 просмотр
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- 20 нояб.
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- 20 нояб.
- 48 просмотров
0

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

Нужен верстальщик. Переверстать, доверстать, доработать интерфейс

22 нояб. 2024, в 16:13

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

Доработка и исправление ошибок в работе Личного кабинета сайта

22 нояб. 2024, в 15:59

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

Рефакторинг vue.js/nest.js интерфейса у админки

22 нояб. 2024, в 15:50

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

Ну вы б хотя бы откомментировали код. Что происходит (должно происходить). Я уж не говорю о 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

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

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

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

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

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