spaceMaster – mein erstes Game für iOs & Android

Das Spiel, das von mir ursprünglich als Projekt im EF Informatik entwickelt wurde, ist jetzt für Android und iOs verfügbar.

Im Spiel geht es darum, dass Sie mit Ihrer Rakete durch das All fliegen und die Goldmünzen einsammeln, die Sie auf Ihrem Weg finden. Doch Vorsicht: Das All ist voll mit gefährlichen Meteoriten und feindlichen Ufos, die Ihre Münzen klauen und Sie vernichten wollen! Weichen Sie ihnen aus, um den Highscore zu knacken.

Das Spiel ist sehr einfach aufgebaut und erinnert, hauptsächlich aufgrund der Schwierigkeitsstufe, ein wenig an Flappy Bird. Auch wenn hohe Highscores auf den ersten paar Versuchen unmöglich scheinen, ist das Spiel für die eine oder andere Gelegenheit sehr zu empfehlen! Ausgetauscht werden die Highscores auf iOs mit dem GameCenter und auf Android mit Swarm.

Leider ist das Anbieten von Apps im iTunes Store nicht kostenlos, so dass ich das Spiel auch nicht gratis anbieten kann. Der Preis von CHF 1.- ist jedoch vergleichsweise sehr tief, so dass diese Kosten Sie hoffentlich nicht daran hindern, die App herunterzuladen.

Wie viele Punkte haben Sie erreicht? Schreiben Sie die Antwort in die Kommentare!

Weitere Infos zum Spiel: http://bernhard-webstudio.ch/spacemaster

JavaScript: Windows Phone Hardware Backbutton abfangen

Bei der Programmierung einer Windows Phone Applikation mit JavaScript kann der “zurück”-Button unten links am Smartphone natürlich auch abgefangen werden, um eine alternative Tätigkeit als zum Beispiel das Beenden der Applikation herbeizuführen. Im folgenden möchte ich die Vorgehensweise erklären.

In der entscheidenden HTML-Seite muss ein WinJS Application Control Element mit den Parameter onbackclick : meineFunktion erstellt werden, wobei meineFunktion der Funktion entspricht, die aufgerufen wird, wenn der Backbutton angeklickt wird. Dies sollte ungefähr folgendermassen aussehen:

<div data-win-control="WinJS.Application." data-win-options="{onbackclick : meineFunktion}" />

Anschliessed kann der EventHandler “backclick” verwendet werden. Zum Beispiel so:

document.addEventListener("backclick", meineFunktion);

Um jedoch das Standardverhalten, das Beenden der Applikation, zu unterdrücken, muss true zurückgegeben werden. Eine empfehlenswerte Verwendung ist folgende, in der Datei default.js:

<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><code class="language-javascript">app.onbackclick = function (evt) {
   meineFunktion();
   return true;
}

Element mit CSS in der Mitte positionieren

Um ein Element in der Mitte eines anderen Elements mit CSS zu positionieren muss man unter Umständen etwas improvisieren.

Für die horizontale Mitte ist es keine Schwierigkeiten. Folgendermassen mache ich es jeweils:

.container {
  display: block;
  text-align: center;
  width: 100%;
}

.child {
  position: relative;
  margin: auto;
}

Um aber die vertikale Mitte zu erreichen, ist es leider ein wenig schwieriger und vor allem kontextabhängig.

Wenn das Layout aus Tabellen besteht, so reicht vertical-align : middle;. Leider funktioniert dies nicht mit anderen Elementen wie zum Beispiel einem p in einem div.
Diese könnte man per CSS mit

.container {display: table;}

.child {
    display: table-cell;
    vertical-align: middle;
}

zu einer Tabelle machen.

Wenn bloss eine einzelne Zeile Text zentriert werden soll, so kann man dies mit line-height: Irgendwieviele px; erreichen.

Für block Elemente, die man nicht zu einer Tabelle machen möchte, gibt es noch die Möglichkeit von negativem margin und absoluter positionierung. Das sähe zum Beispiel folgendermassen aus:

.container {
  position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

Diese Lösungen funktionieren in den meisten Browsern, jedoch leider nicht mit allen HTML Tags. Es gibt ausserdem noch weitere Lösungen, mit denen ich jedoch noch keine Erfahrungen gemacht habe. Was haben Sie für Erfahrungen gemacht? Welche Lösung bevorzugen Sie? Schreiben Sie Ihre Antwort in die Kommentare oder senden Sie sie mir per e-Mail.