User:Sven/Cityquiz: Difference between revisions

From Medien Wiki
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="background: #f1f1f1; padding: 50px 0;">
<div style="background: #f1f1f1; padding: 50px 0;">
<div style="width: 754px; background: #fff; padding: 15px 20px; margin: 0 auto;">
<div style="width: 754px; background: #fff; padding: 15px 20px; margin: 0 auto;">
[http://cityquiz2.som-media.de/ http://cityquiz2.som-media.de]


[[File:Ifd_sven_som_cityquiz_logo.jpg|750px]]
[[File:Ifd_sven_som_cityquiz_logo.jpg|750px]]
Line 7: Line 9:
= Kurzbeschreibung =
= Kurzbeschreibung =


Bei CityQuiz 2.0 handelt es sich um ein Geografie-Quiz, bei dem der Spieler innerhalb einer vorgegebenen Zeit möglichst zielsicher eine gefragte Stadt lokalisiert. Pro Spiel werden 10 Städte gesucht. Dafür hat man jeweils 20 Sekunden Zeit - je schneller und zielsicherer man tippt, desto mehr Punkte erhält man. Am Ende des Spiels erhält man eine Auflistung aller Tipps und eine Auswertung dieser.
Bei CityQuiz 2.0 (fortan CQ genannt) handelt es sich um ein Geografie-Quiz, bei dem der Spieler innerhalb einer vorgegebenen Zeit möglichst zielsicher eine gefragte Stadt lokalisiert. Pro Spiel werden 10 Städte gesucht. Dafür hat man jeweils 20 Sekunden Zeit - je schneller und zielsicherer man tippt, desto mehr Punkte erhält man. Am Ende des Spiels erhält man eine Auflistung aller Tipps und eine Auswertung dieser.






= Alleinstellungsmerkmal =


CityQuiz 2.0 enthält 8 verschiedene Karten: Deutschland (mit erweiterten Fragen), Nordamerika, Südamerika, Afrika, Europa, Asien, Ozeanien und eine Kombination aus allem (Welt). Das Spiel kommt ohne Einsatz von Flash aus, passt sich größtenteils den üblichen Bildschirmauflösungen an und verwendet die Google Maps API zur Bereitstellung der Karten.
= Grundidee =
 
CQ basiert in der Theorie auf einem Spiel, welches ich in meinem Erstsemester erstellt habe. Da sich aber im Laufe meines Studiums auch das Internet und meine eigenen Fähigkeiten weiterentwickelt haben, entschied ich mich für eine komplette Neu-Programmierung.
 
CQ enthält wie sein Vorgänger 8 verschiedene Karten: Deutschland (mit erweiterten Fragen), Nordamerika, Südamerika, Afrika, Europa, Asien, Ozeanien und eine Kombination aus allem (Welt).  
 
Das Spiel kommt ohne Einsatz von Flash aus, passt sich in der neuen Version größtenteils den üblichen Bildschirmauflösungen an und verwendet die Google Maps API zur Bereitstellung der Karten.
 
 
 
Link zu CityQuiz 1.0: [[IFD:WebApps/ProjekteWS10/Woliegtwas]]
 




Line 30: Line 42:


'''[https://itunes.apple.com/de/app/wo-liegt-das/id492240967?mt=8 Wo liegt das?]'''
'''[https://itunes.apple.com/de/app/wo-liegt-das/id492240967?mt=8 Wo liegt das?]'''




Line 87: Line 100:


Nach dem Spiel erhält man die Auswertung. Nun kann man zwischen drei Möglichkeiten wählen: Städte erneut spielen, andere Städte spielen oder eine andere Karte wählen. Für die Speicherung in der Rangliste erhält man die Möglichkeit, (freiwillig) seinen Namen anzugeben. Als besonderes Feature kann man einen generierten Link kopieren und diesen weitergeben. Durch diesen Link spielt man exakt die gleichen Städte nach. Somit kann man z.B. unter Freunden schauen, wer sich geografisch besser auskennt.
Nach dem Spiel erhält man die Auswertung. Nun kann man zwischen drei Möglichkeiten wählen: Städte erneut spielen, andere Städte spielen oder eine andere Karte wählen. Für die Speicherung in der Rangliste erhält man die Möglichkeit, (freiwillig) seinen Namen anzugeben. Als besonderes Feature kann man einen generierten Link kopieren und diesen weitergeben. Durch diesen Link spielt man exakt die gleichen Städte nach. Somit kann man z.B. unter Freunden schauen, wer sich geografisch besser auskennt.




Line 101: Line 115:
''''' Stadt-Informationen '''''
''''' Stadt-Informationen '''''


256 Städte insgesamt.
372 Städte insgesamt.


* Deutschland: 74 Städte inkl. individueller Frage
* Deutschland: 74 Städte inkl. individueller Frage
* Nordamerika: 35 Städte
* Nordamerika: 70 Städte
* Südamerika: 16 Städte
* Südamerika: 34 Städte
* Afrika: 30 Städte
* Afrika: 56 Städte
* Europa: 56 Städte
* Europa: 56 Städte
* Asien: 40 Städte
* Asien: 40 Städte
* Ozeanien: 5 Städte
* Ozeanien: 40 Städte


Von jeder Stadt sind außerdem Latitude und Longitude (geogr. Breite und Länge) gespeichert, sodass man diese Punktgenau abfragen kann.
Von jeder Stadt sind außerdem Latitude und Longitude (geogr. Breite und Länge) gespeichert, sodass man diese Punktgenau abfragen kann.
Line 122: Line 136:
** jQuery
** jQuery
** AJAX
** AJAX




Line 145: Line 160:
# Spiel-Countdown starten
# Spiel-Countdown starten
# Spiel-Countdown stoppen (nach Tipp oder 20 Sekunden)
# Spiel-Countdown stoppen (nach Tipp oder 20 Sekunden)
# Entfernung, verbleibende Zeit, Punkte und Note berechnen
# Auswertung-Countdown starten
# Auswertung-Countdown starten
# Tipp speichern (asynchron in DB schreiben)
# Tipp speichern (asynchron in DB schreiben)
# Tipp anzeigen und generierte Stadt auf Karte anzeigen
# Auswertung einblenden
# Auswertung einblenden
# Auswertung-Countdown stoppen (nach 10 Sekunden)
# Auswertung-Countdown stoppen (nach 10 Sekunden)
Line 156: Line 173:
# Gesamt-Auswertung einblenden
# Gesamt-Auswertung einblenden
# weitere Wahl (replay, newgame, selection)
# weitere Wahl (replay, newgame, selection)


= Zukunftspläne =
= Zukunftspläne =


* weitere Städte hinzufügen
* weitere Städte hinzufügen
* Zoom-Stufe automatisch an Bildschirm anpassen
* für deutsche Städte evtl. noch weitere Fragen
* Auswertung bei Duellen erweitern
* <strike>Zoom-Stufe automatisch an Bildschirm anpassen</strike>
 
 
''''' bekannte Bugs '''''
 
* erste Stadt lädt nicht/wird nicht angezeigt
* verschiedene Fehler durch timeOuts
 


</div>
</div>
</div>
</div>

Latest revision as of 23:45, 6 October 2013

http://cityquiz2.som-media.de

Ifd sven som cityquiz logo.jpg


Kurzbeschreibung

Bei CityQuiz 2.0 (fortan CQ genannt) handelt es sich um ein Geografie-Quiz, bei dem der Spieler innerhalb einer vorgegebenen Zeit möglichst zielsicher eine gefragte Stadt lokalisiert. Pro Spiel werden 10 Städte gesucht. Dafür hat man jeweils 20 Sekunden Zeit - je schneller und zielsicherer man tippt, desto mehr Punkte erhält man. Am Ende des Spiels erhält man eine Auflistung aller Tipps und eine Auswertung dieser.



Grundidee

CQ basiert in der Theorie auf einem Spiel, welches ich in meinem Erstsemester erstellt habe. Da sich aber im Laufe meines Studiums auch das Internet und meine eigenen Fähigkeiten weiterentwickelt haben, entschied ich mich für eine komplette Neu-Programmierung.

CQ enthält wie sein Vorgänger 8 verschiedene Karten: Deutschland (mit erweiterten Fragen), Nordamerika, Südamerika, Afrika, Europa, Asien, Ozeanien und eine Kombination aus allem (Welt).

Das Spiel kommt ohne Einsatz von Flash aus, passt sich in der neuen Version größtenteils den üblichen Bildschirmauflösungen an und verwendet die Google Maps API zur Bereitstellung der Karten.


Link zu CityQuiz 1.0: IFD:WebApps/ProjekteWS10/Woliegtwas



Konkurrenz

City Quiz

Der Spieler erhält vier charakteristische Fotos einer Stadt, dazu noch einige Buchstaben und muss dann die entsprechende Stadt erraten. Rein topografisches Wissen wird nicht überprüft.


Wo liegt was Flashgame

Das Wo liegt was Flashgame ist dem CityQuiz 2.0 sehr ähnlich, wurde jedoch mit Flash umgesetzt. Die Karte ist statisch und kann nicht gezoomt werden. Es wird nicht nach verschiedenen Karten gefiltert, somit werden immer Städte der ganzen Welt erfragt. Es wird kein Hintergrundwissen erfragt, sondern nur nach den direkten Stadtnamen.


Wo liegt das?



Interface

Hauptmenü

Das Interface orientiert sich an aktuellen Standards und ist dem der XBOX360 ähnlich. Beim Aufrufen der Seite begrüßt eine kurze Sequenz, bei der ein Map-Marker ins Bild fällt. Anschließend gelangt man ins Hub-Menü. Je nach Wahl verschiebt sich der Content-Bereich nach links oder rechts.


Ifd sven som cityquiz 1.jpg

Ifd sven som cityquiz 2.jpg

Ifd sven som cityquiz 3.jpg

Ifd sven som cityquiz 4.jpg


Spiel

Das Spiel-Interface ist in 3 Elemente unterteilt:

1) Die Karte

  • Eine eingefärbte Google Maps Karte, bei der Nur noch das Wasser blau ist. Die Erdoberfläche ist weiß, Straßen, Gebirge usw. sind ausgeblendet. Nur noch Staatsgrenzen dienen zur Orientierung.
  • Beim Tipp fällt ein Map-Marker von oben an die getippte Stelle hinunter. Anschließend wird mit einer roten Markierung angezeigt, wo die gesuchte Stadt liegt.


