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

Hier noch ein cooles nerdiges Video aus den tiefen des Netzes

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>

(via Amy an Pink)

Ich habe einen solchen Antrag gestellt, als mir die Einladung zur Musterung ins Haus geflattert ist. Ihr könnt ihn aber auch schon vorher z.B. bei eurer Erfassung stellen.

Mein Antrag wurde ohne Murren angenommen und ich empfehle jedem dritten Sohn es mir gleich zu tun. Wichtig ist das der Dienst komplett abgeleistet wurden. Üblich sind z.B. Wehr- oder Zivildienst. Im im Gesetz kann genau nachgelesen werden welche Dienste anerkannt wird.

An euer Kreiswehrersatzamt muss geschickt werden:

• der Antrag in Form eines Formellen Schreibens
• die Bescheinigungen, das eure Brüder einen Dienst geleistet haben (Wehrdienstzeitbescheinigung bei Wehrdienst und Dienstzeitbescheinigung bei Zivildienst)
• die Abstammungsurkunden der drei betreffenden Personen

Das ganze solltet ihr als Einschreiben verschicken! Falls eine Bescheinigung verloren gegangen ist kann sie bei der entsprechenden Behörde neu angefordert werden.

Für das schreiben könnt ihr gerne meine Vorlage verwenden:

Antrag auf Wehrdienstbefreiung

// Meldung nach 3 Sekunden wieder ausblenden
var meldung = document.getElementById("meldung");
if (meldung) {
	window.setTimeout( function() { divAusblenden("meldung",meldung.offsetWidth-10,meldung.offsetHeight-10);}, 3000);
}

// Meldungen langsam kleiner werden lassen und dann ausblenden
function divAusblenden(id, breite, hoehe) {
	var reentrant = 0;
	if( ! reentrant ) {
		reentrant = 1;
		var move = 0, element = document.getElementById(id);

		if(hoehe > 0 ){ hoehe -= 1; move++; }
		if(breite > 0 ){ breite -= 1; move++; }
		element.style.visibility = (breite > 0 && hoehe > 0) ? 'visible' : 'hidden';

		if( move ) {
			element.style.height = hoehe + 'px';
			element.style.width = breite + 'px';
			if (hoehe >= 1 && hoehe <=12) {
				element.style.fontSize = hoehe-1 + 'px';
			}
			window.setTimeout( function(){ divAusblenden(id,breite,hoehe); }, 30 );
		}
		reentrant = 0;
	}
}

<?php
session_start();
if (isset ($_GET[logout])) {
	$logout = $_GET[logout];
	if ($logout == "ja") {
		if (isset($_COOKIE[session_name()])) {
    		setcookie(session_name(), '', time()-42000, '/');
			echo ("Erfolgreich Ausgelogt<br />
				   <a href='../'>&lt;-zu&uuml;ck zur Startseite</a>");
			session_unset();
			die();
			}
	}
}

$base_url = dirname(__FILE__);
if (file_exists($base_url."/news_config.php")) {
	include "".$base_url."/news_config.php";
}

if (!isset ($_SESSION[name])) {
	$_SESSION[pass] = md5($_POST['passwort']);
	$_SESSION[name] = $_POST['user'];
}
if ($_SESSION[name] != $adminname){
	echo "Falscher Benutzername";
	session_destroy();
} else {
	if ($_SESSION[pass] != $admin_password){
		echo "Passwor falsch";
		session_destroy();
	} else {
		$recht= "ja";
		include 'news_funktionen.php';
		news_speichern();
		news_loeschen();
		kommentare_loeschen();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>News Admin</title>
<script type="text/javascript" src="js/pruefefelder.js"></script>
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script type="text/javascript" src="js/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
	var stretchers = document.getElementsByClassName('box');
	var toggles = document.getElementsByClassName('tab');
	var myAccordion = new fx.Accordion(
		toggles, stretchers, {opacity: false, height: true, duration: 100}
	);
	//hash functions
	var found = false;
	toggles.each(function(h3, i){
		var div = Element.find(h3, 'nextSibling');
			if (window.location.href.indexOf(h3.title) > 0) {
				myAccordion.showThisHideOpen(div);
				found = true;
			}
		});
		if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>
<link href="css/newsadmin.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">
	<div id="content">
	<h3 class="tab" title="first"><div class="tabtxt"><a href="#">zeigen</a></div></h3>
   	<div class="tab"><h3 class="tabtxt" title="schreiben"><a href="#">schreiben</a></h3></div>
	<div class="tab"><h3 class="tabtxt" title="loeschen"><a href="#">l&ouml;schen</a></h3></div>
	<div class="tab"><h3 class="tabtxt" title="Kommentare"><a href="#">Kommentare</a></h3></div>
   	<h3 class="tabtxt" title="Kommentare"><a id="logout" href="?logout=ja">Logout</a></h3>
	<div class="boxholder">
		<div class="box">
			<?php news_zeigen($a); ?>
        </div>
		<div class="box">
			<?php news_schreiben() ?>
		</div>

		<div class="box">
			<?php news_loeschen_anzeigen()  ?>
		</div>

		<div class="box">
	        <?php
			news_zeigen_admin($a);
			?>
            <iframe name="komadmin" src="news_admin_kommentare.php?<?php echo SID ?>" height="300" width="590"></iframe>
		</div>
	</div>
</div>
</div>
<script type="text/javascript">
	Element.cleanWhitespace('content');
	init();
</script>
</body>
</html>
<?
	}
}
?>

/**
 *
 * Sendet eine Ajax-Anfrage an einen Server
 *
 * @param  methode String POST oder GET / Wird etwas anderes übergeben wird GET verwendet
 * @param  zielUrl String An Was die Anfrage geschickt werden soll (z.B. ein Skript auf dem Server)
 * @param  verarbeiter CallBack Function JS-Funktion die die Rückgabe
 *         des Servers verarbeitet und die Rückgabe als Parameter bekommt
 *         (optional)
 * @param  parameter String / Array Parameter die an den Server geschickt
 *         werden sollen. Entweder einer als String Bsp.: "kekse=true" oder
 *         mehrere als Array Bsp.: ["kekse=true","kuchen=false"]
 *         (optional)
 * @return Rückgabe des verarbeiters, falls kein Verarbeiter gesetzt ist true
 *         bei Erfolg und false bei Fehlschlag
 *
 */
function sendeAnfrage(methode,zielUrl,parameter,verarbeiter) {
  if (parameter && parameter.constructor == Function) {
    verarbeiter = parameter;
    parameter = undefined;
  }

  methode = methode.toUpperCase();
  if (methode != "POST" && methode != "GET") methode = "GET";

  var request = null;
  if (window.XMLHttpRequest) request = new window.XMLHttpRequest();
  if (window.ActiveXObject) request = new window.ActiveXObject("Microsoft.XMLHTTP");
  if (request == null) return false;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      var rueckgabe = request.responseText;
      if (request.status == 200) {
        if (verarbeiter != null) return verarbeiter(rueckgabe);
        return true;
      } return false;
    }
  }

  var uebertraeger = null;
  if(parameter!==undefined) {
    if (parameter.constructor == Array) {
      for (var i in parameter)  {
        if (i > 0) uebertraeger = uebertraeger + parameter[i] + "&";
        else uebertraeger = parameter[i] + "&";
      }
    } else uebertraeger = parameter;
  }

  if (methode == "GET" && uebertraeger != null) zielUrl = zielUrl + "?" + uebertraeger;
  request.open(methode, zielUrl, true);
  if (methode == "POST") request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  request.send(uebertraeger);

}

