Как сделать игру типа wofenshtein 3D?

Question

Afafks123132132165 @Afafks123132132165

Как сделать игру типа wofenshtein 3D?

Я хотел бы сделать игру типа wolfenshtein 3D на js canvas.Но у меня возникла проблемма.Я не знаю как повернуть луч который бросает игрок.Повернуть саму координату конца луча.Луч должен по окружности врщяться ,а игрок должен быть центром окружности.Но я этого реализовать не смог.Да я знаю в интернете есть уроки.Но мне бы хотелось узнать только эту часть.Дальше я сам.Спасибо всем.

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

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

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

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

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

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

Все так просто уау.

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

А знаете я не знаю математику и я над этим месяц думал.

Написано более трёх лет назад
Сергей П @trapwalker

Afafks123132132165, сучувствую. Сейчас же у нас очень трудно найти какую-то информацию. Интернета нет, википедии нет, приходится часами сидеть в бибилиотеке перебирая карточки... постойте, какой нынче век?

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Game</title>
</head>
<body>
<canvas id = "canvas" width = "320" height = "480"></canvas>
<script type="text/javascript">
document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var x = 0;
var y = 0;
var lx = 0;
var ly = 0;
var angle = 0;

function game(){
  lx = Math.cos((angle/180) * Math.PI)*20;
  ly = Math.sin((angle/180) * Math.PI)*20;

  ctx.fillRect(x,y,32,32);
  ctx.beginPath();
  ctx.moveTo(x + 16,y + 16);
  ctx.lineTo(lx,ly);
  ctx.stroke();
  ctx.closePath();

  angle+=1;
}

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

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

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

не работает

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

А не норм

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

ЛОЛ

Написано более трёх лет назад
Сергей П @trapwalker

Afafks123132132165, создайте репозиторий в https://github.com/, положите свою страничку туда с именем index.html, настройте (в настройках) github pages на мастер-ветку и у вас будет свой сайт с этой страничкой в инете доступный всем: имяпользователя.github.io/projectname
Люди смогут делать вам пулл-риквесты и предлагать свои правки кода, своё ревью.
Посмотрите на ютубе ролик git для чайников и это будет одним из самых важных освоенных уроков в вашей зарождающейся карьере программиста.
И да, сейчас, судя по всему, самое время. Не откладывайте.

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

Сергей Паньков, Ок

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

Сергей Паньков, И да слушайте я знаю какой сейчас век но когда не знаешь с чего начать и что тебе вообще надо то тяжело что то узнать.

Написано более трёх лет назад
Сергей П @trapwalker

https://codepen.io/dissimulate/pen/fhjvk
https://codepen.io/Jefitnick/pen/wNEemx

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

Сергей Паньков, Что это?

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

Сергей Паньков, Чувак я знаю я сказал сам сделаю но что-то не получается.

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

Сергей Паньков, Как столкновение сделать?

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

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

Сергей Паньков,

<!DOCTYPE html>
<html>
<head>
  <title>Game</title>
</head>
<body>
<canvas id = "canvas" width = "320" height = "480"></canvas>
<script type="text/javascript">
document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var x = 160;
var y = 240;
var left = 0;
var right = 0;

var rays = [];
var blocks = [];

for(i = 0;i < 100;i++){
  rays.push({lx:0,ly:0,angle:i});
}

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

document.addEventListener("keydown",function(e){
  if(e.keyCode == 65){
    left = 1;
  }

  if(e.keyCode == 68){
    right = 1;
  }
});

document.addEventListener("keyup",function(e){
  if(e.keyCode == 65){
    left = 0;
  }

  if(e.keyCode == 68){
    right = 0;
  }
});

