JS Банды | Угон машин

lazzarevv · 15.08.2021

Сделал небольшую работу для банд: Угон Машин

Todo: задействовать notify CEF (присутствует в файлах), разнообразить кол-во машин, создать несколько точек спавна машин, перенести весь CEF в один браузер, предусмотреть возвращение к NPC (спавнить байк после сдачи машины), оптимизировать код, другие небольшие изменения.

Геймплей: (1:31 - 4:00 можно скипнуть)

Скачать:

https://drive.google.com/file/d/1hDHYQfB-ovoUdAGtAjGMLJl-OP_ZJp6w/view?usp=sharing

Lev Angel · 15.08.2021

Респект!

В CEF я вижу все же без вью обошелся. В чем там была изначально проблема?

lazzarevv · 15.08.2021

Lev Angel сказал(а):
Респект!

В CEF я вижу все же без вью обошелся. В чем там была изначально проблема?

Изначально мой скрипт на чистом js работал верно, но я это не сразу понял. Дело в том, что скрипт цефки запускался сам по себе, вне зависимости от того какое у него состояние (active или !active). Поэтому получалось так, что бар при заходе на сервер уже заполнялся сам по себе. Эту проблему мне пока что решить не удалось (поэтому и не задействовал notify CEF, но есть пара идей, сегодня попробую)

shevdev · 15.08.2021

lazzarevv сказал(а):
Изначально мой скрипт на чистом js работал верно, но я это не сразу понял. Дело в том, что скрипт цефки запускался сам по себе, вне зависимости от того какое у него состояние (active или !active). Поэтому получалось так, что бар при заходе на сервер уже заполнялся сам по себе. Эту проблему мне пока что решить не удалось (поэтому и не задействовал notify CEF, но есть пара идей, сегодня попробую)

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

К примеру:
onClick={handlerFunction} - вызывается сразу.
onClick={() => handlerFunction} - вызывется при клике, за счет колбэка.

Возможно это поможет, если нет то извините. Респект за контент

lazzarevv · 15.08.2021

shevdev сказал(а):
Я поленился залезть в код, но прочитав проблему, могу выдвинуть предположение, что это связано с тем, что функция которое отвечает за заполнение вызывается сразу, вам нужен колбэк.

К примеру:
onClick={handlerFunction} - вызывается сразу.
onClick={() => handlerFunction} - вызывется при клике, за счет колбэка.

Возможно это поможет, если нет то извините. Респект за контент

спасибо, буду пробовать

Lev Angel · 15.08.2021

А когда объявляешь ивенты подобным образом, разве их названия не должны быть в кавычках?

JavaScript:

mp.events.add({
    "toggleTextBrowser": (bool) => {
        textBrowser.active = bool
    },

    "toggleMinigameBrowser": (bool) => {
        minigameBrowser.active = bool
    },

    "toggleNotifyBrowser": (bool) => {
        notifyBrowser.active = bool
    }
})

или это равнозначная запись?

lazzarevv · 15.08.2021

Lev Angel сказал(а):
А когда объявляешь ивенты подобным образом, разве их названия не должны быть в кавычках?

JavaScript:

mp.events.add({ "toggleTextBrowser": (bool) => { textBrowser.active = bool }, "toggleMinigameBrowser": (bool) => { minigameBrowser.active = bool }, "toggleNotifyBrowser": (bool) => { notifyBrowser.active = bool } })

или это равнозначная запись?

вообще то должны. То у меня видимо уже голова не фурычила. Интересно то, что оно работало

Drogo · 15.08.2021

Lev Angel сказал(а):
А когда объявляешь ивенты подобным образом, разве их названия не должны быть в кавычках?

JavaScript:

mp.events.add({ "toggleTextBrowser": (bool) => { textBrowser.active = bool }, "toggleMinigameBrowser": (bool) => { minigameBrowser.active = bool }, "toggleNotifyBrowser": (bool) => { notifyBrowser.active = bool } })

или это равнозначная запись?

