Bessere Präsentationen mit reveal.js

HTML, JavaScript und CSS sind heutzutage die Basics die jeder Software Entwickler beherrschen sollte. Da liegt es doch nahe auch Präsentationen damit zu erstellen. Einer der Vorteile ist das ein Browser überall installiert sein sollte, und das lästige mitschleppen von PowerPoint Viewern auf USB-Sticks entfällt. Einfach ins Internet “gießen” und loslegen. Natürlich gibt es auch […]

Quelle: Bessere Präsentationen mit reveal.js | joocom GmbH – Ihr Community Dienstleister in Hannover

[Snippet/Javascript] jquery.toggleAttr

In jQuery gibt es die Funktionen „toggle“ um Elemente ein/auszublenden und „toggleClass“ um zwischen 2 CSS-Klassen hin und her zu wechseln. Da liegt es doch nahe diese Funktion auch für sämtliche HTML-Attribute umzusetzen. Ich brauchte diese Funktion um komfortabel via Button ein Passwortfeld zu einem normalen Feld zu switchen.

(function ( $ ) {
	$.fn.toggleAttr = function(attr, value) {
		if (!this.data('old-attr')) this.data('old-attr', this.attr(attr));
		if (!this.data('new-attr')) this.data('new-attr', value);
		if (!this.data('toggle-attr')) this.data('toggle-attr', attr);
		if (this.attr(attr) == value) this.attr(attr, this.data('old-attr'));
		else this.attr(attr, value);
		return this;
	};
}( jQuery ));

Anwendungsbeispiel:

<input placeholder="Passwort" type="password" />
<button type="button" onclick="$(this).prev('input').toggleAttr('type','text')">
  show/hide pass
</button>

Den Code findet ihr auch auf GitHub.

Objektorientiertes JavaScript Spiel

Dieses kleine Spiel soll mit einfachen Mittel zeigen das man auch in JavaScript gutlesbaren, objektorientierten Code schreiben kann.

Als Unterstützung verwende ich die jQuery Bibilothekt um mir das arbeiten mit dem DOM und das Positionieren zu erleichtern.

Für das ganze Spiel werden nur 4 Objekte benötigt, wobei eines nur ein Containerobjekt für Tastencode-Zuweisungen ist. Ich habe für alle Objekte eine eigene Datei erstellt um eine gute Lesbarkeit zu erreichen. Immer wenn die Datei ein JavaScript-Objekt repräsentiert schreibe ich den Dateiname groß.

Unser Startpunkt ist die Datei Game.js. Als Erstes wird für jedes Element mit der Klasse „.game“ eine Game-Objekt erzeugt, dadurch werden auch die im Konstruktor definierten Variablen zugewiesen und Methoden ausgeführt. Ich initialisiere einen KeyListener um auf Tastatureingaben zu reagieren. In der Datei „util.js“ ist das Containerobjekt mit den Tastencode-Zuweisungen.

In der Methode „run()“ wird das Spiel gestartet. Mit der setInerval Funktion des Window-Objekts erreichen wir eine dauerhafte Ausführung unseres Spiels. In jedem Durchlauf können wir die Hindernisse bewegen, Kollision zwischen Spieler und Gegenständen feststellen und gegeben Falls darauf reagieren.

Im Konstuktor des Game-Objektes wird außerdem für jedes Hinderniss und den Spieler jeweils Objekte erstellt. Diese sind dem Game-Objekt bekannt um in der „run()“
Methode mit ihnen zu arbeiten.

$(document).ready(function () {

    $('.game').each(function () {
        new Game($(this));
    });

});

function Game($game) {
    this.$board = $game.find('.board');
    this.speed = 10;
    this.pause = false;
    this.gameOver = false;
    this.player = new Player(this.$board);
    this.$text = $game.find(".text");
    this.barriers = this.initBarrier();
    this.initKeyListener();
    this.run();
}

Game.prototype.run = function () {
    var game = this;
    var $player = game.player.$player;

    window.setInterval(function () {

        if (game.gameOver || game.pause) {
            return;
        }

        $.each(game.barriers, function (i) {

            this.move();

            if ($player.collidesWith(this.$barrier).length) {
                game.gameOver = true;
                game.$text.text("GAME OVER!");
            }

            if ($player.offset().top > (game.$board.height() + $player.height())) {
                game.pause = true;
                game.$text.text("WIN!");
            }

        });

    }, game.speed);
};

