You may want to put some text here

HTML5 BubblePop game

Tijdens mijn ochtendritueel, wat zoveel inhoud als het lezen van nieuwe Tweets en emails, kwam ik een webontwikkeling-contest tegen. Deze wordt georganiseerd door MIX en An Event Apart. Deze laatste is ook wel gekend van hun website A List Apart, die artikels over webstandaarden publiceert.

De regels van de contest zijn simpel: maak een HTML5/CSS3 toepassing die niet groter is dan 10kb. Het idee achter deze wedstrijd is erg goed. Het is erg leuk om eens het onderste uit de kan te kunnen halen met HTML5 en CSS3 zonder je druk te moeten maken over backward compatibility, aangezien de applicatie alleen in Firefox, IE9 en een Webkit browser zoals Chrome of Safari moet werken.

Het belangrijkste aan deze contest is toch wel dat je onder die 10kb moet blijven en daarmee wordt er meteen ook een groot probleem aangekaart dat je tegenwoordig op alle websites bijna tegenkomt. Er wordt te slordig omgesprongen met bandbreedte. Bijna alle webontwikkelaars denken niet meer na tijdens het ontwikkelen over de grootte van hun website. Door een beetje je CSS en afbeeldingen te optimaliseren kan je de laadtijd van een website in sommige gevallen zelfs halveren.

Het spel

Voor de contest heb ik een spel gemaakt waarbij je zo snel mogelijk bubbels van 1 tot 30 moet wegklikken op je scherm. Klik je een verkeerde bubbel aan dan krijg je 5 seconden straftijd. Om deze applicatie te maken heb ik gebruik gemaakt van het HTML5 canvas element en de localstorage om de pauze functie werkende te krijgen. Om het spel uit te testen kan je deze demo link gebruiken.

Als je het spel wilt testen, zorg dan dat je dit zeker met een nieuwe browser doet.

Broncode

Omdat er sommige lezers misschien wel geïnteresseerd zijn in de broncode van dit spel heb ik hieronder een download link gemaakt. In die zip vindt je de originele en de compressed versie. Bij de compressed versie heb ik gebruik gemaakt van een tooltje dat de spaties en overbodige characters gaat verwijderen uit de CSS en JS bestanden. Door deze compressie is de grootte van de applicatie van 12,3kb naar 9,02kb gegaan. Dat is toch een compressie van ongeveer 30%.

Download broncode

Stemmen

Als je wilt dan mag je altijd op mijn applicatie stemmen.

The Author of this post is Wim Mostmans

Wim Mostmans heeft een eigen webontwikkeling bedrijf Sitebase waar hij voltijds voor werkt. Hij beheert ook nog enkele websites waaronder deze en een Computerforum. Blijf op de hoogte van waar Wim mee bezig is door hem te volgen op Twitter.

Leave a Comment