1 Тема від Faraon

  • Faraon
  • Faraon
  • Користувач
  • Поза форумом
  • Дата реєстрації: 28.05.2013
  • Повідомлень: 697
    • Репутація: 59

Тема: Клон agar.io :)

Привіт всім. Можливо хтось чув про браузерку agar.io, якщо ні то це не страшно... можете зайти на пять хвилин і суть гри ви зрозумієте. Надумав зробити клона. (для себе)
Здається все просто... потрібно тільки перевіряти на переміщення курсора подією onmousemove і якщо таки курсор рухається то викликати функцію в якій буде задано переміщення картинки по заданим координатам, але щось піщло не так... і через це картинка стоїть нерухома, а мала б рухатися в сторону координат 200 300. Чому так?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><<<Agar>>></title>
<link rel="shortcut icon" href="img/icon.png" type="image/x-icon">
<link rel="stylesheet" href="index.css" type="text/css">
<script type="text/javascript" src="jquery/jquery-latest.js"></script>
</head>
<body onmousemove="moving()">
<img src="img/46509.png" name="user" id="userID">
<script>
function moving()
{
     $( "#userID" ).animate({
        left: 200,
        top: 300,
    }, 5000);
}
</script>

</body>
</html>
Подякували: leofun01, Monolith, ostap34PHP3

2 Відповідь від 221VOLT Востаннє редагувалося 221VOLT (29.02.2016 22:08:52)

  • 221VOLT
  • 221VOLT
  • ♥ pattern matching
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 26.09.2015
  • Повідомлень: 2 719
    • Репутація: 1876

Re: Клон agar.io :)

можливо, вся справа у алгоритмах ---
спробуйте створити собі міні-приклад на pure js --

1) обєкт по-замовчуванню розміщений по координатах х,у
2) при руху курсора мишки -- отримуємо нові координати х1,у1
3) з визначеною швидкістю за певний період часу наш обєкт рухається з координат x,y до координат х1,у1

+ пізніше сюди ще добавимо пізніше відправлення на сервер даних - швидкість і напрям руху - для мультиплеєра

Подякували: Monolith1

221VOLT вебсайт

3 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 617
    • Репутація: 13330

Re: Клон agar.io :)

Додайте в css

#user {
  position:relative;
}
Подякували: 221VOLT, Monolith, Faraon, ostap34PHP4

koala вебсайт

4 Відповідь від 221VOLT Востаннє редагувалося 221VOLT (29.02.2016 22:36:15)

  • 221VOLT
  • 221VOLT
  • ♥ pattern matching
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 26.09.2015
  • Повідомлень: 2 719
    • Репутація: 1876

Re: Клон agar.io :)

koala написав:

Додайте в css

#user {
  position:relative;
}

вау, так ви - телепат)))

як ви дізналися що у 

<link rel="stylesheet" href="index.css" type="text/css">

немає 

#user {
  position:relative;
}

???


----------

справа все ж у алгоритмах --- малювати зручніше на канвасі --- інакше ви будете у багато разів частіше звертатися до DOM - і рухати всі картинки-юзерів, і перевіряти їх наявність...

для прикладу - 2 юзери --- у вас 2 картинки, або один елемент канвас,,
коли у вас 300 юзерів --- у вас 300 картинок, або один канвас, і тд

Подякували: koala, ostap34PHP2

221VOLT вебсайт