function game(){
  ctx.clearRect(0,0,320,480);

  ctx.fillStyle = "black";

  ctx.fillRect(x,y,32,32);

  for(i in blocks){
    ctx.fillStyle = "purple";
    ctx.fillRect(blocks[i].x,blocks[i].y,32,32);
  }

  for(i in rays){
    rays[i].lx = Math.cos((rays[i].angle/180) * Math.PI)*100 + x + 16;
    rays[i].ly = Math.sin((rays[i].angle/180) * Math.PI)*100 + y + 16;
    
    for(j in blocks){
      if(rays[i].lx + 100 >= blocks[j].x && rays[i].lx <= blocks[j].x+32){
        if(rays[i].ly + 1 >= blocks[j].y && rays[i].ly <= blocks[j].y+32){
          rays[i].lx = rays[i].lx - 32;
          rays[i].ly = rays[i].ly - 32;
        }
      }
    }
    ctx.beginPath();
    ctx.moveTo(x + 16,y + 16);
    ctx.lineTo(rays[i].lx,rays[i].ly);
    ctx.stroke();
    ctx.closePath();

    if(left == 1){
      rays[i].angle-=2;
    }

    if(right == 1){
      rays[i].angle+=2;
    }
  }

  ctx.beginPath();
  ctx.fillStyle = "red";
  ctx.arc(x+16,y+16,100,0,2*Math.PI);
  ctx.stroke();
  ctx.closePath();
}

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

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

Сергей П @trapwalker

Afafks123132132165, Так, стоп. Вам, похоже нужно более методично подойти к вопросу. Поищите обучающие ролики на ютубе, поизучайте js на простых понятных примерах, почитайте книжку, запишитесь на курсы, их много сейчас даже бесплатных. Я понимаю, что сразу хочется сделать Ведьмака или халф-лайф с гравипушкой на худой конец, вот в ыи ходите по таким ресурсам как этот и спрашиваете. Судя по тому, что вы не знаете про тригонометрию, вам надо начинать с простого.

Написано более трёх лет назад
Сергей П @trapwalker

Afafks123132132165,
КУЧА КАКОГО_ТО КОДА

Я не собираюсь ЗДЕСЬ смотреть ваш код. Научитесь пользоваться системой контроля версий и я посмотрю ваш код и сделаю ему ревью.
Сейчас вы суёте доктору какие-то кровавые ошмётки и спрашиваете почему у вас не получается сделать любимому хомячку операцию по удалению аппендицита. Хватит. Не получается -- проявите уважение к помогающим вам людям, извлеките правильный урок, сделайте, чтобы помочь вам было хотя бы не неудобно.

Не вольфинштейн, а системы контроля версий. Не копипаст сюда, а гитхаб или на худой конец codepen.

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

Не могу понять 62 строку

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

https://github.com/Afafkss/Game

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

Сергей Паньков, Помогите пж

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

Сергей Паньков, Я же отправил

Написано более трёх лет назад
Сергей П @trapwalker