Только сложносоставные названия по типу "GANG::UGON_AUTO", те которые без знаков можно писать без кавычек, так как тут действует правило именования полей объекта

Drogo · 15.08.2021

lazzarevv сказал(а):
вообще то должны. То у меня видимо уже голова не фурычила. Интересно то, что оно работало

Не должны, все правильно

lazzarevv · 15.08.2021

Drogo сказал(а):
Не должны, все правильно

буду знать)

lazzarevv · 15.08.2021

upd:

JavaScript:

let btn = document.getElementById('btn')
let bar = document.getElementById('pr__bar')
let width = 50
let value = 0
bar.style.width = width + '%'

function barState() {
    function a() {
        let id = setInterval(() => {
            width -= 1
            if (width <= 0) {
                width = 0
            } else if (width >= 75) {
                clearInterval(id)
                mp.trigger('fourthStage::CLIENT')
            }
            bar.style.width = width + '%'
        }, 200)
    }

    btn.addEventListener('click', () => {
        if (value <= 1) {
            a()
        }
        value++
        width += 5
    })
}

barState()

Теперь мини-игра начинается при первом кликке. С этого момента начинается убывание бара.

Drogo · 15.08.2021

lazzarevv сказал(а):
Сделал небольшую работу для банд: Угон Машин

Todo: задействовать notify CEF (присутствует в файлах), разнообразить кол-во машин, создать несколько точек спавна машин, перенести весь CEF в один браузер, предусмотреть возвращение к NPC (спавнить байк после сдачи машины), оптимизировать код, другие небольшие изменения.

Геймплей: (1:31 - 4:00 можно скипнуть)

Скачать:

https://drive.google.com/file/d/1hDHYQfB-ovoUdAGtAjGMLJl-OP_ZJp6w/view?usp=sharing

Значит такс, в данном месте я бы не рекомендовал индексировать созданные колшейпы по id так как намного безопаснее сохранять ссылки на эти колшейпы в массиве или объекте, а тем более переназначать id вручную!!!

JavaScript:

mp.events.add('fourthStage::CLIENT', () => {
    mp.events.callRemote('unlockVeh')
    colshape.destroy()
    blip.destroy()

    colshape = mp.colshapes.newSphere(3637.214, 3757.952, 28.5164, 5, localPlayer.dimension)
    colshape.id = 4
    blip = mp.blips.new(0, new mp.Vector3(3637.214, 3757.952, 28.5164),
    {
        name: 'Сдача машин',
        color: 60,
    })
    blip.setRoute(true)
    mp.events.call('toggleMinigameBrowser', false)
    mp.events.call('unbindE')
})

JavaScript:

mp.events.add('playerEnterColshape', (colshape) => {
    switch (colshape.id) {
        case 1 :
            mp.events.call('toggleTextBrowser', true)
            if (first) {
                mp.events.call('bindBotKey')
            }
            first = false
            break

        case 2 :
            blip.destroy()
            colshape.destroy()
            mp.events.callRemote('thirdStage::SERVER')
            mp.events.call('thirdStage::CLIENT')
            break

        case 3 :
            mp.events.call('toggleTextBrowser', true)
            mp.events.call('bindCarKey')
            break

        case 4 :
            mp.events.callRemote('fourthStage::SERVER')
            blip.destroy()
            colshape.destroy()
            first = true
    }
})

Тут у тебя неиспользованный i и ты назначаешь бинд ивентами. Это не плохо, но лаконичнее смотрится, когда ты просто объявляешь бинды, а условием срабатывания будет какая-нибудь bool переменная

JavaScript:

let i = 0

mp.events.add('bindBotKey', () => {
    mp.keys.bind(0x45, true, function() {
        mp.events.callRemote('firstStage::SERVER')
    })
})

mp.events.add('bindCarKey', () => {
    mp.keys.bind(0x45, true, function() {
        mp.events.call('toggleMinigameBrowser', true)
        mp.gui.cursor.show(true, true)
    })
})

mp.events.add('unbindE', () => {
    mp.keys.unbind(0x45, true)
    mp.gui.cursor.show(false, false)
})

