Sensation 2.0

Nach dem PC Spiel des Jahres 2007 jetzt

Das PC Spiel des Jahres 2007 2.0

Neue Features

Der Spielcharakter erweitert sich dynamisch
Steuerung in eine weitere Dimension
Steuerung mit der Tastatur

Deine Mission

Sammle so viele Punkte wie nur möglich und gehe dabei nicht mit dem Kopf durch die Wand oder den Gegner.

Das Spiel

Das Spiel gibt es natürlich wieder kostenlos. Einfach in einer HTML-Datei speichern und im Browser öffnen. Keine Kosten oder unrealistische Hardwareanforderungen. Nur Javascript muss aktiviert sein und der Spass beginnt. Im Firefox ruckelt es leider manchmal.

<html>
<style type="text/css">
.field{
 background : #788;
 position:absolute; 
 top:100px; left:100px; width:624px; height:464px; 
}
.control{
 background : #e2e2e2;
 position:absolute; 
 width:100px; height:80px; 
 border:solid 1px #000;
 text-align:center;
 line-height: 80px;
}
</style>

<script type="text/javascript">
var height = 448;
var width = 608;
var size = 16;
var dx = 0;
var dy = 0;
var nx = size;
var ny = 0;
var xPos = 304;
var yPos = 224;
var end = false;
var bx = -10;
var by = -10;
var lastTail = -1;
var maxTail = 0;
var score = 0;
var scoreBoard = null;
var sMul = 1;
var mx = -10;
var my = -10;
var speedX = -10;
var speedY = -10;
var tails = [];
var sideX = 240;
var sideY = 224;
var sideDX = 16;
var sideDY = 16;
var sideMove = 0;
var sideInterval;

function init() {
	interval = window.setInterval("render()", 100);
	moveInterval = window.setInterval("move()", 186);
	sideInterval = window.setInterval("moveSide()", 186);
	window.setTimeout("bonus()", 1000);
	window.setTimeout("mBonus()", 5000);
	window.setTimeout("speedBonus()", 6000);
	scoreBoard = document.getElementById('score');
}	

function handleKey(evt) {
	var code;
	if (!evt)
		evt = window.event;
	if (evt.which) {
		code = evt.which;
	} else if (evt.keyCode) {
		code = evt.keyCode;
	}

	if(code == 37) leftright(-1);
	if(code == 38) updown(-1);
	if(code == 39) leftright(1);
	if(code == 40) updown(1);
}

function updown(mul) {
	if(dx == 0 || nx != 0) return;
	dx = 0;
	ny = mul*size;
}

function leftright(mul) {
	if(dy == 0 || ny != 0) return;
	dy = 0;
	nx = mul*size;
}

function bonus() {
	var elem = document.getElementById("bonus");
	bx = Math.round(Math.random()* (width/16.0)) * 16;
	by = Math.round(Math.random()* (height/16.0)) * 16;
	elem.style.left = bx;
	elem.style.top = by;
	elem.style.display = "block";
}

function mBonus() {
	if(end) return;
	var elem = document.getElementById("mbonus");
	mx = Math.round(Math.random()* (width/16.0)) * 16;
	my = Math.round(Math.random()* (height/16.0)) * 16;
	elem.style.left = mx;
	elem.style.top = my;
	elem.style.display = "block";
	window.setTimeout("removeMBonus()", 20000);
}

function speedBonus() {
	if(end) return;
	var elem = document.getElementById("speedbonus");
	speedX = Math.round(Math.random()* (width/16.0)) * 16;
	speedY = Math.round(Math.random()* (height/16.0)) * 16;
	elem.style.left = speedX;
	elem.style.top = speedY;
	elem.style.display = "block";
	window.setTimeout("removeSpeedBonus()", 20000);
}

function removeMBonus() {
	if(end) return;
	var elem = document.getElementById("mbonus");
	mx = my = -10;
	elem.style.display = "none";
	window.setTimeout("mBonus()", 5000 + Math.round(Math.random()*20000));
	sMul = 1;
}