2) Der Quest-Bereich

  1. Die Frage
    • Hier steht entweder eine Frage (exkl. Deutschland-Karte) oder ein Stadtname
  2. Die Auswertung
    • Nach Abschluss wird eine Auswertung eingeblendet, in der dem Spieler alles zu seiner Leistung zur Verfügung gestellt wird. Bei der Deutschland-Karte wird die gesuchte Stadt eingeblendet.


3) Zusatzinformationen

  1. aktuelle Punktezahl
  2. Nummer (von 10) der aktuellen Frage
  3. verbleibende Zeit
    • Frage: 20 Sekunden
    • Auswertung: 10 Sekunden


Ifd sven som cityquiz 5.jpg

Ifd sven som cityquiz 6.jpg


Auswertung

Ifd sven som cityquiz 7.jpg

Nach dem Spiel erhält man die Auswertung. Nun kann man zwischen drei Möglichkeiten wählen: Städte erneut spielen, andere Städte spielen oder eine andere Karte wählen. Für die Speicherung in der Rangliste erhält man die Möglichkeit, (freiwillig) seinen Namen anzugeben. Als besonderes Feature kann man einen generierten Link kopieren und diesen weitergeben. Durch diesen Link spielt man exakt die gleichen Städte nach. Somit kann man z.B. unter Freunden schauen, wer sich geografisch besser auskennt.