Afafks123132132165, 62 строка:
for(j in blocks){

Перебираются все блоки и на каждой итерации текущему блоку назначается имя j.

Переименуйте свой файл в index.html
В настройках (settings) репозитория в разделе Github pages выберите "master branche"

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

Сергей Паньков, Сейчас

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

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

Написано более трёх лет назад
Сергей П @trapwalker

Afafks123132132165, https://afafkss.github.io/Game/

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

Сергей Паньков, А что теперь

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

Сергей Паньков, Ну как бы

Написано более трёх лет назад
Сергей П @trapwalker

Afafks123132132165,
А что теперь

Да ничего.
1. задавай конкретные вопросы что не понятно.
2. я ж не по js специалист, так что отвечу в общих чертах. Лучше нормальные вопроcы пили с тегом js.
3. поизучай курсы и туториалы, ну серьёзно.

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

Сергей Паньков, Ну как реализовать столкновение луча и обекта я на компьютере делаю что то не получается то луч не туда уходит то моргает то еще что вообще не понятно

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

Сергей Паньков, Помогите пожалуйста с этим ну пожалуйста я близок к цели своей

Написано более трёх лет назад
Сергей П @trapwalker

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

Жесть.
Конкретно и развёрнуто задавайте вопросы. С описанием проблематики.
Что у вас за объект? Если окружность, то её задаёт такое уравнение:
x^2+y^2=R^2
Уравнение прямой, проходящей через две точки [X1, Y1], [X2, Y2]:
(x-X1)/(X2-X1)=(y-Y1)/(Y2-Y1).
Решаете это как систему уравнений. После упрощения получится классическое квадратное уравнение. У него от нуля до двух действительных корней. То есть от нуля до двух точек пересечения может быть у прямой и окружности. Вас интересуют только те точки, которые по x укладываются между X1 и X2, а по y между Y1 и Y2 - началом и концом отрезка.
Если такие точки есть, то ваш "луч" пересёк препятствие. Можно выбрать из двух точек ближайшую к одной из точек отрезка (по теореме Пифагора). Именно это и будет входным пулевым отверстием.

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

Сергей Паньков, У меня квадрат.

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

Сергей Паньков, Я думаю как сделать касания со всех сторон.

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

Сергей Паньков, Хочу сделать так что бы когда он касался обекта он останавлвался

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

Сергей Паньков, И как бы упрался в обект

Написано более трёх лет назад
Сергей П @trapwalker
Определить точки пересечения прямой и квадрата ещё проще.
Квадрат -- это четыре отрезка. Если он у вас ещё и ортогонален (его стороны параллельны осям координат), то он задаётся четырьмя числами:
X1, Y1, X2, Y2
Фактически это 4 отрезка:

(X1, Y1)-(X1, Y2)

(X1, Y2)-(X2, Y2)

(X2, Y2)-(X2, Y1)

(X2, Y1)-(X1, Y1)

Просто подставляй их в уравнение прямой:
(x-Xa)/(Xb-Xa)=(y-Ya)/(Yb-Ya)
и получишь координаты точек пересечения:

(X1-Xa)/(Xb-Xa)=(y-Ya)/(Yb-Ya) = (X1, y)

(X2-Xa)/(Xb-Xa)=(y-Ya)/(Yb-Ya) = (X2, y)

(x-Xa)/(Xb-Xa)=(Y1-Ya)/(Yb-Ya) = (x, Y1)

(x-Xa)/(Xb-Xa)=(Y2-Ya)/(Yb-Ya) = (x, Y2)

Их нужно проверить на условия:
Y1<y<Y2
X1<x<X2
Те, что им удовлетворяют -- пересекают стороны квадрата.
Из этих точек находим ближайшую к (Xa, Ya). Она и будет точкой, куда упёрся ваш "луч". А если такой не нашлось, значит не упёрся.

С большой буквы во всех этих уравнениях известные величины. А с маленькой неизвестные.
Написано более трёх лет назад
Afafks123132132165 @Afafks123132132165 Автор вопроса

Сергей Паньков, Я понимаю что я вам надоел что я не знаю математику и так далее.Но не могли бы вы обяснить проще?

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

Сергей Паньков, Нет вы обясняете хорошо но все же не могли бы более понятно обяснть ,а то я ничего не понял.

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

Сергей Паньков, я вам аплодирую.
откуда столько терпения. святой вы человек. или настроение у вас очень хорошее было))

Написано более трёх лет назад
Saboteur @saboteur_kiev Куратор тега Разработка игр

Afafks123132132165, вы ничего и не поймете. То, что вы спрашиваете, это НЕ программирование, это математика. Пока ее не "узнаете", вы не будете понимать объяснений.
Вдобавок, человек потратил уйму времени, вы даже не лайкнули.

Написано более трёх лет назад
Сергей П @trapwalker

Saboteur, жалкая кучка времени по сравнению с месяцами раздумий о том как крутить лучом без синусов. Я думал это какой-нибудь талантливый школьник из деревни, которого чуть подтолкнуть и попрёт.

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

Saboteur, А как?

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

Сергей Паньков, Да камон вот кто бы знал что они нужны js то я выучил но с математикой проблемы

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

Сергей Паньков, Ну тип с кем не бывало одно знаешь одно отстает

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

Saboteur, А понял

Написано более трёх лет назад
Сергей П @trapwalker

Afafks123132132165, хрень какая-то. i откуда-то взялось. Проблема не в математике, а в адском беспорядке в голове.

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

Сергей Паньков, i это я перебираю массив

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

Сергей Паньков, Каждый луч

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

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

Сергей Паньков, Сделал так то же самое но я кое что понял я режу угол думаю как решить это

for(j in blocks){
      if(rays[i].lx >= blocks[j].x && rays[i].ly >= blocks[j].y && rays[i].ly <= blocks[j].y + 32){
        rays[i].radius = 50;
      }else{
        rays[i].radius = 100;
      }

      //if(rays[i].ly > blocks[j].y && rays[i].ly < blocks[j].y + 32){
      //  rays[i].radius = 50;
      //}
    }

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