Beispiel für die Verwendung:

// Initialisieren
var initialisirenFunktionen = [];
onload = function() {
  for (var i in initialisirenFunktionen) initialisirenFunktionen[i]();
}

// Erstelle LoadBereich
initialisirenFunktionen.push(function () {
    var loadContent = document.createElement("DIV");
    loadContent.id = "loadContent";
    document.body.appendChild(loadContent);
});

// Reichere AjaxButton um Anfrage-Event an
initialisirenFunktionen.push(function () {
    var sendenButton = document.getElementById("senden");
    sendenButton.onclick = function () {
      sendeAnfrage("POST","MeinServlet",sammleDaten(document.meinForm),schreibeResponseInLoadBox);
    };
});

// CallbackFunktion für die Ajax-Anfrage (Ergebniss verarbeiten)
function schreibeResponseInLoadBox(r) {
  var loadContent = document.getElementById("loadContent");
  loadContent.innerHTML = r;
}

Meine Funktion geht Rekursive das übergebene HTMLElement durch und guckt ob es ein
Typisches Formular Element ist (Textarea, Input und Selextbox). Ist das der Fall wird der
Value mit dem Namen in einem Array gespeichert und am Ende zurückgegeben.

/**
*
* Liefert alle Daten aus einem Formular in einem Array
*
* @param formular HTMLElement Formular in dem nach Daten gesucht werden soll
* @return Array Im Format ["key=value","key=value"]
*
*/
function sammleDaten(formular) {
	var daten = [];
	var ue = formular.childNodes;
	for (var i in ue) {
		if (ue[i].tagName && ue[i].name &&
		(ue[i].tagName == "INPUT" || ue[i].tagName == "TEXTAREA"
		|| ue[i].tagName == "SELECT")){
			var inhalt = null;
			if (ue[i].value) {
        		inhalt = ue[i].value;
    		}
			daten.push(ue[i].name+"="+inhalt);
		}
		daten = daten.concat(sammleDaten(ue[i]));
	}
	return daten;
}

Das Problem bei der Sache ist das man nicht einfach den Attribut Classname ersetzen darf da das HTML-Element vielleicht noch andere Klassen besitzt. In meiner Funktion können entweder zwei oder eine CSS-Klasse übergeben werden.
Bei zwei werden sie, falls vorhanden, getauscht, wenn noch keine von beiden vorhanden ist, wird die erste angefügt.
Bei dem Fall das nur eine Klasse übergeben wurde, wird zuerst geguckt ob die diese schon gesetzt ist. Falls ja wird sie mit nichts ersetzt andernfalls wird sie angefügt. Meine Funtion müsste sich also genauso wie das jQuery Pendant verhalten.

/**
*
* Wechselt die CSS-Klasse eines übergebenen Elements
*
* @param HTMLElement Element dessen Klasse gewechselt wird
* @param cls1 Klasse die gesetzt oder weg gemacht wird
* @param cls2 Klasse mit der getauscht wird. Falls dieser Parameter
*             nicht gesetzt ist wird cls1 durch nichts ersetzt
*/
function toggleClass(elm,cls1,cls2) {
    if (!cls2) cls2 = "";
    elm.ersetzeKlasse = function(haystack,needle) {
        var re = new RegExp(haystack,"g");
        this.className = this.className.replace(haystack,needle);
    }

    if (elm.className.indexOf(cls1) > -1) elm.ersetzeKlasse(cls1,cls2);
    else if (elm.className.indexOf(cls2) > -1) elm.ersetzeKlasse(cls2,cls1);
    else elm.className += " "+cls1;
}