Technik

Datenbank

Im Hintergrund des Spiels werden alle Informationen in einer SQL-Datenbank gespeichert und abgefragt. Diese besteht momentan aus 3 Tabellen, worin die Stadt-Informationen, Spiele und Tipps gespeichert sind. Abgefragt wird durch einfache PHP-Abfragen oder komplexere SQL-Joins.

  • phpMyAdmin 3.2.4


Stadt-Informationen

372 Städte insgesamt.

  • Deutschland: 74 Städte inkl. individueller Frage
  • Nordamerika: 70 Städte
  • Südamerika: 34 Städte
  • Afrika: 56 Städte
  • Europa: 56 Städte
  • Asien: 40 Städte
  • Ozeanien: 40 Städte

Von jeder Stadt sind außerdem Latitude und Longitude (geogr. Breite und Länge) gespeichert, sodass man diese Punktgenau abfragen kann.


Sprachen

  • HTML 5
  • CSS 3
  • PHP
  • Javascript
    • jQuery
    • AJAX



Spielprinzip

Das gesamte Spiel wird nur ein Mal geladen. Alle restlichen Spielinhalte werden asynchron nach- und/oder neugeladen. Sowohl Menü-Kategorien als auch z.B. die Rangliste werden on-the-fly asynchron geladen. Stadt-Informationen werden per PHP ausgelesen, in JSON-Objekte umgewandelt und anschließend dem Hauptskript zur Verfügung gestellt.


Die Vorbereitung

  1. Kartenwahl
  2. sämtliche Spieldaten zurücksetzen
  3. Spiel erstellen (asynchron in DB schreiben)
  4. die 10 Städte generieren
  5. die Karte generieren


Frage für Frage (10x)

  1. Frage einblenden
  2. gesuchte Stadt auf Karte generieren (versteckt)
  3. Spiel-Countdown starten
  4. Spiel-Countdown stoppen (nach Tipp oder 20 Sekunden)
  5. Entfernung, verbleibende Zeit, Punkte und Note berechnen
  6. Auswertung-Countdown starten
  7. Tipp speichern (asynchron in DB schreiben)
  8. Tipp anzeigen und generierte Stadt auf Karte anzeigen
  9. Auswertung einblenden
  10. Auswertung-Countdown stoppen (nach 10 Sekunden)
  11. Auswertung ausblenden


Die Auswertung

  1. Gesamt-Auswertung einblenden
  2. weitere Wahl (replay, newgame, selection)



Zukunftspläne

  • weitere Städte hinzufügen
  • für deutsche Städte evtl. noch weitere Fragen
  • Auswertung bei Duellen erweitern
  • Zoom-Stufe automatisch an Bildschirm anpassen


bekannte Bugs

  • erste Stadt lädt nicht/wird nicht angezeigt
  • verschiedene Fehler durch timeOuts