Нужна помощь с 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>";
Не судите строго... я только учусь(так для себя для общего развития)
Кому интересно можете посмотреть как это работает: тут там регистрация очень простая нужно только логин и пароль...
|
|
| |
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 реализовать Вашу задачу будет совсем просто.
|
|
| |
|