Advertisement
  1. Web Design
  2. HTML/CSS
  3. HTML

20 από τα πιο δημοφιλή πρότυπα παιχνιδιών HTML5

Scroll to top
Read Time: 8 min

() translation by (you can also view the original English article)

Το Flash εισήλθε στον κόσμο του gaming οπού βασίζεται στο περιηγητή, αλλά όταν το Flash άρχισε να επισκιάζεται και εμφανίστηκε το HTML5, το οποίο αποτέλεσε τη βάση για τα ίδια παιχνίδια που δημιουργήθηκαν με Flash.

Οι πιθανότητες να έχετε παίξει κάποιο από αυτά τα παιχνίδια είναι μεγάλες, ίσως ακόμη και σε μορφή εφαρμογής εκτός του πλαισίου του προγράμματος περιήγησης, και όλα χρησιμοποιώντας HTML5.

Έχετε κάποια πρόταση για κάποιο θέμα παιχνιδιού ή ιδέα?

Ρίξτε μια ματιά στα 20 πιο δημοφιλή HTML5 πρότυπα παιχνιδιών στο Envato Market για να βρείτε ακριβώς το σωστό σημείο εκκίνησης για την ιδέα του παιχνιδιού σας ή να βρείτε την τέλεια λύση για την ιστοσελίδα σας.

1. Canvas Puzzle

Το Canvas Puzzle ήταν το πρώτο HTML5 στο Envato Market, οπότε είναι καλό να ξεκινήσουμε από κει.

Η ιδέα είναι απλή, αλλά αυτό δεν είναι που κάνει ένα παιχνίδι ωραίο?

Canvas PuzzleCanvas PuzzleCanvas Puzzle

Συμβατό με όλους τους σύγχρονους περιηγητές, αυτό το πρότυπο παιχνιδιού HTML5 μπορεί να λειτουργήσει με το Internet Explorer 9 ή παλιότερες εκδόσεις, ενώ επίσης δουλεύει και στα πιο πρόσφατα iPad.

Οι χρήστες μπορούν να χρησιμοποιήσουν οποιαδήποτε εικόνα— κάνοντας drag & drop στο Firefox ή στο Chrome— και αυτό θα παράγει ένα απεριόριστο αριθμό διαφορετικών κομματιών.

To Canvas Puzzle είναι ελαφρύ, απλό, ευπρεπές, και έτοιμο να το προσαρμόσετε στις προτιμήσεις σας.

2. Word Search Game

Απλά ανεβάστε το κείμενο σας και ξεκινήστε να χρησιμοποιείτε το Word Search Game αμέσως.

Από το Internet Explorer 6 μέχρι το πιο σύγχρονο browser—ακόμη και στο iPad—αυτό το παιχνίδι αναζήτησης λέξεων είναι ελαφρύ και διασκεδαστικό.

Word Search GameWord Search GameWord Search Game

Αυτά είναι ίσως τα πιο σημαντικά χαρακτηριστικά για ένα παιχνίδι όπως αυτό:

  • Υποστήριξη Unicode
  • Χρησιμοποιεί οποιοδήποτε αλφάβητο
  • Δυνατότητα χρήσης αριθμών

Το Word Search Game περιλαμβάνει ακόμη και επιλογή διαχειριστή για το παιχνιδιού.

3. Indiara and the Skull Gold

Όπως και πολλά από τα πρότυπα παιχνιδιών HTML5, το Indiara and the Skull Gold δουλεύει σε όλες τις πλατφόρμες.

Είστε έτοιμοι να πάτε σε μία περιπέτεια συλλέγοντας αρχαία αντικείμενα σε σπηλιές γεμάτες παγίδες?

Indiara and the Skull GoldIndiara and the Skull GoldIndiara and the Skull Gold

Αυτό το καταπληκτικό πρότυπο παιχνιδιού HTML περιλαμβάνει:

  • 8 επίπεδα
  • Αρχεία του Construct 2
  • Photoshop και Illustrator αρχεία
  • Και πολλά περισσότερα

