Tabela wyników na stronie

Wtorek, 30 Grudnia 2008, 09:56
Czas czytania 13 minuty, 33 sekundy
Zgodne z GM: gm7 gm8 gms1 gms2
Artykuł opisuje, jak w prosty sposób stworzyć system wyników wyświetlanych na stronie internetowej.
W tym artykule mam zamiar przedstawić, jak wykonać tabelę wyników, zwaną często high-score, bądź hi-score (wysokie punkty). Cała filozofia polega na tym, że tabela ta będzie znajdować się na twojej stronie, przesyłając dane w adresie. Aby było to bezpieczne, poruszymy także temat dotyczący zabezpieczenia otwieranej strony przed zmienianiem wartości w adresie. Wymagam więc od was kilku rzeczy: zarejestrowanej wersji Game Makera (bez niej się nie obejdzie w żaden sposób), niewielkiej, ale jednak jakiejś znajomości GMLa, średniej znajomości PHP, a co za tym idzie HTML i ew. CSS oraz implementacji MD5 w Game Makerze (autorstwa niejakiego Rithiura), którą znajdziesz w pobranym archiwum z przykładem. Jeśli nie spełniasz tych wymagań - niestety, nie zrozumiesz zagadnień omówionych w artykule, lub jeszcze gorzej - nie będziesz mógł takowej tabeli do swojej gry posiadać.

GML

Zacznijmy od kodu w GML. Zakładam, że pobrałeś już implementację MD5. Tak, dobrze myślicie, teraz czeka nas tłumaczenie, co to MD5. Otóż, istnieje coś takiego, jak skrót tekstu. Nazywamy go hashem. Hashe używane są do zabezpieczania danych. Jeśli znasz PHP na poziomie średnim, to wiesz, że istnieje metoda wysyłania danych GET. Jest ona o tyle niebezpieczna, że każdy może zmieniać wartości w linku strony. Tak samo jest z plikami ini. Jeśli ich nie szyfrujemy - każdy może pozmieniać wszelkie wartości. Szyfrować linków, niestety, nie da się, dlatego użyjemy też hasha. Hash może być, oczywiście, także skrótem pliku. Ale, nie zmieniając tematu - w naszym przypadku sprawa wygląda następująco:
kodhttp://stronaprzykladowa.pl/?dana1=wartosc&dana2=wartość&dana3=wartość
Edytowanie wartości jest banalne, ale to już wiemy. Teraz, jak je zabezpieczyć? A co, gdyby złączyć te wszystkie wartości w jeden łańcuch, dodać jakieś hasło dla dodatkowego zabezpieczenia i zmienić to w hash? Hash można także wysłać w linku, a na stronie znowu łączymy przesłane dane i sprawdzamy czy hash z nich jest taki sam jak hash wysłany. Tak, takie rozwiązanie jest świetne. W tym artykule użyłem metody hashującej MD5. Używając jej, hash ma zawsze 16 znaków. Dzięki tej teorii, czeka nas już dwa razy mniej tłumaczenia :) . Skoro już wiesz, co to ten hash, możemy śmiało przejść do kodu w GML. Ponieważ nie mamy żadnej przykładowej gry, zróbmy losowanie punktów i po prostu podawanie nazwy i dodawania do tabeli. Wstaw taki kod w Create byle jakiego obiektu, który ma się znajdować w roomie:
kodsite = 'localhost/hiscore/index.php';
password = 'PeNtAl';

score = round( random( 200 ) );
show_message( 'Ilosc twoich punktow to: ' + string( score ) );

var _t;

_t = show_message_ext( 'Czy chcesz dodac swoj wynik do tabeli najlepszych?',
'Tak', '', 'Nie' );
if ( _t < 3 )
{
nick = get_string( 'Podaj swoj nick:', 'Pental' );
hash = md5( nick + string( score ) + password );
execute_shell( site + '?add&nick=' + nick + '&score=' + string( score ) + '&code=' + hash, 0 );
}