Game.prototype.initKeyListener = function () {
    var game = this;
    $(window).bind('keydown', function (e) {
        switch (e.keyCode) {

            // Reset
        case Keys.ESC:
            game.player.reset();
            game.pause = false;
            game.gameOver = false;
            game.$text.text("");
            break;

            // Pause
        case Keys.SPACE:
            game.pause = !game.pause;
            break;

            // Spieler zurücksetzen
        case Keys.POS1:
            if (!game.pause && !game.gameOver) game.player.reset();
            break;

        case Keys.LEFT:
            if (!game.pause && !game.gameOver) game.player.moveLeft();
            break;

        case Keys.UP:
            if (!game.pause && !game.gameOver) game.player.moveUp();
            break;

        case Keys.RIGHT:
            if (!game.pause && !game.gameOver) game.player.moveRight();
            break;

        case Keys.DOWN:
            if (!game.pause && !game.gameOver) game.player.moveDown();
            break;

        default:
            break;
        }
    });
};

Game.prototype.initBarrier = function () {
    var $board = this.$board;
    var barriers = [];
    $board.find('.barrier').each(function () {
        barriers.push(new Barrier($board, $(this)));
    });
    return barriers;
};

Das Player-Objekt wird lediglich vom KeyListener angesprochen. Je nach Tastatureingabe wird das enthaltene HTML bzw. jQuery Objekt bewegt.

function Player($board) {
    var p = this;
    p.speed = 5;
    p.$board = $board;
    p.$player = p.$board.find('.player:eq(0)');
}

Player.prototype.reset = function () {
    this.$player.css("margin", "0");
};

Player.prototype.moveUp = function () {
    var p = this;
    if (p.$player.offset().top > p.$board.offset().top) {
        p.$player.css("margin-top", "-=" + p.speed + "px");
    }
};

Player.prototype.moveDown = function () {
    var p = this;
    if (p.$player.offset().top < (p.$board.height() + p.$player.height())) {
        p.$player.css("margin-top", "+=" + p.speed + "px");
    }
};

Player.prototype.moveLeft = function () {
    var p = this;
    if (p.$player.offset().left > p.$board.offset().left) {
        p.$player.css("margin-left", "-=" + p.speed + "px");
    }
};

Player.prototype.moveRight = function () {
    var p = this;
    if (p.$player.offset().left - p.speed < p.$board.width()) {
        p.$player.css("margin-left", "+=" + p.speed + "px");
    }
};

Die „move()“ Methode des Barrier Objektes wird in jedem Durchlauf der „run()“ Methode aufgerufen, dadurch bewegt es sich automatisch und wird so „animiert“.

function Barrier($board, $barrier) {
    var b = this;
    b.$board = $board;
    b.$barrier = $barrier;
    b.moveLeft = false;
    b.sign = "+";
    b.range = 1;
}

Barrier.prototype.move = function () {
    var b = this;

    // Move left
    if (b.nachLinks || (b.$barrier.offset().left + b.$board.position().left >= b.$board.width())) {
        b.sign = "-";
        b.nachLinks = true;
    }

    // Move right
    if (b.$barrier.offset().left <= b.$board.offset().left) {
        b.sign = "+";
        b.nachLinks = false;
    }

    b.$barrier.css("margin-left", b.sign + "=" + b.range + "px");

};

Hier könnt ihr meine Sourcen Downloaden um sie euch genauer anzusehen und vielleicht selber noch ein bisschen damit rum zu spielen.

Download

[Snippet/Javascript] Div mitscrollen

Hier mal wieder ein Mini Snippet zu JavaScript. Mit jQuery ist es ziemlich einfach Scroll-Eigenschaften

auf ein anderes Element zu übertragen. Wenn also das obere Div gescrollt wird, scrollt das untere

automatisch mit. Anbei der Quelltext und hier eine Livedemo.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
      <title>test</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
      <style type='text/css'>
         div { font-size:200px; width:200px; height:100px; white-space:nowrap; overflow:scroll }
         div + div { overflow:hidden }
      </style>
   </head>
   <body>
      <div id="div1">test test test test test test</div>
      <div id="div2">test test test test test test</div>
      <script type="text/javascript">
         $('#div1').scroll(function() {
         $('#div2').scrollLeft(this.scrollLeft);
         $('#div2').scrollTop(this.scrollTop);
         });
      </script>
   </body>
</html>