Το Indiara and the Skull Gold έχει πλήρη υποστήριξη για χρήση ποντικιού και οθόνη αφής, περιλαμβάνει τη δυνατότητα κοινοποίησης σε μέσα κοινωνικής δικτύωσης, και μπορεί να προσαρμοστεί οπτικά με την εναλλαγή των αρχείων εικόνας ή να τροποποιηθεί πλήρως με το Construct 2.

4. Slot Machine The Fruits - HTML5 Casino Παιχνίδι

Το Slot Machine The Fruits - HTML5 Casino Game είναι βελτιστοποιημένο για κινητά και επιτραπέζιους υπολογιστές και περιλαμβάνει εικόνες υψηλής ποιότητας που υποστηρίζουν ανάλυση μέχρι 1500x640.

Slot Machine The Fruits - HTML5 Casino GameSlot Machine The Fruits - HTML5 Casino GameSlot Machine The Fruits - HTML5 Casino Game

Αυτή η πολύχρωμη δημιουργία αναπτύχθηκε με:

Το Slot Machine The Fruits - HTML5 Casino Game μπορεί ακόμη και να εγκατασταθεί χρησιμοποιώντας την CTL Arcade WordPress προσθήκη.

5. Coloring Book - HTML5 Game

Φτιάξτε το δικό σας εικονικό βιβλίο ζωγραφικής με το Coloring Book - HTML5 Game.

Με πλήρη υποστήριξη ποντικιού και οθόνη αφής, αυτό το ανταποκρίσιμο βιβλίο ζωγραφικής έχει όλα όσα χρειάζεστε για να ξεκινήσετε.

Coloring Book - HTML5 GameColoring Book - HTML5 GameColoring Book - HTML5 Game

Αυτό το πρότυπο παιχνιδιού HTML5 περιλαμβάνει:

  • Σύστημα εκτύπωσης
  • Σύστημα διαμόρφωσης
  • Προσαρμογή εμφάνισης
  • Και πολλά περισσότερα

Το καλύτερο απ' όλα, είναι ότι το Coloring Book - HTML5 Game περιλαμβάνει 24 χρώματα και 16 εικόνες με την δυνατότητα πρόσθεσης όσων εικόνων χρωματισμού επιθυμείτε.

6. The Sorcerer - HTML5 Game

Απολαύστε την μαγεία των προτύπων παιχνιδιών HTML5 με το The Sorcerer - HTML5 Game.

The Sorcerer - HTML5 GameThe Sorcerer - HTML5 GameThe Sorcerer - HTML5 Game

Η κατασκευή του παιχνιδιού ήταν εμπνευσμένη από το παιχνίδι Zuma, και περιλαμβάνει τρία διαφορετικά προοδευτικά επίπεδα.

Έχει αναπτυχθεί με τα εξής:

Η 960x540 κλίμακα ανάλυσης εφαρμόζει καλά, και μπορεί να χρησιμοποιηθεί με την CTL Arcade WordPress προσθήκη.

Προσαρμόστε το The Sorcerer - HTML5 Game και ξεκινήστε την puzzle μαγεία!

7. Game Christmas Furious

Αυτή είναι η εποχή για διασκέδαση!

Το πρότυπο παιχνιδιού HTML5 του Game Christmas Furious φέρνει πλήρη υποστήριξη σε ποντίκι και οθόνη αφής σε όλες τις πλατφόρμες.

Game Christmas FuriousGame Christmas FuriousGame Christmas Furious

Περιλαμβάνει:

  • 6 επίπεδα
  • Αρχεία του Construct 2
  • Photoshop και Illustrator αρχεία
  • Και πολλά περισσότερα

Μπαλόνια εισβάλλουν το Βόρειο Πόλο—θα μπορέσει ο Άι Βασίλης να πιάσει όλα τα δώρα και να αποφύγει τα μπαλόνια?

Το πρότυπο παιχνιδιού HTML5 του Game Christmas Furious είναι έτοιμο για να παίξετε ή να το προσαρμόσετε όπως θέλετε.