Afafks123132132165 @Afafks123132132165 Автор вопроса
Сергей Паньков, Вот так работает но моргает странно
for(j in blocks){ if(rays[i].lx >= blocks[j].x || rays[i].ly >= blocks[j].y && rays[i].ly <= blocks[j].y + 32){ rays[i].radius = 50; }else{ rays[i].radius = 100; }
Написано более трёх лет назад
Saboteur @saboteur_kiev Куратор тега Разработка игр

Сергей Паньков,
Проблема не в математике, а в адском беспорядке в голове.

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

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

Сергей Паньков, Незнаю принесет ли вам это радость но я допер как сделать столкноение луча ну один вопросик на хабре был потому что с условием тупанул но спасибо вам вы дали то самое начало)))

Написано более трёх лет назад
Сергей П @trapwalker

Afafks123132132165, я счастлив. Пожалуй напьюсь сегодня по этому поводу.

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

Вот эт ты троль конечно

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

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

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

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

Войти через центр авторизации

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

JavaScript

Простой
Как в map вернуть развернутый массив?
- 1 подписчик
- 2 часа назад
- 55 просмотров
0

ответов
JavaScript

+4 ещё

Простой
Как записать результаты работы цикла Thymeleaf в переменную JavaScript?
- 1 подписчик
- 6 часов назад
- 31 просмотр
1

ответ
JavaScript

+4 ещё

Простой
Как сузить диапазон генерации случайных чисел?
- 1 подписчик
- 7 часов назад
- 147 просмотров
2

ответа
JavaScript

Простой
Как написать функцию, которая принимает цифру и возвращает число прописью?
- 2 подписчика
- 14 часов назад
- 218 просмотров
1

ответ
JavaScript

Средний
Как удалить элемент из массива в local storage по его индексу?
- 2 подписчика
- 16 часов назад
- 186 просмотров
3

ответа
JavaScript

+1 ещё

Средний
Как в консоли Google Chrome, получить имя функции-обработчика конкретного элемента (для `scroll`), чтобы прибить её с помощью `removeEventListener`?
- 1 подписчик
- 18 часов назад
- 29 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как зафиксировать блок модального окна бутстра на iphone, чтоб он не прыгал при свайпах?
- 1 подписчик
- вчера
- 51 просмотр
0

ответов
JavaScript

+2 ещё

Простой
Как разместить и обновлять свой js-скрипт на гитхаб через PHP?
- 1 подписчик
- вчера
- 150 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как получить массив дней месяца, с пн по вс?
- 1 подписчик
- вчера
- 100 просмотров
1

ответ
JavaScript

Средний
Как вывести два поля input при определенном option в select в определенном элементе?
- 1 подписчик
- 08 мая
- 81 просмотр
1

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

JavaScript Developer (backend / fullstack)

Brightdata • Тель-Авив

от 5 500 до 6 500 $

Доработать обмен заказами 1с

11 мая 2024, в 00:19

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

Разработка сайта (верстка)

10 мая 2024, в 23:51

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

Опубликовать приложение в Google play

10 мая 2024, в 23:33

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

Wolfenshtein 3D, как ни странно сделан в 3Д. А просто в canvas без сторонних библиотек у вас 3д воссоздать точно не получится, поэтому лучше используйте к примеру THREE.js там есть Raycaster
twobomb, Давай не умничай иди посмотри
Afafks123132132165, я говорю как есть, не тупи
Afafks123132132165, Именно 3д, точнее "псевдо-3д", ну роли это не меняет, это 3д. Просто эффект 3д получается за счет рейкастинга, вместо привычных нам камер и преобразований матриц которые лежат в основе привычного 3д. Зачем этим замарачиватся, раньше такое делали из-за малой мощности систем, а сейчас такое можно делать просто чтобы получить опыт который врядли где пригодится. Здесь подробно расписывается алгоритм создания подобной игры.
Я не понял, что значит "луч который бросает игрок".

Answer 1 · 2020-03-04 12:43:21

Во-первых, у луча нет конца, только начало. У вас, наверно, отрезок.

x = cos(fi) * R
y = sin(fi) * R

fi - угол в радианах: (градусы разделить 180 и умножить на Pi)
R - радиус.

Если ваш игрок не в нуле координат, то прибавьте его координаты:

x = cos(fi) * R + x_игрока
y = sin(fi) * R + y_игрока

Как сделать игру типа wofenshtein 3D?

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

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

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