Пятница, 19 Апреля 2024, 18:06

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 1
  • 1
Форум игроделов » Программирование » Скриптовые языки программирования » Нужна помощь с JavaScript (анимация)
Нужна помощь с JavaScript
johniksilverДата: Четверг, 02 Марта 2017, 15:25 | Сообщение # 1
был не раз
Сейчас нет на сайте
Доброго времени суток.
Ребят помогите разобраться:
Учу языки программирования php, JS и т.д и для практики решил сделать браузерную игру...
Ну уже много чего сделал... и вот появилась у меня идея, сделать охоту в игре похожей на проект "dwar.ru"... Но без использования FLASH.(кто не знает объясню на пальцах как она там реализована: есть некоторое поле с видом сверху и по полю бегают монстрики, при нажатие на них ты нападаешь на монстра и начинается бой...) вот меня интересует сама механика как они перемещаются по полю рандомно останавливаются или меняют направление движения.. вроде придумал конструкцию как это можно реализовать(скрипты покажу ниже), но столкнулся с такой проблемой : при переходе между "вкладками" игры (в локацию, в магазин и обратно в охоту)(реализовано это с помощью AJAX без обновления страницы(на одной и той же странице в один див по необходимости подключаются файлы с локацией или магазином или охотой) скрипт JS (который отвечает за передвижение монстров) парится и монстры начинают по карте прыгать с невероятной скоростью... после обновления страницы всё опять работает хорошо и монстры более менее плавно перемещаются. ..

[b]Код который двигает монстров по локации:[/b]

Код

    function Str(napravlenie, Id, pozX1, pozY1) {
    var b = 1;
    var i = 1;
    var napr = parseFloat(napravlenie);
    var timerId = setInterval(function(){
             b++;
            window["img"+b] = document.getElementById(Id);
            if(b<200){      
                if(napr == "1"){
                    i = i-1.2; x = pozX1 + i;
                    if(x > 1){
                    window["img"+b].style.top = x + 'px';
                    }
                }
                if(napr == "2"){
                    i = i+1.2; x = pozY1 + i;
                    if(x < 1000){
                    window["img"+b].style.left = x + 'px';
                    }
                }
                if(napr == "3"){
                    i = i+1.2; x = pozX1 + i;
                    if(x < 1000){
                    window["img"+b].style.top = x + 'px';
                    }                  
                }      
                if(napr == "4"){
                    i = i-1.2; x = pozY1 + i;
                    if(x > 1){
                    window["img"+b].style.left = x + 'px';  
                    }
                }          
            }
            else{
                console.log('Перемещение окончено');
                clearInterval(timerId);
                setTimeout(rand, 1000, Id);
                }
    },100)
};  

function rand(Id){
    function getRandomInRange(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    var Rand2 = getRandomInRange(1, 4);
    var Rand3 = getRandomInRange(1, 1000);
    var img = document.getElementById(Id);
    var pozX = img.offsetTop;
    var pozY = img.offsetLeft;
        pozX= parseFloat(pozX);
        pozY= parseFloat(pozY);
    console.log('Я в данный момнт  ' +pozX+'x'+pozY+' буду идти ->'+Rand2);
    if(Rand2 == 1){ pozX2 = pozX - 100;
    var napr = "1"; setTimeout(Str, 10, napr,Id,pozX,pozY);
    }
    if(Rand2 == 2){     pozX2 = pozX + 100;
    var napr = "3"; setTimeout(Str, 10, napr,Id,pozX,pozY);
    }
    if(Rand2 == 3){ pozY2 = pozY - 100;
    var napr = "2"; setTimeout(Str, 10, napr,Id,pozX,pozY);
    }
    if(Rand2 == 4){pozY2 = pozY + 100;  
    var napr = "4"; setTimeout(Str, 10, napr,Id,pozX,pozY);
    }
};    


Код который получает из БД монстрика и отправляет его на локацию:

Код
$i=100;
        $LoadMonster = mysqli_query($link,"SELECT * FROM monsters WHERE M_LOCATION='$users2[location]'");
        while($LoadMonster2 = mysqli_fetch_assoc($LoadMonster)){
            $rand = rand(1,4);
            $name = $LoadMonster2[M_ID];
            $style = (file_exists("../images/monsters/$LoadMonster2[MONSTER_ID].gif"))?"
                       <img  src='../images/monsters/$LoadMonster2[MONSTER_ID].gif' style='width:40px; height:40px;' >
                       ":
                        "<img src='../images/monsters/zombie_walk.gif' style='width:40px; height:40px;' >
                       ";
            $style2 = "
           <a class='test' id='$LoadMonster2[M_ID]'style='position:absolute;top:".$LoadMonster2[poz_x]."px;left:".$LoadMonster2[poz_y]."px;cursor: pointer; '>
                       <input type='hidden' value='monster'><br><br>
           <center><strong><small>$LoadMonster2[MONSTER_NAME] [$LoadMonster2[M_LVL]]</small></strong></center>"
            .$style."</a>";
            $interval = "
           setTimeout(function(){
           var napravlenie = '$rand';
           var Id$name = \"$name\";
           setTimeout(Str, $i, napravlenie, Id$name, ".$LoadMonster2[poz_x].",".$LoadMonster2[poz_y]." );
           }, $i);";
           
            $i++;
           
            $allStyle = $allStyle.$style2;
            $allInterval = $allInterval.$interval;
        }
       
        echo $allStyle;
        echo"<script tyle='text/javascript'>".$allInterval."</script>";


Не судите строго... я только учусь(так для себя для общего развития) blink

Кому интересно можете посмотреть как это работает: тут там регистрация очень простая нужно только логин и пароль...
lvovandДата: Четверг, 02 Марта 2017, 16:00 | Сообщение # 2
старожил
Сейчас нет на сайте
на первый взгляд
setInterval(function(){...},100)

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


Разработка и продвижение сайтов. Дизайн
johniksilverДата: Четверг, 02 Марта 2017, 16:15 | Сообщение # 3
был не раз
Сейчас нет на сайте
нет... ну это трудно объяснить как они бегаю... просто при корректной работе анимации они плавно двигаются по заданному направлению... а когда начинает глючить они прыгают на большие расстояния несколько раз в секунду... и представьте как это выглядит когда на одной карте не 1 а 20 вонстров.. это просто превращается в кашу из спрайтов...
lvovandДата: Четверг, 02 Марта 2017, 16:55 | Сообщение # 4
старожил
Сейчас нет на сайте
Цитата johniksilver ()
ну это трудно объяснить как они бегаю...

посмотрел, дело не в скорости перемещения а в расчете координат

я бы причесал вначале код, например
napr = parseFloat(napravlenie), float там не нужен, parseInt бы вполне подошел , но дальше сравнение идет со строкой,
if на switch заменить будет логичнее,
и для top и left взял разные переменные
чтобы для объекта было бы
style.left = x + dx;
style.top = y + dy;

было бы нагляднее, и ошибку легче найти


Разработка и продвижение сайтов. Дизайн
AssasinДата: Четверг, 02 Марта 2017, 17:32 | Сообщение # 5
web-coder
Сейчас нет на сайте
Подозреваю что, каждый раз как подгружается охота в память js добавляются новые таймеры setTimeout(), которые делают рывки в движениях. Было бы неплохо задавать им идентификатор и очищать его при новой подгрузке охоты clearInterval()
johniksilverДата: Четверг, 02 Марта 2017, 18:30 | Сообщение # 6
был не раз
Сейчас нет на сайте
А как по вашему такой подход к механике их передвижения нормальный или можно как то проще сделать? просто есть идея: монстры это у меня gif анимации, у которых есть положение на карте(координаты X и Y) но изначально они у меня просто стояли... вот хочу их заставить двигаться... (ну чтоб охота как-то живее выглядела) долго над над этим думал(очень долго) вот реализовал вот так с помощью JS ... может у вас есть другие идеи как это можно реализовать?

Добавлено (02 марта 2017, 18:30)
---------------------------------------------
Assasin - интервал чищу каждый раз как подключаю этот файлик с JS кодом для движения... я уже даже извратился с помощью php каждый раз как захожу в охоту я чищу див в котором лежит JS код и подгружаю его туда заново...

Код
function scr(){
    
   $('#scr').html("");
    $.post("/123.php", {act: "Load", log : login,},    
    function (result) {if(result.length > 10){$('#scr').html(result);};}
  );
}


меня вот смущает эта часть:

Код
function Str(napravlenie, Id, pozX1, pozY1)


а именно то что в функцие используются одни и те же переменные, и каждый монстрик обращается к этой функцие 10 раз в секунду(ну это что бы их движение было более мение плавное) , а монстриков этих к примеру 10, в итоге к этой функцие каждую секунду 10 обращений от 10-ти разных монстриков.. может из-за этого оно парится? хотя когда в-первый раз загружаешь страницу всё работает нормально


Сообщение отредактировал johniksilver - Четверг, 02 Марта 2017, 18:36
Code_BryantДата: Воскресенье, 05 Марта 2017, 18:33 | Сообщение # 7
частый гость
Сейчас нет на сайте
Возможно, оффтоп, но посмотрите в направлении Phaser JS фреймворка:
https://phaser.io/

Огромное количество уроков по любой теме и большое комьюнити - всегда найдете ответ на любой вопрос.

При помощи Phaser реализовать Вашу задачу будет совсем просто.


Форум игроделов » Программирование » Скриптовые языки программирования » Нужна помощь с JavaScript (анимация)
  • Страница 1 из 1
  • 1
Поиск:

Все права сохранены. GcUp.ru © 2008-2024 Рейтинг