8. HTML5 3D BlackJack - HTML5 Casino Game

Το HTML5 3D BlackJack - HTML5 Casino Game περιλαμβάνει:

  • Διαχωρισμός φύλλων σε δύο διαφορετικά χέρια
  • Διπλό στοίχημα
  • Χαρακτηριστικό ασφάλειας

Αλλά το καλύτερο είναι το υψηλής ανάλυσης 3D γραφικό στύλ.

3D Roulette - HTML5 Casino Game3D Roulette - HTML5 Casino Game3D Roulette - HTML5 Casino Game

Αυτό το παιχνίδι έχει αναπτυχθεί με HTML5, JavaScript, CreateJS, και είναι έτοιμο για να παίξετε καθώς και αρκετά προσαρμόσιμο.

Μπορείτε ακόμα και να ανεβάσετε το ποσό στο HTML5 3D BlackJack - HTML5 Casino Game και με την CTL Arcade WordPress προσθήκη.

9. Game FlapCat Steampunk

Το Game FlapCat Steampunk είναι βασισμένο σε παρόμοια, πολύ επιτυχημένα παιχνίδια, με τον απλό σχεδιασμό και δυνατότητα αναπαραγωγής του.

Απολαύστε αυτό το παιχνίδι είτε με ποντίκι είτε με οθόνη αφής, καθώς τα υποστηρίζει πλήρως, και είναι σε 1280x720 ανάλυση.

Game FlapCat SteampunkGame FlapCat SteampunkGame FlapCat Steampunk

Αυτή η cool γάτα περιέχει:

  • Απεριόριστο αριθμό επιπέδων
  • Αρχεία του Construct 2
  • Photoshop και Illustrator αρχεία
  • Και πολλά περισσότερα

Το Game FlapCat Steampunk έχει πολύ ωραία γραφικά, και είναι έτοιμο για να παίξετε ή να το προσαρμόσετε όπως επιθυμείτε.

10. 3D Roulette - HTML5 Casino Game

Όπως και το HTML5 3D BlackJack - HTML5 Casino Game, το 3D Roulette - HTML5 Casino Game έχει απίθανη 3D εμφάνιση υψηλής ποιότητας.

3D Roulette - HTML5 Casino Game3D Roulette - HTML5 Casino Game3D Roulette - HTML5 Casino Game

Επίσης, έχει αναπτυχθεί χρησιμοποιώντας:

Μπορείτε πολύ εύκολα να τροποποιήσετε το 3D Roulette - HTML5 Casino Game, εφόσον κατεβάσετε και επεξεργαστείτε τα αρχεία του Photoshop και Illustrator. Επιπλέον, μπορείτε να το εγκαταστήσετε άμεσα μέσω του WordPress, χρησιμοποιώντας την CTL Arcade WordPress προσθήκη.

11. Bubble Shooter - HTML5 Games

Το Bubble Shooter - HTML5 Games μου θυμίζει αρκετά το Snood, και άλλα παιχνίδια όπως αυτό.

Αυτό το απλό αλλά ταυτόχρονα και εθιστικό παιχνίδι, μπορεί να εγκατασταθεί ως έχει, ή να τροποποιηθεί όπως εσείς επιθυμείτε.

Bubble Shooter - HTML5 GamesBubble Shooter - HTML5 GamesBubble Shooter - HTML5 Games

Εκείνο το πρότυπο παιχνιδιού HTML5 είναι σε 870x1504 ανάλυση, ανταποκρίνεται πλήρως, και μπορεί πολύ εύκολα να τροποποιηθεί χρησιμοποιώντας τα αρχεία του Photoshop και του Illustrator.

Έχει αναπτυχθεί με HTML5, JavaScript και CreateJS, είναι έτοιμο για να παίξετε και μπορείτε να το εγκαταστήσετε απευθείας στο WordPress χρησιμοποιώντας την CTL Arcade WordPress προσθήκη.

12. Woblox