Если ты представляешь работу по определенной теме, то старайся приводить весь код в порядок и не оставлять лишних частей, таких как скрипт на noclip

Здесь ты мог так же записать объектом

JavaScript:

mp.events.add('default::CLIENT', () => {
    let megaPed = mp.peds.new(mp.game.joaat('ig_benny'), new mp.Vector3(33.251, -1764.188, 29.313), -300, localPlayer.dimension)
    let humanPed = mp.peds.new(mp.game.joaat('ig_benny'), new mp.Vector3(3637.214, 3757.952, 28.5164), -200, localPlayer.dimension)
})

mp.events.add('firstStage::CLIENT', () => {
    colshape = mp.colshapes.newSphere(33.251, -1764.188, 29.313, 2, localPlayer.dimension)
    colshape.id = 1
})

mp.events.add('secondStage::CLIENT', () => {
    colshape = mp.colshapes.newSphere(97.254, -1828.755, 25.945, 2, localPlayer.dimension)
    colshape.id = 2
    blip = mp.blips.new(0, new mp.Vector3(97.254, -1828.755, 25.945),
    {
        name: 'Мотоцикл',
        color: 60,
    })
})

mp.events.add('thirdStage::CLIENT', () => {
    colshape = mp.colshapes.newSphere(118.597, -705.733, 33.125, 2, localPlayer.dimension)
    colshape.id = 3
    blip = mp.blips.new(0, new mp.Vector3(118.597, -705.733, 33.125),
    {
        name: 'Машина',
        color: 60,
    })
    blip.setRoute(true)
})

JavaScript:

mp.events.add({
  "default::CLIENT": () => {
    let megaPed = mp.peds.new(mp.game.joaat("ig_benny"), new mp.Vector3(33.251, -1764.188, 29.313), -300, localPlayer.dimension);
    let humanPed = mp.peds.new(mp.game.joaat("ig_benny"), new mp.Vector3(3637.214, 3757.952, 28.5164), -200, localPlayer.dimension);
  },
  "firstStage::CLIENT": () => {
    colshape = mp.colshapes.newSphere(33.251, -1764.188, 29.313, 2, localPlayer.dimension);
    colshape.id = 1;
  },
  "secondStage::CLIENT": () => {
    colshape = mp.colshapes.newSphere(97.254, -1828.755, 25.945, 2, localPlayer.dimension);
    colshape.id = 2;
    blip = mp.blips.new(0, new mp.Vector3(97.254, -1828.755, 25.945), {
      name: "Мотоцикл",
      color: 60,
    });
  },
  "thirdStage::CLIENT": () => {
    colshape = mp.colshapes.newSphere(118.597, -705.733, 33.125, 2, localPlayer.dimension);
    colshape.id = 3;
    blip = mp.blips.new(0, new mp.Vector3(118.597, -705.733, 33.125), {
      name: "Машина",
      color: 60,
    });
    blip.setRoute(true);
  },
  "fourthStage::CLIENT": () => {
    mp.events.callRemote("unlockVeh");
    colshape.destroy();
    blip.destroy();

    colshape = mp.colshapes.newSphere(3637.214, 3757.952, 28.5164, 5, localPlayer.dimension);
    colshape.id = 4;
    blip = mp.blips.new(0, new mp.Vector3(3637.214, 3757.952, 28.5164), {
      name: "Сдача машин",
      color: 60,
    });
    blip.setRoute(true);
    mp.events.call("toggleMinigameBrowser", false);
    mp.events.call("unbindE");
  },
  playerEnterColshape: (colshape) => {
    switch (colshape.id) {
      case 1:
        mp.events.call("toggleTextBrowser", true);
        if (first) {
          mp.events.call("bindBotKey");
        }
        first = false;
        break;

      case 2:
        blip.destroy();
        colshape.destroy();
        mp.events.callRemote("thirdStage::SERVER");
        mp.events.call("thirdStage::CLIENT");
        break;

      case 3:
        mp.events.call("toggleTextBrowser", true);
        mp.events.call("bindCarKey");
        break;

      case 4:
        mp.events.callRemote("fourthStage::SERVER");
        blip.destroy();
        colshape.destroy();
        first = true;
    }
  },
  playerExitColshape: (colshape) => {
    switch (colshape.id) {
      case 1:
        mp.events.call("toggleTextBrowser", false);
        mp.events.call("unbindE");
        break;

      case 3:
        mp.events.call("unbindE");
        mp.events.call("toggleTextBrowser", false);
        break;
    }
  },
});

