Skocz do zawartości

  • 👋 Witaj na MPCForum!

    Przeglądasz forum jako gość, co oznacza, że wiele świetnych funkcji jest jeszcze przed Tobą! 😎

    • ✅ Pełny dostęp do działów i ukrytych treści
    • ✅ Możliwość pisania i odpowiadania w tematach
    • ✅ System prywatnych wiadomości
    • ✅ Zbieranie reputacji i rozwijanie swojego profilu
    • ✅ Członkostwo w jednej z największych społeczności graczy

    👉 Dołączenie zajmie Ci mniej niż minutę – a zyskasz znacznie więcej!

    Zarejestruj się teraz

[Tutorial] Ekwipunek D&D

Scolari

Rekomendowane odpowiedzi

Scolari Uczeń

Scolari

Opublikowano
Uczeń

Scolari

Opublikowano

Cześć, mój pierwszy mini tutorial tutaj. Zamiast omawiania gotowca postaram się pisać u siebie i na bieżąco wszystko tłumaczyć. :)

 

Najpierw tworzymy podstawy całego ekwipunku, coby nie wyglądało to brzydko lekko ostylujemy i damy jakąś czcionkę.

Będzie to ramka w którą włożymy elementy do 'poruszania'

<div id="inwentarz" style="background:url(http://placehold.it/300/fff/000&text=Wyposazenie); width:300px; height:150px; margin:10px; padding:15px; border:1px solid black; display:block; clear:both;">


</div>

Tworzymy sobie 3 obrazki o ID 55,56,57 i identycznej klasie - je będziemy przeciągać. (jako, że ja wybrałem obrazek misia tak tez go nazwie)

  	 <img src="http://basketballgame.pl/pngame/mis.png" class="mis" id="55" width="75px" height="75px" alt="Jakieś misie" />
	<img src="http://basketballgame.pl/pngame/mis.png" class="mis" id="56" width="75px" height="75px" alt="Jakieś misie" />
	<img src="http://basketballgame.pl/pngame/mis.png" class="mis" id="57" width="75px" height="75px" alt="Jakieś misie" />

Tworzymy miejsce do którego będziemy przeciągać Misia.


<div id="miejsce_misie" style="background:url(http://placehold.it/85/ffffff/000000/&text=Mis); width:75px; height:75px; padding:10px; margin:10px; border:1px solid black; float:left;"></div>

 

 

Póki co efekt wygląda tak:

1z348zs.jpg

 

Do tego momentu wszystko zrozumiałe?

No to czas wrzucić w skrypt trochę JQUERY!

<script type="text/javascript" src="http://basketballgame.pl/pngame/js/jq.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

 

<script type="text/javascript">
$(document).ready(function() {


});
</script>

Zaczęliśmy kod jquery.. Coby zrobic z tymi misiami? Może pozwolimy im na trochę ruchu? Pomiędzy { } wstawmy..

$(".mis").draggable({ revert: 'invalid'});

Czyli nadaliśmy rzeczom o klasie .mis możliwość ruchu. Revert invalid, czyli jeżeli miś po przeciągnięciu będzie wracał na swoje pole.

Możemy również ustawić wartość false, wtedy po miś zostanie w przeciągniętym obszarze.

 

Hmm.. Może teraz pozwolimy misiowi zostać w obszarze nazwanym przez nas "mis"?

$("#miejsce_misie").droppable({ accept: '.mis'
});

W miejscu #miejsce_misie akceptuje rzeczy o klasie mis, jeżeli opcji accept nadamy wartość '.zupa' wtedy rzeczy z klasy miś będą odrzucane a zupa trafi do właściciela. :-)

Aktualnie wygląda to tak:

14p73a.jpg

 

Miś nie może wrócić do inwentarza, więc piszemy kolejną rzecz:

$('#inwentarz').droppable({ accept: (".mis"),
});

 

Hmm.. Misie owszem dadzą się przeciągnąć - ale mogą być dwa na jednej pozycji, a przecież nasza postać w grze nie będzie zakładać dwóch par zbroi!

Więc do roboty!

Najpierw napiszemy funkcje zdejmujaca misia i wkladającą nowego:

function itemwmiejscu(upuszczany,miejsce)
{

}

funkcja do której będziemy przekazywać wartość ui.draggable i this, nazwiemy więc je.. upuszczany i miejsce.

 

Najpierw pobierzemy informacje o starym przedmiocie jeżeli długość jest większa od 0 [czyli zasadniczo - istnieje] przesuniemy go do inwentarza

Dane o starym itemie znajdziemy za pomoca funkcj find w miejscu do którego przesuwany jest nowy item.

var staryitem = $(miejsce).find('img','id');
if(staryitem.length>0) {
	staryitem.appendTo('#inwentarz').draggable({ revert: 'invalid'
		});
}

Teraz kolejne zadanie, musimy utworzyć nowy item

var item = $('<img />');
item.attr('src',upuszczany.attr('src')).attr('class',upuszczany.attr('class')).attr('id',upuszczany.attr('id')).appendTo(miejsce).draggable({ revert: 'invalid' });

i usunąć stary