show_message( 'Do widzenia :) !' );
Zmienna site to adres do pliku index.php na naszej stronie. W moim przypadku jest to localhost, ponieważ testowałem tabelę właśnie na lokalnej sieci. Oczywiście, zmień tą wartość na link do pliku wyświetlającego tabelę, np. mojastrona.org/tabela/tabela.php . Dostrzec można także zmienną password - jest to ważne hasło, które musisz koniecznie zmienić. Dalej losujemy ilość punktów i ją wyświetlamy. Tworzymy tymczasową zmienną _t, po czym używając funkcji show_message_ext(), zadajemy pytanie, czy mamy dodać ten wynik na stronę. Jeśli _t nie wynosi 3, to znaczy, że wybraliśmy "tak" (ponieważ oprócz 3 jedyna możliwa opcja to pierwsza, bo druga jest pusta). A teraz najważniejsze - otworzenie strony. Najpierw pobieramy nick. Do zmiennej hash, która "mówi sama za siebie", przypisujemy skrót utworzony z połączenia nicka, punktów oraz hasła. Dalej uruchamiamy twoją stronę z odpowiednimi wartościami w tablicy GET.

Projekt strony

Tak, przyszedł czas na stronę. Zawsze, kiedy łączymy HTML (+ inne języki, które nie "predefiniują tekstu", np. CSS, JS, VB) z PHP, należy stworzyć projekt, układ strony (ang. design, layout), zaoszczędzisz w ten sposób wiele czasu. Ponieważ nie mowa tu o "najpiękniejszej tabeli", napisałem prosty, ale zawsze jakiś design tabeli. Cały kod to:
kod<html>
<head>
<style type="text/css">
table {
background-color: lightblue;
border: 1px solid blue;
}
td {
text-align: left;
border: 1px solid blue;
text-align: center;
font-family: Verdana;
font-size: 18px;
}
</style>
<title>Tabela najlepszych</title>
</head>
<body style="background-color: rgb( 200, 200, 255 );">
<center>
<font size="5">Tabela 10 najlepszych graczy.</font><br /><br />
<table width="500" cellspacing="1" cellpadding="1">
<tr style="color: red;"><td>Miejsce</td><td>Nazwa</td><td>Punkty</td></tr>
<tr><td>1.</td><td>Nick</td><td>punkty</td></tr>
<tr><td>2.</td><td>Nick</td><td>punkty</td></tr>
<tr><td>3.</td><td>Nick</td><td>punkty</td></tr>
<tr><td>4.</td><td>Nick</td><td>punkty</td></tr>
<tr><td>5.</td><td>Nick</td><td>punkty</td></tr>
<tr><td>6.</td><td>Nick</td><td>punkty</td></tr>
<tr><td>7.</td><td>Nick</td><td>punkty</td></tr>
<tr><td>8.</td><td>Nick</td><td>punkty</td></tr>
<tr><td>9.</td><td>Nick</td><td>punkty</td></tr>
<tr><td>10.</td><td>Nick</td><td>punkty</td></tr>
</table>
</center>
</body>
</html>
Wspomniałem już - taka tabela nie jest może ładna, ale na potrzeby przedstawienia naszego zagadnienia, tak więc nie należy narzekać. Jak widzimy - jeśli chodzi o HTML - zwykła tabelka, trzy razy znaczniki td w tr, oraz kilka atrybutów w znaczniku table.

Krok pierwszy: początek tabelki

Teraz usuńmy cały kod HTML od miejsca <table> (z <table> włącznie) do miejsca, gdzie napotkasz </table> (tak jak z <table>). Cały ten kod HTML zastąpimy kodem PHP, który oczywiście, jak wiemy, zwraca nam kod HTML. Pierwszym procesem będzie początek tabelki. Zacznijmy od:
kod<?php
// poczatek tabelki
echo '<table width="500" cellspacing="1" cellpadding="1">';
echo "<tr style="color: red;"><td>Miejsce</td><td>Nazwa</td><td>Punkty</td></tr>n";
?>
Tłumaczenie tego kodu nie ma sensu - po prostu wyświetlamy początek tabelki.