lazzarevv · 15.08.2021

Drogo сказал(а):

Значит такс, в данном месте я бы не рекомендовал индексировать созданные колшейпы по id так как намного безопаснее сохранять ссылки на эти колшейпы в массиве или объекте, а тем более переназначать id вручную!!!

JavaScript:

mp.events.add('fourthStage::CLIENT', () => {
    mp.events.callRemote('unlockVeh')
    colshape.destroy()
    blip.destroy()

    colshape = mp.colshapes.newSphere(3637.214, 3757.952, 28.5164, 5, localPlayer.dimension)
    colshape.id = 4
    blip = mp.blips.new(0, new mp.Vector3(3637.214, 3757.952, 28.5164),
    {
        name: 'Сдача машин',
        color: 60,
    })
    blip.setRoute(true)
    mp.events.call('toggleMinigameBrowser', false)
    mp.events.call('unbindE')
})

JavaScript:

mp.events.add('playerEnterColshape', (colshape) => {
    switch (colshape.id) {
        case 1 :
            mp.events.call('toggleTextBrowser', true)
            if (first) {
                mp.events.call('bindBotKey')
            }
            first = false
            break

        case 2 :
            blip.destroy()
            colshape.destroy()
            mp.events.callRemote('thirdStage::SERVER')
            mp.events.call('thirdStage::CLIENT')
            break

        case 3 :
            mp.events.call('toggleTextBrowser', true)
            mp.events.call('bindCarKey')
            break

        case 4 :
            mp.events.callRemote('fourthStage::SERVER')
            blip.destroy()
            colshape.destroy()
            first = true
    }
})

Тут у тебя неиспользованный i и ты назначаешь бинд ивентами. Это не плохо, но лаконичнее смотрится, когда ты просто объявляешь бинды, а условием срабатывания будет какая-нибудь bool переменная

JavaScript:

let i = 0

mp.events.add('bindBotKey', () => {
    mp.keys.bind(0x45, true, function() {
        mp.events.callRemote('firstStage::SERVER')
    })
})

mp.events.add('bindCarKey', () => {
    mp.keys.bind(0x45, true, function() {
        mp.events.call('toggleMinigameBrowser', true)
        mp.gui.cursor.show(true, true)
    })
})

mp.events.add('unbindE', () => {
    mp.keys.unbind(0x45, true)
    mp.gui.cursor.show(false, false)
})

Если ты представляешь работу по определенной теме, то старайся приводить весь код в порядок и не оставлять лишних частей, таких как скрипт на noclip

Здесь ты мог так же записать объектом

JavaScript:

mp.events.add('default::CLIENT', () => {
    let megaPed = mp.peds.new(mp.game.joaat('ig_benny'), new mp.Vector3(33.251, -1764.188, 29.313), -300, localPlayer.dimension)
    let humanPed = mp.peds.new(mp.game.joaat('ig_benny'), new mp.Vector3(3637.214, 3757.952, 28.5164), -200, localPlayer.dimension)
})

mp.events.add('firstStage::CLIENT', () => {
    colshape = mp.colshapes.newSphere(33.251, -1764.188, 29.313, 2, localPlayer.dimension)
    colshape.id = 1
})

mp.events.add('secondStage::CLIENT', () => {
    colshape = mp.colshapes.newSphere(97.254, -1828.755, 25.945, 2, localPlayer.dimension)
    colshape.id = 2
    blip = mp.blips.new(0, new mp.Vector3(97.254, -1828.755, 25.945),
    {
        name: 'Мотоцикл',
        color: 60,
    })
})

