Напишите простую 3D-игру-стрелялку с помощью three.js

внешний интерфейс игра three.js

Эта маленькая игра очень проста и состоит из 3-х частей. 1 плоскость (корт), 1 сфера (футбол) и куб (ворота).

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

При нажатии пробела игра может быть запущена. После запуска игры камера переключится на перед воротами, и ворота начнут двигаться влево и вправо. Все, что вам нужно сделать, это ударить мячом по движущимся воротам. Кнопка J — это кнопка броска.Нажмите и не отпускайте кнопку J, и справа от футбольного мяча появится выдвижная желтая полоса... Это для имитации силы управления броском в других играх.Чем длиннее это, тем больше сила. Просто нажмите J, чтобы бить низким мячом из центра, W+J, чтобы бить высоким мячом из центра, A+J, чтобы бить с левого горизонта, A+W+J, чтобы бить высоким мячом слева. , и клавиша D справа такая же. Вот краткое описание того, как работает игра.

Сила контроля

Первый - ключ прослушивателя событий в классе. Мы устанавливаем переменную сильную для представления прочности, а начальное значение равно 0. Затем мы считаем, что бар выполнения не может быть бесконечно большим, а максимальное значение 15 должно быть установлено. Сначала решите проблему контроля масштабирования шкалы прогресса, то есть для реализации влияния сильного перехода от 0 до 15, а затем от 15 до 0, а затем петля. Добавьте длинный () метод и короткий () метод. Конечно, в методе есть другие операции, пропустить его первым

        function long(){
            setTimeout(function(){
                strong += 1
            },100)
        }
         function short(){
            setTimeout(function(){
                strong -= 1
            },100)
        }

Сначала я думал, что при нажатии клавиши J сначала выполняется метод long(), а затем, когда сильное значение больше или равно 15, можно выполнять короткий метод. так

        switch(e.keyCode){
            case 74:
                if(strong>=15){
                    short()
                }
                else{
                    long()
                }
            break;
        }

Но я обнаружил, что во время теста это было невозможно, потому что, когда strong равен 15, выполняется short(), а после того, как strong становится равным 14, он продолжает выполнять long(), На самом деле, strong сначала меняется с 0 на 15, а затем 14 15 14 15 петель. Итак, здесь я добавляю состояние блокировки, начальное значение равно false.

     switch(e.keyCode){
            case 74:
                if(strong>=15){
                    lock = true
                    short()
                }
                else{
                    lock ? short() : long()
                }
            break;
        }

Когда strong больше или равен 15, блокировка становится истинной.В коротком методе, когда strong равен 0, измените значение блокировки на false.

Затем мы показываем изменение сильного на странице и устанавливаем ось Z куба на сильное/100, чтобы динамически изменять высоту куба.

Движение ворот и футбол

Движение ворот фиксируется с фиксированной скоростью.Движение ворот осуществляется за счет изменения положения осей ворот X, Y и Z. Когда положение ворот по оси Y больше определенного значения, он движется вправо. Двигайтесь влево, когда положение оси Y меньше определенного значения. Принцип движения мяча такой же, как и у ворот, но я добавил влияние силы на скорость мяча и вращение мяча. Вращение футбольного мяча легко и может быть достигнуто путем изменения вращения. Воздействие силы на футбол Я сделал здесь лишь небольшую часть, то есть чем больше сила, тем быстрее будет летать мяч и тем дальше он будет лететь. Добавьте метод setInterval и объявите переменную times в этом методе, которая используется для определения того, сколько раз этот setInterval выполняется.

        let shootBall = setInterval(function(){
            time = time + 0.5
            if(time == strong){
                clearInterval(shootBall)
            }
            sphere.rotation.x += 1;
            sphere.position.x += strong/100;
        },100)

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

Стиль съемки и обнаружение столкновений

Направление и высота выстрела контролируются комбинацией кнопок, что достигается добавлением keyStatus, Это не упоминалось в моем предыдущем введении. Объявите переменную ShootType, и тогда различные методы съемки будут иметь свой собственный уникальный тип съемки, отслеживайте клавишу съемки во время нажатия клавиши и, когда клавиша J будет отпущена, определите тип съемки для управления методом съемки.

Об обнаружении столкновений судят по осям X, Y, Z ворот и футбольного мяча. Во время полета мяча засчитывается гол, если обнаружено столкновение.

Прикрепите адрес загрузкиGitHub.com/Лесли233/3…

Категории