Krok drugi: parametry tabeli

Zawsze zaczynam wszystko od podania parametrów, czemu nie mielibyśmy tak zrobić i tym razem? Kontynuując:
kod// sciezka do wynikow (koniecznie do wymiany!)
$dir = 'wyniki';
// tajne haslo (koniecznie do wymiany!)
$pass = 'PeNtAl';
// maksymalna ilosc rekordow (najczesciej jest to 10)
$max = 10;
// nazwa pliku z wynikami (do wymiany)
$fname = 'wyniki.txt';
// wiadomosc
$text = '';
Tutaj także nie ma wiele do tłumaczenia, ponieważ komentarze mówią same za siebie. Zwróć uwagę na to, że tajne hasło musi być identyczne, jak poprzednio, w kodzie GML! Zmienna $text będzie przechowywać wiadomość, którą wyświetlimy na końcu, pod tabelką. $dir to folder, który musisz stworzyć obok pliku *.php, czyli za pewne index.php. Tam będziemy przechowywać wyniki w pliku o nazwie $fname (czyt. wyniki.txt). Nazwę tego folderu zmień, oczywiście analogicznie wartość zmiennej. Niektóre serwery blokują dostęp do plików w folderach, w których nie ma pliku index.* . Stwórz więc pusty plik index.html i wrzuć go do tego folderu. Nie twórz zaś w tym folderze pliku o nazwie "wyniki.txt"!

Krok trzeci: tworzenie pustej tabeli

Nasze dane o tabeli będziemy więc przechowywać w pliku w ten sposób:
kodpunkty gracza z miejscem 1
nick gracza z miejscem 2
punkty gracza z miejscem 2
nick gracza z miejscem 3
punkty gracza z miejscem 3
nick gracza z miejscem 4
punkty gracza z miejscem 4
itd..
Tego pliku kazałem ci nie tworzyć, ponieważ po co masz go wypełniać, skoro może to zrobić nam PHP? Jeśli zobaczy, że nie ma pliku, to go tworzy i wypełnia tak:
kodnikt
0
nikt
0
nikt
0
nikt
0
itd..

Poza tym, później mamy pewność, że takowy plik istnieje i ma odpowiednie dane. Kolejny fragment kodu to:
kod// jesli plik z wynikami nie istnieje, tworzymy go i wypelniamy :)
$fname = $dir . '/' . $fname;
if ( !file_exists( $fname ) )
{
$file = fopen( $fname, 'w' );
for( $i = 0; $i < $max; $i++ )
fwrite( $file, "nniktn0" ); // cudzyslowy uzyte ze wzgledu na parser ''
fclose( $file );
}
Pierwsza linijka sprawia, że $fname nie zawiera już nazwy pliku, tylko ścieżki dostępu do niego (czyli nazwafolderu/nazwapliku). Teraz podczas używania tej zmiennej nie trzeba będzie łączyć jej z nazwą folderu i ukośnikiem, a jest to o wiele wygodniejsze i bardziej optymalne rozwiązanie. Zwróćmy uwagę na to, że użyłem cudzysłowów zamiast apostrofów. Parser apostrofów usuwa wszystkie znaki escape (n, t itd.), a to by nie pozwalało na przejście do nowej linii.

Krok czwarty: wczytanie tabeli

Nieważne, czy plik był, czy nie, teraz jest i możemy śmiało wczytać tabelę do dwóch tablic - $n[] dla nicków oraz $s[] dla punktów. A oto kod:
kod// wczytanie tabeli
file = fopen( $fname, 'r' );
fgets( $file );
for( $i = 0; !feof( $file ); $i++ )
{
$n[$i] = rtrim( fgets( $file ) );
$s[$i] = ( int )rtrim( fgets( $file ) );
}
Funkcja rtrim() usuwa znaki escape, a przecież takowy występuje w każdej linii (prócz ostatniej), jest to oczywiście znak nowej linii, czyli n. Dodatkowo używamy rzutowania z typu string do int, ponieważ ilość punktów to liczby, to oczywiste.

