Mein erstes Videospiel: “Avoid the asteroids”
Ich wollte schon immer mal ein eigenes Spiel schreiben. Bisher hat mich allerdings abgehalten, dass ich keine hierfür geeignete Programmiersprache flüssig konnte. Ich habe jetzt zwar keine neue Sprache gelernt, aber in den letzten Wochen mein Javascript wissen um ein paar Canvas Funktionen erweitert, wie man hier schon in den vorherigen Posts gesehen hat.
Als ich jetzt über die Weihnachtstage zu Hause war, hatte ich ein bisschen Langeweile, also habe ich mir den Laptop meiner Mutter geschnappt und ein bisschen drauf los geschrieben. Es hat alles ganz simpel angefangen mit einem Hintergrund, auf dem ich dann Wolken animiert habe. Dann wollte ich, dass man eine Spielfigur in der Welt bewegen konnte und von da an hat sich der Rest verselbstständigt.
Das besondere an diesem Spiel (gegenüber den meisten anderen Spielen die ihr so online spielt) ist die Technik, mit der es funktioniert. Da es mit Javascript geschrieben ist, funktioniert es bei praktisch jedem (vorausgesetzt der Browser ist aktuell genug), denn es werden keine zusätzlichen Plugins wie Adobe’s Flash benötigt. Außerdem kann man das Spiel theoretisch in jeder Auflösung gestochen scharf spielen, da ich keinerlei Grafiken benutzt habe. Alles von der Wolke bis zu der Spielfigur ist in Javascript/Canvas berechnet. Praktisch benötigt man natürlich für höhere Auflösungen auch mehr Rechenpower, da mehr Pixel berechnet werden müssen.
Das hat sich sogar schon bemerkbar gemacht, als ich das Kamerawackeln einbaute, welches eintritt, sobald ein Asteroid aufschlägt. Anfangs hatte ich diesen Effekt mit einer Canvas internen Funktion gelöst, welche jeden Pixel aufnimmt, sodass ich diesen dann um eine zufällige Zahl verschieben und neu platzieren konnte. Wie sich jeder denken kann wird diese Operation mit mehr Pixeln rechenintensiver (besonders wenn sie mehrmals pro Sekunde ausgeführt werden muss). Ich wollte aber auch nicht auf diesen Effekt verzichten, da er das Spiel um einiges atmosphärischer machte. Also habe ich mir eine andere Lösung ausgedacht, welche praktisch den selben Effekt erzeugt und dabei viel weniger Rechenpower verbraucht: Ich bewege einfach die ganze Spielfläche (den Canvas) auf einmal und nicht jeden Pixel einzeln. Für den Spieler sieht das fast gleich aus, da die Pixel ja praktisch schon verschoben werden, nur nun sehr viel perfomanter vom browserinternen und nicht mehr von meinem Code.
Bonusinfo: Die Spielfigur ist nur deshalb ein Segway Fahrer, da dessen Silhouette einem Rechteck sehr nahe ist, was mir die Kollisionsberechnung erleichtert. Andere Rechteck ähnliche Spielfiguren die keine Animation brauchen sind mir leider auf Anhieb nicht eingefallen.
Bonusinfo2: Die Idee schnelleren Asteroiden eine andere Farbe zu verpassen stammt von Nils, der als mein Testspieler herhalten musste durfte.
Vielleicht mache ich irgendwann in der Zukunft mal eine bessere Version dieses Spiels mit Grafiken und mehr Abwechslung und Multiplayer Unterstützung und was mir sonst noch so einfällt…
Bis dahin könnt ihr Meinungen und Highscores (meiner ist 3522) in den Kommentaren hinterlassen!
Schnee… <3
Canvas hats mir angetan, hier mal wider eine kleine Spielerei:
Canvas Demo 2
Und noch eine Canvas Demo. Diese benutzt fast den selben Code wie die letzte, ist aber interaktiv. Zum ausprobieren einfach mit dem Cursor über die leere Fläche unter diesem Text fahren. Wer sein so selbst gemaltes Kunsterk nicht verlieren will, kann einfach durch einen Rechtsklick auf den Canvas “Grafik speichern unter” auswählen.
Canvas Demo
Nils hat in seinem allerersten Post erwähnt, dass ich euch jetzt auch mit Code-Spielereien erfreuen kann, weil wir neue Funktionen in unseren neuen Blog eingebaut haben. Das muss ich natürlich sofort beweisen und zeige euch deshalb hier ein kleines Html5 Experiment von vor ein paar Wochen. Das Ganze kann allerdings nichts, außer schön aussehen!
Juhu, mein Lieblingsblog ist wieder da!
Ho, Ho, Ho! Das Jahr neigt sich zu Ende, die Menschen fragen sich was Silvester läuft, oder kaufen noch letzte Weihnachtsgeschenke ein. Für Geschenke wird es knapp. Wenn man schon lange weiß was man schenken will, sollte man das auch schon lange besorgt haben, sonst kann man sich etwas Neues überlegen. Dinge, auf die man das ganze Jahr über keine 2 Tage hätte warten müssen, gibt es jetzt einfach nicht mehr. Es scheint mir, als hätte Amazon nicht gewusst, dass Weihnachten schon am 24ten ist. Nun gut, man ist ja flexibel. Aber selbst in der katastrophalsten Weihnachtsplanung gibt es nun einen Lichtblick:
Euer Lieblingsblog ist wieder da!
Und das pünktlich zur lesefreundlichsten Jahreszeit. Es hat sicher jeder von euch schon mal davon geträumt, wie er mit Familie oder Freund/in vor dem leuchtenden Weihnachtsbaum sitzt, welcher den dunklen Wintertag viel erträglicher macht. Dabei ein MacBook Pro auf dem Schoß, 17“, damit ihr auch alle auf dem Bildschirm den neusten Eintrag auf niti.tv lesen könnt. Herrlich. Und das Tollste ist: Wir machen es möglich! Ihr müsst euch nur um Familie, Location und MacBook kümmern um diesen wunderbaren Traum leben zu können.
Der Blog ist nicht nur Zurück, sondern auch in neuem Gewand. Wir haben alle unnötigen Funktionen von niti.tv entfernt und das Design sieht nicht nur schicker aus, sondern bringt auf Vorteile mit sich. Jeder Eintrag kann nun individuell designed und angepasst werden und Till kann jetzt Code-Spielereien einbauen, aber das zeigt er euch sicher selber. Da das Design aber noch sehr jung ist, freuen wir uns über jedes Feedback und werden versuchen es mit unseren Ideen zu vereinbaren. Falls wir Lust haben.