Το Woblox, είναι πιθανότατα το πιο εθιστικό παιχνίδι σε αυτή τη συγκέντρωση πρότυπων παιχνιδιών HTML5.

Προσθέστε το δικό σας λογότυπο, και το παιχνίδι ξεκινάει!

WobloxWobloxWoblox

Αυτό το παιχνίδι θα λειτουργήσει σε όλες τις πλατφόρμες, αλλά θα ήταν καλύτερα να χρησιμοποιήσετε μια οθόνη αφής επειδεί θα θέλετε αργότερα να σύρετε τα κομμάτια στη θέση τους για να θέσετε το πράσινο μπλοκ ελεύθερο.

Το παιχνίδι περιλαμβάνει:

  • Ανάλυση 384x600
  • 45 προοδευτικά επίπεδα
  • Χρησιμοποιεί λιγότερα από 100 events του Construct 2
  • Και άλλα

Εύκολα προσαρμόσιμο και εξίσου εθιστικό, το Woblox είναι ένα εξαιρετικό πρότυπο παιχνιδιού HTML5.

13. Sliding Puzzle

Το πρότυπο παιχνιδιού HTML Sliding Puzzle, περιέχει τρεις διαφορετικές λειτουργίες:

  • Κλασσικό
  • Πρόκληση
  • Διασκέδαση

Κάθε λειτουργία υιοθετεί μια διαφορετική προσέγγιση στη βασική ιδέα του παζλ της εναλλαγής και προσθήκης κομματιών μεταξύ τους έως ότου ολοκληρωθεί η κωδικοποιημένη εικόνα.

Sliding PuzzleSliding PuzzleSliding Puzzle

Φορτώστε τις δικές σας εικόνες, προσαρμόστε το σχέδιο και τις ρυθμίσεις που θέλετε, και μετά μπορείτε να ξεκινήσετε να χρησιμοποιείτε το πρότυπο παιχνιδιού HTML5 Sliding Puzzle.

14. Don't Crash

Μην συγκρουστείτε.

Αυτό είναι.

Μπορεί να ακούγεται εύκολο, αλλά αυτό το μαγευτικό πρότυπο παιχνιδιού HTML5 θα σας εξιτάρει την περιέργεια.

Dont CrashDont CrashDont Crash

Τα χαρακτηριστικά που περιλαμβάνει είναι τα εξής:

  • Υποστήριξη για οθόνη αφής
  • Ανταποκρίνεται πλήρως
  • Ανάλυση 1280x720
  • Περιέχει αρχεία του Construct 2
  • Και άλλα

Και μη ξεχνάτε—Μη συγκρουστείτε!

15. HTML5 Slot Machine: Jackpot 777

Το πρότυπο του HTML5 Slot Machine: Jackpot 777, περιέχει όλα όσα χρειάζεστε για να το κάνετε δικό σας.

HTML5 Slot Machine Jackpot 777HTML5 Slot Machine Jackpot 777HTML5 Slot Machine Jackpot 777

Τα χαρακτηριστικά που περιλαμβάνει είναι τα εξής:

  • Αρχεία του Illustrator
  • Αρχεία του Construct 2
  • Έλεγχος ποντικιού και οθόνη αφής
  • Και άλλα

Πιάστε το λαχείο με το πρότυπο παιχνιδιού HTML5, του HTML5 Slot Machine: Jackpot 777.

16. Katana Fruits - HTML5 Game

Γίνετε ο επόμενος ninja φρούτων, με το εξαιρετικά προσαρμόσιμο πρότυπο παιχνιδιού HTML5 - Katana Fruits.

Katana Fruits - HTML5 GameKatana Fruits - HTML5 GameKatana Fruits - HTML5 Game

Αυτό το πρότυπο παιχνιδιού HTML5, αναπτύχθηκε με εντολές κώδικα από τα εξής:

Μπορείτε να επεξεργαστείτε την εμφάνιση και την υφή, με τα αρχεία Photoshop και Illustrator που περιλαμβάνονται, και να το εγκαταστήσετε απευθείας στο WordPress χρησιμοποιώντας την CTL Arcade WordPress προσθήκη.