Krok piąty: dodawanie rekordu

Teraz najcięższy do zrozumienia i najdłuższy fragment kodu - dodawanie rekordu. Najpierw, sprawdzamy, czy istnieje tablica GET[ 'add' ] za pomocą funkcji isset(). Sama tablica nie ma żadnej wartości, aczkolwiek sugeruje nam, że mamy zamiar dodać rekord. Jeśli tak, przechodzimy dalej. Sprawdzamy za pomocą funkcji preg_match(), czy nick jest poprawny i nie zawiera znaków, które mogłyby tworzyć bałagan lub też znaków tworzących kod HTML. Jeśli nick jest niepoprawny - dajemy zmiennej $text odpowiednią wartość, abyśmy zostali o tym poinformowani. Jeśli nick jest poprawny, przechodzimy dalej. Teraz łączymy nick z ilością punktów (oczywiście należy dokonać konwersji z typu int do typu string) i naszym tajnym hasłem. Teraz cały ten łańcuch, który przechowuje zmienna $hash, zamieniamy w skrót tekstu, za pomocą wbudowanej w PHP funkcji MD5. Jeśli hash w tablicy GET[ 'code' ] jest równy powstałemu hashowi, znaczy to, że dane łącznie z hashem są poprawne, więc przechodzimy dalej. Dodatkowo sprawdzamy, czy nie istnieje plik o nazwie naszego hasha, ponieważ jeśli uda się dodać rekord, to takowy plik tworzymy. Jeśli ktoś chcę dodać kilak rekordów, wystarczy, że odświeży stronę. Aby to ominąć, właśnie tak postępujemy. Jeśli coś jest nie tak - zostajemy o tym poinformowani (zmiennej $text zmieniamy wartość), jeśli nie - przechodzimy dalej. Ostatnie "pytanie" brzmi następująco: Czy wynik jest większy niż zero i, czy jest lepszy chociaż niż najgorszy wynik? Jeżeli tak - przechodzimy dalej, czyli dodajemy wynik. Dodanie wyniku jest związane ze zmianą pozycji innych rekordów, posłuży nam do tego pętla krokowa for. Dodatkowo, zostajemy o tym poinformowani. Tworzy także plik o nazwie hasha. Taki kod nie powinien cię zdziwić:
kod// dodawanie rekordu
if ( isset( $_GET[ 'add' ] ) )
{
if ( preg_match( '/^[a-z0-9_#- ]+$/i', $_GET[ 'nick' ] ) != $_GET[ 'nick' ] )
{
// stworzenie hasha - w PHP mamy gotowa funkcje :)
$hash = $_GET[ 'nick' ] . $_GET[ 'score' ] . $pass;
$hash = md5( $hash );
if ( $hash == $_GET[ 'code' ] && !( file_exists( $dir . '/' . $hash ) ) )
{
// jesli hash jest poprawny, jestesmy tutaj :)
$sc = ( int )$_GET[ 'score' ];
if ( ( $sc ) && ( $sc > $s[$max - 1] ) )
{
// gratulacje, dostales sie do tabeli najlepszych :) !
$text = 'Gratulacje, ' . $_GET[ 'nick' ] . '. Twój wynik zostal dodany!';
fclose( fopen( $dir . '/' . $hash, 'w' ) );
for( $i = $max - 2; $i >= 0; $i-- )
{
if ( ( $s[$i] >= $sc ) || ( !$i && $sc >= $s[0] ) )
{
if ( ( $i ) || ( !$i && $sc <= $s[0] ) )
$i++;

for( $j = $max - 1; $j > $i; $j-- )
{
$s[$j] = $s[$j - 1];
$n[$j] = $n[$j - 1];
}

$s[$i] = $sc;
$n[$i] = $_GET[ 'nick' ];

break;
}
}
}
}
else
$text = 'Nie udalo się dodać wyniku!';
}
else
$text = 'Niepoprawny nick!';
}
Tak więc, nie ma już nawet czego tłumaczyć.

