Action game σε Javascript/jQuery.

Αναγκαστικα κλεισμενος μεσα σε ενα αεροδρομιο και εχωντας αρκετο χρονο μπροστα μου μεχρι να ερθει η καθυστερημενη πτηση σκεφτηκα οτι αντι να περασω το χρονο μου βλεπωντας στο φορητο ταινια να φτιαξω ενα μικρο παιχνιδακι. Συνηθως περναει γρηγορα η ωρα οταν γραφω κωδικα και αυτο ειναι κατι που το ηθελα εκεινη τη στιγμη! Ετσι βγηκε το παρακατω action παιχνιδι το οποιο ειναι πολυ ευκολο στην κατασκευη του αφου ειναι λιγοτερο απο 60 γραμμες κωδικα. Και μαλιστα απλου, κατανοητου javascript κωδικα με λιγο jquery για ευκολια καθως και λιγο css3 για ομορφια. Ας δουμε τον κωδικα και θα εξηγησω παρακατω τι και πως.

baloon_touch

Οπως βλεπετε λοιπον εχουμε ενα απλο markup με μερικα divs. Μεσω css3 εχω δωσει ενα διαφορετικο απο οτι τα συνηθισμενα font στα γραμματα. Αυτο γινεται μεσω του @font-face. Στη συνεχεια φτιαχνω δυο functions, μια που εμφανιζει ενα div μεσω της .show() και μια που το κρυβει με το .hide(). Οι συντεταγμενες για το που θα εμφανιστει το div επιλεγονται τυχαια, μεσω της Math.random(). Επειτα αυτο που εκανα ειναι να αποθηκευω σε μια μεταβλητη ποσα κλικ εχουν γινει πανω στο div. Οποτε αυτη η μεταβλητη ειναι το σκορ. Επισης δημιουργησα ακομη μια function που μετα απο 60 δευτερολεπτα τερματιζει το παιχνιδι. Και τελος μεσω της setInterval εμφανιζω ή κρυβω το div με βαση καποιον χρονο που εγω ορισα. Μπορειτε να κατεβασετε το κωδικα απο το παρακατω αρχειο για να πειραματιστειτε μονοι σας. Οσοι θελουν μπορουν να το παιξουν online εδω.

Jquery_ActionGame

Leave a Reply

Your email address will not be published. Required fields are marked *