function removeSpeedBonus() {
	if(end) return;
	var elem = document.getElementById("speedbonus");
	speedX = speedY = -10;
	elem.style.display = "none";
	window.setTimeout("speedBonus()", 5000 + Math.round(Math.random()*20000));
}

function render() {
	if(end) return;
	check();	
}

function resetM() {
	if(end) return;
	document.getElementById("head").innerHTML = '<img src="http://www.c-plusplus.net/forum/images/smiles/smile.gif"/>';
	sMul = 1;
}

function check() {
	if(xPos == bx && yPos == by) {
		var elem = document.getElementById("bonus");
		elem.style.display = "none";
		window.setTimeout("bonus()", Math.random()*2000);
		bx = 0;
		var t = document.createElement("div");
		t.innerHTML='<img src="http://www.c-plusplus.net/favicon.ico" width="16px" height="16px"/>';
		t.style.position = "absolute";
		t.style.left = xPos;
		t.style.top = yPos;
		t.id = "tail"+maxTail;
		if(lastTail == -1) {
			lastTail = maxTail;
		}
		tails[maxTail] = {};
		tails[maxTail].xPos = xPos;
		tails[maxTail].yPos = yPos;
		maxTail++;
		score += 5 * sMul;
		scoreBoard.innerHTML= '<br>Score: ' + score + '<p>' ;
		document.getElementById("main").appendChild(t);
	}
	if(xPos == mx && yPos == my) {
		sMul = 2;
		document.getElementById("head").innerHTML = '<img src="http://www.c-plusplus.net/forum/images/smiles/cool.gif"/>';
		var elem = document.getElementById("mbonus");
		mx = my = -10;
		elem.style.display = "none";
		window.setTimeout("resetM()", 15000);
	}
	if(xPos == speedX && yPos == speedY) {
		var elem = document.getElementById("speedbonus");
		speedX = speedY = -10;
		elem.style.display = "none";
		window.setTimeout("resetSpeed()", 20000);
		window.clearInterval(moveInterval);
		moveInterval = window.setInterval("move()", 120);
	}
}

function resetSpeed() {
	window.clearInterval(moveInterval);
	moveInterval = window.setInterval("move()", 186);
}

function endGame() {
	end = true;
	window.clearInterval(interval);
	window.clearInterval(moveInterval);
	window.clearInterval(sideInterval);
	document.getElementById('head').innerHTML= '<img src="http://www.c-plusplus.net/forum/images/smiles/sad.gif"/>';
}

function move() {
	if(lastTail != -1) {
		var t = document.getElementById("tail"+lastTail);
		t.style.left = xPos;
		t.style.top = yPos;
		tails[lastTail].xPos = xPos;
		tails[lastTail].yPos = yPos;
		lastTail--;
		if(lastTail<0) lastTail = maxTail-1;		
	}
	if(ny != 0)	dy = ny;
	if(nx != 0) dx = nx;
	ny = nx = 0;
	var elem = document.getElementById("head");
	xPos += dx;
	yPos += dy;
	if(xPos > width || xPos < 0 || yPos > height || yPos < 0) endGame();
	if(xPos >= sideX && xPos < sideX+48 && yPos >= sideY && yPos < sideY+96) endGame();
	for(var i = 0; i<tails.length; i++) {
		if(xPos == tails[i].xPos && yPos == tails[i].yPos) endGame();
	}
	elem.style.left = xPos;
	elem.style.top = yPos;

}

function sideCrash(newX, newY) {
	if(newX+32 > width || newX < 0) {
		return true;
	}
	if(newY+72 > height || newY < 0) {
		return true;
	}
	for(var i = 0; i<tails.length; i++) {
		var x = tails[i].xPos;
		var y = tails[i].yPos;
		if(x >= newX && x < newX+48 && y >= newY && y < newY+96) {
			return true;
		}
	}
	return false;
}