Krok ostatni: wyświetlanie informacji i koniec tabeli

Pozostało nam już tylko wyświetlić tabelę oraz informację i zakończyć tabelę. Jeśli dotychczas wszystko zrozumiałeś, zrozumiesz także i ten kod:
kod// wyswietlanie tabeli
for( $i = 0; $i < $max; $i++ )
{
echo '<tr><td>' . ( string )( $i + 1 ) . '.</td><td>';
echo $n[$i] . '</td><td>';
echo ( string )$s[$i] . "</td></tr>n";
}

// zapis
$out = "";
for( $i = 0; $i < $max; $i++ )
$out .= "n" . $n[$i] . "n" . ( string )$s[$i];
file_put_contents( $fname, $out );

// wiadomosc :)
echo '</table><br/><b><font size="2">' . $text . '</font></b>';
?>
Wyświetlamy zawartości tablic, należy jednak pamiętać o konwersji tablicy przechowującej ilości punktów do łańcucha (string). Należy przyjrzeć się jeszcze zapisowi. Do zmiennej $out przypisujemy wartości tablic i nowe znaki, po czym nadpisujemy plik funkcją file_put_contents(). Podczas wyświetlania końca tabeli wyświetlamy także niżej wiadomość.

Jeśli robiłeś wszystko zgodnie z tym artykułem - właśnie udało ci się stworzyć tabelę wyników do swojej gry :) ! Oczywiście, uczyń ją ładniejszą i zmień parametry według własnego uznania.

Na koniec chciałem podziękować Tymonowi, współtwórcy tego artykułu, za dokładne wytłumaczenie, co to hash ;).

Wskazówka:
GameMaker Studio posiada wbudowaną obsługę MD5

Przykład do ściągnięcia (w tym przykład, jak powinna wyglądać twoja strona): gmclan.org/up4218_3_Tabela_najlepszych.html
Strona autora implementacji MD5 w Game Makerze: rithiur.anthd.com/gm/libs/md5.php

Przykładowa strona z takową tabelą (aby testować, wystarczy w pliku gm6 zmienić wartość zmiennej site na ten właśnie link): mental.ugu.pl/hiscore
Komentarze (łącznie 35, wyświetlam 1 - 15):
P
Pental (Wto., 30 Gru. 08, 10:00)
#1

E, Dark, mały problem z apostrofami i tagami :P .

ZeroXbot (Wto., 30 Gru. 08, 10:05)
#2

hash, gdzieś to słyszałem... już wiem zapewne chodzi o coś takiego jak tabelę składającą się z klucza i czegos tam tak? Zresztą zaczynam czytać ;)

Dark Maximal (Wto., 30 Gru. 08, 10:06)
#3

Hm, to wylazło dopiero jak już dodałem całą treść. Zaraz naprawię.

P
Pental (Wto., 30 Gru. 08, 10:09)
#4

W jednym miejscu, po 0 nikt 0 nikt 0 brakuje [/KOD]. A co do niektórych znaków - na nie chyba nie ma rady :( .

P
Pental (Wto., 30 Gru. 08, 10:13)
#5

Sugeruję zamienić znaki &#8211; (myślniki) na przecinki. W niektórych miejscach będzie to wyglądać fatalnie, ale "lepszy rydz, niż Rydzyk" :) .

Mimek (Wto., 30 Gru. 08, 10:16)
#6

No pięknie Pental :) 10 bez gadania :D

P
Pental (Wto., 30 Gru. 08, 10:17)
#7

To ja jeszcze wrzucę przykładową stronę na serwer, by każdy mógł sobie tamtym przykładem potestować :) .

Dark Maximal (Wto., 30 Gru. 08, 10:18)
#8

