PHP -> JavaScript

Internet: PHP, CGI, stb.

Egy térbeli játék alapján készítettem egy egyszerű kattintgatós logikai játékot: http://web2.osb.hu/z/pampyra/game1
Hogy lehetne ezt JavaScripttel megoldani?

Gyakorlatilag annyi a feladat, hogy a kép megfelelő háromszögeire kattintva bizonyos szabályok szerint át kell rendezni kép háromszög-mozaikjait, és figyelni, hogy elértünk-e a kész megoldáshoz.
Ha mindig várni kell a webszerver visszajelzésére, az élvezhetetlenné teszi a játékot.

  • 2653 megtekintés

( erenon | 2011. 12. 12., h – 12:42 )

Ha elmondod, hol akadtál el, szívesen segítek. Ennek a logikának a kódja kevéssé különbözik a két nyelvben, a szintaktikától eltekintve. Fogsz egy jQuery-t, minden elemhez hozzákötsz egy click handlert, ami kattintáskor kiszámolja az új állapotot és azt megjeleníti.

Megnézted a forrást? Egyetlen képként tolja ki az egészet, és alátol egy map-et. Igen, meg lehet írni ebben a formában javascriptben is, van canvas, lehet dinamikusan módosítani a map-et, csak nem biztos, hogy gyorsabb lesz. De ha nincs kedv/idő a html rész újraírására, akkor az a megoldás, amit leírtam.

Ja, egy apró javaslat: ha a 3 kép nem egymás alatt, hanem egymás mellett lenne, akkor mindenféle átméretezés nélkül kiférne.

--
Don't be an Ubuntard!

Köszi az ötleteket!
Igazából nem annyira a sebesség a gond, hanem az, hogy a kép eltüntetése és újból való megjelenítés között túl sok idő telik el. Ezt (valami flush-sal vagy bármivel) nem lehetne kiküszöbölni? Tehát nem baj az sem, ha 1-2 másodperccel több ideig várni kell, csak a régi kép / új kép váltása közt ne legyen ekkora szünet. Magyarán, hogy jobban látsszon, hogy miből mi lett.

A map egyébként nem változik, csak a png kép (illetve az, hogy a mapnek mennyi része van megmutatva).

Ja, szóval az nem baj, ha a szerveren jön létre a kép, csak az oldal ne frissüljön? Akkor az annyi, hogy az img src-jét javascriptből állítod. Valahogy így: 


<head>
...
<script type="text/javascript">
	function setkep(url)
	{
		document.getElementById("kep").src="kepmutato.php"+url+"&detailed=yes_please";
	}
</script>
...
</head>
...
<img src="kepmutato.php?map2=P23QP20QP22QP48-QT7_1QT12_6QT26_2QT26_4QP20ZQP34Z&detailed=yes_please" width="350" height="1086" border="0" usemap="#map" id="kep">
...
<map name="map">
<area shape="poly" coords="98,85,174,9,250,85" href="javascript:setkep('?map2=P23QP20QP22QP48-QT7_1QT12_6QT26_2QT26_4QP20ZQP34Z&d=102')" />
...
</map>

Persze lehet máshogy is, de szerintem így a legegyszerűbb. Nyilván most nem az a cél, hogy a "legelegánsabb", lehetőleg minél több kurrens technológiát használj. :)

--
Don't be an Ubuntard!