Tutorial: HTML5/jQuery Snake

By Kishan on September 1st, 2012
html5 snake

HTML5 biedt ons de mogelijkheid om “on the fly” te kunnen “tekenen” op een website. Doormiddel van scripts (JavaScript) kunnen we aangeven wat er op het scherm geplaatst kan worden. Dit wilt dus zeggen dat wij ook HTML5/Javascript games kunnen ontwikkelen. Vele bedrijven die eerder games in Flash aan het ontwikkelen waren, zijn nu aan het overstappen naar HTML5. Eerder heb ik een tutorial gevolgd en wil dit nu met jullie delen. Dit is niet voor beginners, maar met een beetje voorkennis van JavaScript (jQuery) kan je het zeker wel begrijpen.

Wat gaan we maken?

We gaan een klassieke snake game bouwen in HTML5. Geen ingewikkelde spelregels, gewoon een simpele playground met een muur waartegen de slang niet mag botsen en we houden de punten ook bij. Verder mag de slang niet met zichzelf botsen en groeit elke keer als hij zijn voeding eet. Voor elke voeding die de slang eet, krijg je 1 punt.

De planning

Nu we de spelregels kennen moeten we een planning maken. Wat gaan we allemaal moeten programmeren? Welke functies gaan we gebruiken? Deze vragen kunnen ons helpen met de planning. Hierbij de stappen:

  • We maken eerst een playground van 500x500px
  • We gaan werken met blokken van 10x10px (voeding = 1 blok, begin snake = 4 blokken)
  • We bouwen de slang (array van blokken)
  • De snake beweegt initieel naar rechts
  • We bouwen de voeding (willekeurig plek binnen de playground)
  • We moeten nu een blok kunnen tekenen
  • Controleren op botsingen
  • Keyboard toetsen accepteren voor bewegingen
  • Het spel tekenen

Bij het bovenstaande moeten we met de volgende rekening houden:

  • De slang laten we bewegen door het achterste blok (staart) te verwijderen en deze aan de voorkant in de gekozen richting te plaatsen
  • Een botsing met de slang zelf wilt zeggen dat de nieuwe positie van het eerste blokje (kop) voorkomt in de array van de slang
  • Er zijn 50 posities (500/10) op de x-as en op de y-as, de voeding kan dus niet hierbuiten geplaatst worden
  • De slang heeft zijn voeding gegeten als de nieuwe positie van de kop overeenkomt met de positie van de voeding
  • Bij het eten wordt er een nieuwe kop geplaatst en de staart blijft op zijn positie

 

De HTML

Veel HTML code hebben we niet nodig. Het meeste gaat in JavaScript (jQuery) gebeuren.

 

Canvas Stuff en variabelen

We gaan beginnen met wat basic canvas stuff en wat variabelen definiëren.

Initiële functie

 

 

De slang

De voeding

Teken de blokjes

Controleer Botsing

Keyboard control

Positie wordt veranderd met de keyboard. De slang mag niet achteruit gaan lopen, dus als de slang rechts gaat, gaat de links knop geen effect hebben. De toetsenbordcodes zijn hier te vinden: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Het spel “tekenen”

 

Complete code

 

Update: Spelen op mobiel

Helemaal vergeten aan te halen dat de meeste recente mobiele telefoons ook HTML5 canvas ondersteunen. Je moet dan wel je canvas grootte veranderen (in je HTML) en de toetsenbord knoppen veranderen (telefoons hebben geen pijltjes toetsen). Hieronder heb ik dat veranderd in W (boven), A (links), S (onder) en D (rechts)

 

Ik hoop dat dit interessant was. Klik hier voor de demo.

Hou het niet hierbij als je het gaat uitproberen, probeer het ook te variëren en laat mij zeker de resultaten zien 🙂

Wat u nu kunt doen?

Contact mij!

Fotografie diensten nodig? Wilt u een website hebben of wilt u een social media strategie ontwikkelen voor uw bedrijf of product? Neem contact op met mij.

Reageer

Is er iets onduidelijk? Of wilt u uw mening geven? Is er iets wat ik verkeerd gezegd heb? Laat een reactie achter

1 Comment

Posted By: Robbert On: April 25, 2013 At: 11:33 am

Ziet er goed uit, heb m even getest tot zover niks bijzonders gezien. zal de code nog even inkijken waar daar gaat het mij om. Kan ik nog wat van leren 🙂

Reageer