Naprawione. Będę musiał poprosić Tymcia, żeby sprawdził moduł dodawania artykułów.

P
Pental (Wto., 30 Gru. 08, 10:22)
#9

Uch, dzięki :D . Powiedz mu jeszcze, żeby tabulatorów nie cięło :P .

gnysek (Wto., 30 Gru. 08, 10:46)
#10

Bez sensu ten artykuł.

nick = 'gnysek';
hash = md5( nick + string( 10000000000000000000000000000) + password );
execute_shell( site + '?add&nick=' + nick + '&score=' + string( 10000000000000000000000000000) + '&code=' + hash, 0 );

Nic to zabezpieczenie nie dało w sumie. Łatwo można się domyślić co zostało zhashowane :) Lepiej uzyć 39dll, wtedy wszystko dzieje się niejawnie, do momentu dekompilacji gry.

P
Pental (Wto., 30 Gru. 08, 10:48)
#11

Gnysek, nie zrozumiałeś chyba mnie, a może to ja ciebie? Wytłumacz dokładniej :P . Wystarczy zmienić hasło...

P
Pental (Wto., 30 Gru. 08, 10:49)
#12

Gnysku, łatwo, ale od czego jest hasło :D ?

P
Pental (Wto., 30 Gru. 08, 10:53)
#13

Na przyszłość - nie krytykuj, jeśli nie jesteś pewien. Po to właśnie jest hasło, które trzeba zmienić i nie wolno nikomu zdradzać, by nikt nie pozmieniał sobie wartości w linku. Jeśli GRA nie jest zabezpieczona i ktoś ją zdekompiluje, to wtedy jest problem. Ale komu chce się z nią bawić dla jednej tabeli?

Tymon (Wto., 30 Gru. 08, 11:43)
#14

Ale nakomplikowałeś. =)

P
Pental (Wto., 30 Gru. 08, 11:45)
#15

Wiem, wiem. Ale może ktoś zrozumie :D .

Najnowsze wersje GameMakera:

Stabilna
2024.4.1.152 • 2024.4.1.202
wydana  3 dni temu
LTS
2022.0.2.51 • 2022.0.2.49
wydana 221 dni temu
Beta
2024.600.0.560 • 2024.600.0.577
wydana  wczoraj
= IDE, = Runtime
Użytkownicy online
1 użytkownik aktywny:
gości: 1,
(~ostatnie 15 minut)
Discord
27 użytkowników online na discordzie:
Kysiu, s..., Alice, Nitro Slav, Carl-bot, p..., Voytec, TinyFish, Add92, fervi, m..., DungeonFairy🧚, Kalor, LadyLush, MKP (GEM), Arrekin, Dyno, 🆅🅸🆃🅾74🅼, 𝕳𝖚𝖌𝖔 𝕲𝖔𝖓𝖝𝖆𝖑𝖊𝖝, Miłosz, LeD, m..., Danieo, Mtax, HappyOrange, 🧁Cupcake🧁, Shockah
Shoutbox
gnysek (10:09, 21.05.24)
Ale z jakimi błędami...
I am Lord (09:52, 20.05.24)
o piszą o nas 😁
Chell (11:15, 17.05.24)
nareszcie będzie można zaimplementować padający śnieg w gierce
gnysek (18:33, 16.05.24)
JS zmierza do GM xD
I am Lord (16:29, 05.05.24)
Czaję
gnysek (13:38, 04.05.24)
Nie wbudowują tego przez warunki licencyjne. Ale kto wie, może jako prefab zobaczymy to już w kolejnym wydaniu, bo wtedy prefaby mają zostać dodane.
I am Lord (12:17, 03.05.24)
Aha to trzeba coś tam jeszcze kombinować tak
gnysek (18:05, 01.05.24)
Tak, w osobnym rozszerzeniu (na githubie YYG).
Starsze wpisy znajdziesz w Archiwum.
Ankieta
Ile zarobiłeś do tej pory na grach stworzonych w GM?