Πειραματισμοί με την Τ.Ν.

Το ψηφιακό παιχνίδι δημιουργήθηκε με την επιλογή Canvas του Gemini. Ακολουθεί ο σύνδεσμός του παιχνιδιού https://gemini.google.com/share/c76e6705fa98

Αναλυτικά η εντολή:

• Δημιούργησε μια web εφαρμογή παιχνιδιού διελκυστίνδας (Tug of War) για δύο ομάδες (Μπλε vs Κόκκινη), όπου η κίνηση του σχοινιού καθορίζεται από την ταχύτητα και την ορθότητα απαντήσεων σε ερωτήσεις.

  1. Αρχιτεκτονική & UI (Tailwind CSS & CSS Grid)

  • Layout: Χρησιμοποίησε CSS Grid για τη διαίρεση της οθόνης σε 3 κάθετα τμήματα:

    • Left Panel: Διασύνδεση Μπλε ομάδας.

    • Center Panel (Arena): Οπτική αναπαράσταση του αγώνα.

    • Right Panel: Διασύνδεση Κόκκινης ομάδας.

  • Responsiveness: Εφάρμοσε Tailwind CSS για πλήρη προσαρμοστικότητα σε διαφορετικές αναλύσεις.

  • Arena Visuals: * Δημιούργησε ένα tug-system με χαρακτήρες σε μορφή SVG και ένα κεντρικό σχοινί.

    • Η κίνηση πρέπει να γίνεται με την ιδιότητα transform: translateX().

  2. Μηχανισμός Παιχνιδιού (Game Logic)

  • Ταυτόχρονη Δράση: Υλοποίησε σύστημα όπου και οι δύο ομάδες βλέπουν διαφορετικές ερωτήσεις ταυτόχρονα, χρησιμοποιώντας ανεξάρτητους δείκτες προόδου (blueIdx, redIdx).

  • Σύστημα Score & Movement:

    • Σωστή Απάντηση: Μετατόπιση σχοινιού κατά +50px προς την πλευρά της ομάδας.

    • Λάθος Απάντηση: Αυτόματη μετατόπιση +30px υπέρ της αντίπαλης ομάδας.

  • Timer: Χρονόμετρο 30 δευτερολέπτων ανά ερώτηση (setInterval). Αν ο χρόνος λήξει, θεωρείται λάθος απάντηση (penalty).

  • Συνθήκη Νίκης: Το παιχνίδι τερματίζει όταν το σχοινί μετατοπιστεί συνολικά 250px προς μία κατεύθυνση.

  3. Διαχείριση Κατάστασης & Σφαλμάτων (State Management & Debugging)

  • Customization: Στην αρχή εμφάνισε οθόνη εισαγωγής ονομάτων. Αποθήκευσε τα ονόματα σε ένα αντικείμενο gameState.

  • Αποσφαλμάτωση (Edge Cases):

    • Πρόσθεσε έλεγχο if (selectedIdx !== -1) για να αποφύγεις TypeError σε περίπτωση λήξης χρόνου χωρίς επιλογή.

    • Input Locking: Κλείδωσε τα κουμπιά απαντήσεων μετά την επιλογή, ώστε να μην επιτρέπονται πολλαπλά κλικ στην ίδια ερώτηση.

  4. UI/UX & Animations

  • Animations: Πρόσθεσε ένα CSS animation κλάσης pull-animation που θα ενεργοποιείται (trigger) σε κάθε τράβηγμα για να δίνει την αίσθηση της κίνησης στους SVG χαρακτήρες.

  • Victory Screen: Εμφάνισε modal με το όνομα και το χρώμα της νικήτριας ομάδας όταν επιτευχθεί το όριο των 250px