function moveSide() {
	var newX = sideX;
	var newY = sideY;
	if(sideMove == 0) {
		newX+=sideDX;
		if(sideCrash(newX, newY)) {
			newX = sideX;
			sideDX *= -1;
			sideMove = 1;
		} else {
			var rnd = Math.random();
			sideMove = Math.round(rnd*2);
			if(rnd > 0.9) {
				sideDX *= -1;
			}
		}
	} else {
		newY+=sideDY;
		if(sideCrash(newX, newY)) {
			newY = sideY;
			sideDY *= -1;
			sideMove = 0;
		} else {
			var rnd = Math.random();
			sideMove = Math.round(rnd*2);
			if(rnd > 0.9) {
				sideDY *= -1;
			}
		}
	}
	sideX = newX;
	sideY = newY;
	var side = document.getElementById("side");
	side.style.left = sideX;
	side.style.top = sideY;
}

document.onkeydown = handleKey;

</script>

<body onload="init();">
<div id="main" class="field">
	<div id="head" style="position:absolute;left:304;top:224;z-index=2">
	<img src="http://www.c-plusplus.net/forum/images/smiles/smile.gif"/>
	</div>
	<div id="bonus" style="position:absolute;left:204;top:224;display:none">
	<img src="http://www.c-plusplus.net/forum/images/smiles/idea.gif"/ height="16px">
	</div>
	<div id="mbonus" style="position:absolute;left:204;top:224;display:none">
	<img src="http://www.c-plusplus.net/forum/templates/fisubtext/images/livemarks16.png"/ height="16px">
	</div>
	<div id="speedbonus" style="position:absolute;left:204;top:224;display:none">
	<img src="http://www.c-plusplus.net/forum/images/smiles/arrow.gif"/ height="16px">
	</div>
	<div id="side" style="position:absolute;left:240;top:224;z-index=1">
	<img src="http://www.c-plusplus.net/magazin/bilder/autoren/SideWinder.jpg"/ height="96px" width = "48px">
	</div>
</div>
<div onMouseover="updown(-1);" class="control" style="left:800px;top:229px;" >Hoch</div>
<div onMouseover="leftright(-1);" class="control" style="left:740px;top:310px;" >Links</div>
<div onMouseover="leftright(1);" class="control" style="left:860px;top:310px;" >Rechts</div>
<div onMouseover="updown(1);" class="control" style="left:800px;top:391px;" >Runter</div>
<div id="score" style="left:300px;top:600px;width:200; background:#9F9; position:absolute; text-align:center;"><br>Score:<p></div>
</body>

</html>

Headhunter

Super Game, Topp gemacht
Noch ein Vorschlag: Mache ein Preloading von allen Grafiken, damit man bei langsamen Internetverbindungen kein image-broken Symbol mehr sieht beim laden.

GPC

Sehr geil
Score beim ersten Versuch war 210

Sehr geil!!

Aber die Steuerung suckt mich an.
Mach es doch so, dass du die Mauskoordinaten mit der Spielerposition assoziierst und dann daraus die gewünschte Bewegungsrichtung herleitest... Er folgt dann praktisch der maus.

event.offsetX;
event.offsetY;

und

e.pageX;
e.pageY;

deckt dann gemeinsam IE, Opera und Firefox ab. Mit document.all und document.getElementById solltest du das auch auf die jweiligen Browser beschränken können.

Vielleicht fällt dir auch noch was besseres ein, aber ich tu mich wirklich schwer, die Buttons zu treffen und gleichzeitig meinen Smilie im Auge zu behalten

Aber sonst absolut geil!!

SideWinder

Hmm, also ich kann mir selbst zumindest mit den Pfeiltasten ausweichen.

MfG SideWinder

@Zockmeister: Auf zwei Sachen gleichzeitig zu schauen war mir auch zu schwer, darum hab ich die Steuerung mit den Pfeiltasten eingebaut.