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

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

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

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 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 3 часа назад
- 20 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Three.js объект сзади не виден при повороте к нему лицом?
- 2 подписчика
- 7 часов назад
- 92 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как скачать pdf из встроенного просмотрщика на сайте?
- 1 подписчик
- 10 часов назад
- 109 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- 11 часов назад
- 43 просмотра
0

ответов
JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- вчера
- 107 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- вчера
- 82 просмотра
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- вчера
- 45 просмотров
0

ответов
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 2 подписчика
- вчера
- 69 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- 22 апр.
- 69 просмотров
1

ответ
JavaScript

Простой
Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?
- 1 подписчик
- 22 апр.
- 80 просмотров
1

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Настроить перехват https-трафика для android-приложения

25 апр. 2024, в 01:02

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

Программа (скрипт) для автоматизации торговли Solana

25 апр. 2024, в 00:45

100 руб./в час

Телеграм-Бот для выдачи конфигов VPN (VLESS/Reality)

25 апр. 2024, в 00:32

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

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

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

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

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

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