upuszczany.remove();

ostatni krok to dodanie funkcji, która będzie wywoływana przy przeciągnieciu:

$('#miejsce_misie,#inwentarz').bind('drop', function(ev,ui) { itemwmiejscu(ui.draggable,this); });

 

Voila! :)

 

EFEKT:

http://ograch.com

 

 

Jeżeli Wam się podoba - może później powstaną jeszcze jakieś tutki bądź udoskonalenia do tego. ;)

poezja.org

Divers02 Pomocnik

Divers02

Opublikowano
Pomocnik

Divers02

Opublikowano

świetnie opisane :) Właśnie takiego czegoś szukałem, teraz już na pewno sobie poradzę z tym głupim ekwipunkiem d&d :D Jasne że rób więcej tutków ^^

logo.png

KDKJ Arcymistrz

KDKJ

Opublikowano
Arcymistrz

KDKJ

Opublikowano

Dział tworzenia gier się rozrasta :)

Poradnik ładnie wykonany, lajk leci ;)

Oby więcej tut'ków w jQuery ;p

a7a3b8122182356e.png.8036b3d7be84292c9ea465f2360fa784.png

Xiado Rekrut

Xiado

Opublikowano
Rekrut

Xiado

Opublikowano

A czy mógłbym mi powiedzieć taką rzecz - jeżeli mam "założonego" misia i wciągnę nowego na slot, to mam "założonego" starego, czy tego co właśnie wciągnąłem?

I jeszcze jedno - jak rozróżniać typ rzeczy?

Np. Do wyboru mamy misia, lalkę i samochód. Jak rozpoznać, czy nie chcę włożyć lalkę do slotu na misia czy samochód?

Jestem ciekaw, czy to że zarejestrowałem się na MPC w piątek 13 coś zmienia...

Xiado Rekrut

Xiado

Opublikowano
Rekrut

Xiado

Opublikowano

Dobra - tamten przykład.

Mam slot miś (class = slot miś), samochód (class = slot samochód) i lalka (class = slot lalka).

jQuery: dragabble i droppable na .slot.mis... (na wszystkie 3)

I teraz - jak zrobić wymianę przedmiotu?

Jestem ciekaw, czy to że zarejestrowałem się na MPC w piątek 13 coś zmienia...

Scolari Uczeń

Scolari

Opublikowano
Uczeń

Scolari

  • Autor
Opublikowano 

	$('#miejsce_misie,#inwentarz,#slot,#slot,#slot').bind('drop', function(ev,ui) { itemwmiejscu(ui.draggable,this); });

 

W praktyce -> http://basketballgame.pl/mis.html

 

Chyba, że źle zrozumiałem i chodzi Ci o upchnięcie rzeczy z kilku klas w jednym miejscu.

Wtedy robisz np.

$("#miejsce_cos").droppable({ accept: (".mis,.cos")
});

Funkcja będzie działać poprawnie - importuje dane nowego i starego itemu.

poezja.org

Scolari Uczeń

Scolari

Opublikowano
Uczeń

Scolari

  • Autor
Opublikowano

To akurat wina przeglądarki na Firefox / Opera działa poprawnie - aczkolwiek postaram się popatrzeć co szwankuje na chrome. ;)

 

 

@Perfect, pewnie, że się da to tylko skrypt pokazujący D&D - warstwę Ajax'a i wyświetlania itemów z bazy musisz sobie zrobić sam.

poezja.org

Xiado Rekrut

Xiado

Opublikowano
Rekrut

Xiado

Opublikowano

Perfect7M: tak da się - ślesz ajax'em tablicę założonych do PHP, generujesz statystyki i już.

Jestem ciekaw, czy to że zarejestrowałem się na MPC w piątek 13 coś zmienia...

Divers02 Pomocnik

Divers02

Opublikowano
Pomocnik

Divers02

Opublikowano

dodałem drugiego ifa do funkcji, żeby nie można było przerzucać dwóch broni, ale teraz już w ogóle d&d nie działa. Zrobiłem dokładnie tak samo jak z zbroją.

logo.png

  • 11 miesięcy temu...
Nygol Bywalec

Nygol

Opublikowano
Bywalec

Nygol

Opublikowano

dobra a teraz pokaż jak zrobić by skrypt PHP albo coś reagowało na to :D Aby zrobić np mysql_update :)

 

@sorry za odświerzenie i odkopanie :D

hcq0.png


LoneyPL Pasjonat

LoneyPL

Opublikowano
Pasjonat

LoneyPL

Opublikowano

A może ktoś zapoda "mniej więcej gotowy przykład w ajaxie" jak ma wyglądać takie zapytanie połączone z tym co jest wyżej :P

Scolari Uczeń

Scolari

Opublikowano
Uczeń

Scolari

  • Autor
Opublikowano

Może od razu "mniej więcej gotowy" silnik gry? Pomyśl sam.

Wyciągasz ID obiektu z id bądź classy, wrzucasz w to żądanie AJAX, cała filozofia.

poezja.org

  • 3 miesiące temu...
  • 1 miesiąc temu...

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy
×
×
  • Dodaj nową pozycję...