mp.events.add('thirdStage::CLIENT', () => {
    colshape = mp.colshapes.newSphere(118.597, -705.733, 33.125, 2, localPlayer.dimension)
    colshape.id = 3
    blip = mp.blips.new(0, new mp.Vector3(118.597, -705.733, 33.125),
    {
        name: 'Машина',
        color: 60,
    })
    blip.setRoute(true)
})

JavaScript:

mp.events.add({
  "default::CLIENT": () => {
    let megaPed = mp.peds.new(mp.game.joaat("ig_benny"), new mp.Vector3(33.251, -1764.188, 29.313), -300, localPlayer.dimension);
    let humanPed = mp.peds.new(mp.game.joaat("ig_benny"), new mp.Vector3(3637.214, 3757.952, 28.5164), -200, localPlayer.dimension);
  },
  "firstStage::CLIENT": () => {
    colshape = mp.colshapes.newSphere(33.251, -1764.188, 29.313, 2, localPlayer.dimension);
    colshape.id = 1;
  },
  "secondStage::CLIENT": () => {
    colshape = mp.colshapes.newSphere(97.254, -1828.755, 25.945, 2, localPlayer.dimension);
    colshape.id = 2;
    blip = mp.blips.new(0, new mp.Vector3(97.254, -1828.755, 25.945), {
      name: "Мотоцикл",
      color: 60,
    });
  },
  "thirdStage::CLIENT": () => {
    colshape = mp.colshapes.newSphere(118.597, -705.733, 33.125, 2, localPlayer.dimension);
    colshape.id = 3;
    blip = mp.blips.new(0, new mp.Vector3(118.597, -705.733, 33.125), {
      name: "Машина",
      color: 60,
    });
    blip.setRoute(true);
  },
  "fourthStage::CLIENT": () => {
    mp.events.callRemote("unlockVeh");
    colshape.destroy();
    blip.destroy();

    colshape = mp.colshapes.newSphere(3637.214, 3757.952, 28.5164, 5, localPlayer.dimension);
    colshape.id = 4;
    blip = mp.blips.new(0, new mp.Vector3(3637.214, 3757.952, 28.5164), {
      name: "Сдача машин",
      color: 60,
    });
    blip.setRoute(true);
    mp.events.call("toggleMinigameBrowser", false);
    mp.events.call("unbindE");
  },
  playerEnterColshape: (colshape) => {
    switch (colshape.id) {
      case 1:
        mp.events.call("toggleTextBrowser", true);
        if (first) {
          mp.events.call("bindBotKey");
        }
        first = false;
        break;

      case 2:
        blip.destroy();
        colshape.destroy();
        mp.events.callRemote("thirdStage::SERVER");
        mp.events.call("thirdStage::CLIENT");
        break;

      case 3:
        mp.events.call("toggleTextBrowser", true);
        mp.events.call("bindCarKey");
        break;

      case 4:
        mp.events.callRemote("fourthStage::SERVER");
        blip.destroy();
        colshape.destroy();
        first = true;
    }
  },
  playerExitColshape: (colshape) => {
    switch (colshape.id) {
      case 1:
        mp.events.call("toggleTextBrowser", false);
        mp.events.call("unbindE");
        break;

      case 3:
        mp.events.call("unbindE");
        mp.events.call("toggleTextBrowser", false);
        break;
    }
  },
});

огромное спасибо за разбор, все учту

Verdiji · 15.08.2021

Полезно. спасибо что поделился!

JS Банды | Угон машин

lazzarevv

Middle Developer

Lev Angel

Developer

lazzarevv

Middle Developer

shevdev

Junior Developer

lazzarevv

Middle Developer

Lev Angel

Developer

lazzarevv

Middle Developer

Drogo

Middle Developer

Drogo

Middle Developer

lazzarevv

Middle Developer

lazzarevv

Middle Developer

Drogo

Middle Developer

lazzarevv

Middle Developer

Verdiji

Junior Developer