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

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 = 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 комментария

Сергей Соколов @sergiks Куратор тега JavaScript

было бы уважением к участникам форума оформить пример в jsFiddle / CodePen, чтобы сразу посмотреть, как оно работает/не работает.

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

fixeri @fixeri

@Afafks123132132165

if(rays[i].x >= 100){
          rays[i].qq = 1;
        }

if(rays[i].x >= 100){
          rays[i].qq = 0;
        }

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

RAX7 @RAX7

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 = 0; i < rays.length; i++) {
        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) { // вынес из if (rays[i].qq == 0)
          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);

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

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

Сергей Соколов, Ладно

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

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

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

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

Afafks123132132165 @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,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>

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

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

Простите что нет jsfiddle я не понял что то как это сделать там или тип того

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

Как его поставить сюда не вставляется пишет инвалид боди

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

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

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

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

JavaScript

+1 ещё

Простой
Как с помощью js создать прямоугольное соединение двух и более элементов в SVG?
- 1 подписчик
- 10 часов назад
- 67 просмотров
1

ответ
JavaScript

Простой
Как можно соединить 2 массива в 1 без 2 forEach?
- 1 подписчик
- 16 часов назад
- 83 просмотра
1

ответ
JavaScript

Простой
Как фильтровать массив в массиве методом filter?
- 1 подписчик
- 21 час назад
- 74 просмотра
3

ответа
JavaScript

Простой
Как посчитать количество пересечений с помощью метода filter?
- 1 подписчик
- вчера
- 156 просмотров
3

ответа
JavaScript

Простой
Как реализовать логику назад вперед?
- 1 подписчик
- вчера
- 108 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- 24 нояб.
- 149 просмотров
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- 24 нояб.
- 57 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 217 просмотров
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 23 нояб.
- 117 просмотров
1

ответ
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 нояб.
- 738 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

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

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

от 100 000 до 200 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

Создайте макет из Figma в WordPress

27 нояб. 2024, в 09:23

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

JS прелоадер (корректировка) и кастомный JS-модуль для Тильды

27 нояб. 2024, в 09:01

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

Консультация по созданию математических графиков в Cinema 4D

27 нояб. 2024, в 01:38

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

было бы уважением к участникам форума оформить пример в jsFiddle / CodePen, чтобы сразу посмотреть, как оно работает/не работает.
@Afafks123132132165

if(rays[i].x >= 100){ rays[i].qq = 1; }

if(rays[i].x >= 100){ rays[i].qq = 0; }
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 = 0; i < rays.length; i++) { 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) { // вынес из if (rays[i].qq == 0) 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);

Answer 1 · 2020-03-19 22:00:12

Давайте переменным и свойствам осмысленные названия.
Что за 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);

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

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

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

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