17. Panda Love

Ετοιμοι? παμε!

Αυτό το γρήγορο panda πρέπει να καθοδηγηθεί ώστε να περάσει τα εμπόδια, να συλλέξει βραβεία, και να τελειώσει κάθε ένα από τα 20 επίπεδα.

Panda LovePanda LovePanda Love

Το πρότυπο περιέχει αρχεία του Construct 2, και τα εξής χαρακτηριστικά:

  • Αυτόματη αποθήκευση
  • Υποστήριξη διαφημίσεων
  • Έλεγχος με ένα άγγιγμα
  • Και πολλά περισσότερα

Δείξτε λίγη pixel αγάπη με το Panda Love.

18. HTML5 Tetris

Απ' όλα τα πρότυπα παιχνιδιών HTML5, το HTML5 Tetris είναι το αγαπημένο μου.

Είναι δύσκολο να κάνεις λάθος με ένα κλασσικό παιχνίδι.

HTML5 TetrisHTML5 TetrisHTML5 Tetris

Με υποστήριξη οθόνη αφής και ανάλυση 800x600, μπορείτε να κάνετε τα εξής:

  • Να αλλάξετε τους ήχους και την μουσική
  • Να προσαρμόσετε την εμφάνιση του παιχνιδιού
  • Χρησιμοποιήστε το αρχείο του Photoshop για να το επανασχεδιάσετε

Δημιουργημένο με το GameMaker Studio, το πρότυπο παιχνιδιού HTML5 Tetris ταιριάζει υπέροχα για όλους.

19. Let's Park!-High Quality Parking Game

Το Let's Park!-High Quality Parking Game πολύ ωραια οπτικά χαρακτηριστικά και λειτουργεί ομαλά.

Lets Park-High Quality Parking GameLets Park-High Quality Parking GameLets Park-High Quality Parking Game

Περιλαμβάνονται τα εξής αρχεία:

  • Αρχείο HTML5
  • Photoshop αρχείο
  • Αρχεία project του Construct 2

Το πρότυπο παιχνιδιού HTML5 του Let's Park!-High Quality Parking Game, παρέχει υποστήριξη ελέγχου της οθόνης αφής και του πληκτρολογίου, αλλά συνιστάται ιδιαίτερα για οθόνες αφής.

20. Angry Finches - Funny HTML5 Game

Νομίζω ότι είναι προφανές τι παιχνίδι το Angry Finches - Funny HTML5 θυμίζει.

Angry Finches - Funny HTML5 GameAngry Finches - Funny HTML5 GameAngry Finches - Funny HTML5 Game

Έχει φτιαχτεί με το GameMaker Studio, και περιέχει:

  • 20 επίπεδα
  • Photoshop αρχεία
  • Προσαρμόσιμους ήχους και μουσική
  • Και πολλά περισσότερα

Χρησιμοποιήστε το πρότυπο του Angry Finches - Funny HTML5 Game για να δημιουργήσετε το δικό σας παιχνίδι βασισμένο στο Angry Birds.

Συμπέρασμα

Μερικά από αυτά τα πρότυπα είναι απλά, ενώ άλλα στοχεύουν σε ολοκληρωμένες ιδέες παιχνιδιών. Είτε ψάχνετε κάτι για την ιστοσελίδα σας είτε μαθαίνετε πώς να πραγματοποιήσετε την δική σας ιδέα, μπορείτε ξεκάθαρα να δείτε πόσο ποικιλόμορφα τα πρότυπα παιχνιδιών HTML5 είναι.

Μπορεί επίσης να βρείτε χρήσιμο έναν Envato Tuts+ οδηγό εκμάθησης για κώδικα σχετικά με σχεδιασμό παιχνιδιών ή για μηχανισμούς παιχνιδιών, ή και ακόμη ένα HTML5 οδηγό εκμάθησης, ώστε να ξεκινήσετε με κώδικα το δικό σας παιχνίδι.

Καλό παιχνίδι.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.