SVG-Game: Problem mit der Kollisionserkennung/ceckIntersection()

[fleur]

Hey Thomas,

Recht hast du.. bei mir funktioniert es plötzlich auch. Ich bitte tausendmal um Entschuldigung.^^
Hab jetzt auch nen kleinen Prototypen fertig:
Ein Kreis den ich mit den Pfeiltasten bewegen kann (indem ich cx und cy ändere). Wenn er auf das Rechteck trifft sollte ein alert ausgelöst werden und das ganze zurück gesetzt werden (mit entsprechender reset-Funktion).

Mir ist allerdings aufgefallen, dass der bereich der geprüft wird scheinbar immer ein wenig verschoben ist, im vergleich zu dem sichtbaren Rechteck. Woran liegt das? Kann ich das irgendwie noch korrigieren?

Zum besseren Verständnis werd ich einfach mal besagten Prototyp hier Posten (bei mir scheint der tatsächliche Testbereich etwas höher und ein Stück weiter links zu liegen...) :

1. die datei testlevel.svg

  
<?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"[]>  
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 500"  
	preserveAspectRatio="xMinYMin meet" onload="Init(evt)" xmlns:xlink="http://www.w3.org/1999/xlink"  
	zoomAndPan="magnify" version="1.0" contentScriptType="text/ecmascript" contentStyleType="text/css">  
  <defs>  
	<script type="text/ecmascript" xlink:href="testgamescript.js"/>  
  </defs>  
  	  
		<text id="laufzeit" x="20" y="20" style="font-size:15px;font-family:Papyrus, Arial;  
   			 font-weight:bold;font-style:oblique;stroke:darkblue;stroke-width:0;fill:darkblue" >03:00</text>  
			  
		<circle id="fish" cx="300" cy="200" r="40" fill="orange"/>  
		<rect id="rect" x="200" y="100" width="40" height="30" fill="none" stroke="#CCC"/>  
	  
</svg>  

2. Die Datei testgamescript.js

  
var svgdoc,svgroot,timeToLive,laufzeit,fish,startCY,startCX,fishCY,fishCX;  
  
	function Init(load_evt) {  
		alert("load");  
		svgdoc=load_evt.target.ownerDocument;  
		svgroot=svgdoc.rootElement;  
  
		laufzeit=svgdoc.getElementById("laufzeit");  
		timeToLive=180;  
		  
		if(!window.XML)setInterval("showTime()",1000);  
		if(!window.XML)setInterval("Collision_Detection()",200);  
		  
		fish=svgdoc.getElementById("fish");  
		fishCY=fish.getAttribute("cy");  
		fishCX=fish.getAttribute("cx");  
		  
		startCY=fish.getAttribute("cy");  
		startCX=fish.getAttribute("cx");  
		  
		svgroot.addEventListener("keydown",KeyCheck,false);  
		  
	}  
  
	function showTime(){  
		var std,min,sek;  
		  
		timeToLive-=1;  
		sek=timeToLive;  
		min=Math.floor(sek/60);//berechnet die Minuten  
		sek-=min*60; //zieht die vollen Minuten von den Sekunden ab  
		sek=Math.floor(sek);  
		  
		//Sicherstellen, dass sowohl die Minuten als auch die Sekunden aus zwei Ziffern bestehen  
		min=(min<10)?"0"+min:min;  
		sek=(sek<10)?"0"+sek:sek;  
		  
		laufzeit.firstChild.data=min+":"+sek;  
		  
		if(timeToLive==0){  
			alert("GAMEOVER");  
			Reset();  
		}  
	}  
	function setTime(t){  
		timeToLive=t;  
	}  
  
	function KeyCheck(keydown_evt) {  
	  
		var keynum;  
		keynum=keydown_evt.keyCode;   //Tastencode verarbeiten  
		  
		if((keynum==38)||(keynum==40)){  
								  
			if(keynum==38)fishCY-=10;   //Pfeiltaste oben  
			if(keynum==40)fishCY+=10; //Pfeiltaste unten  
		  
			fish.setAttribute("cy",fishCY);  
			  
		}  
		if((keynum==37)||(keynum==39)){  
  
			if(keynum==37)fishCX-=10;   //Pfeiltaste links  
			if(keynum==39)fishCX+=10; //Pfeiltaste rechts  
			  
			fish.setAttribute("cx",fishCX);  
		}  
		if(keynum==27){ //Esc  
			  
			Reset();			  
			  
		}  
		keydown_evt.stopPropagation(); //Tastaturereignis nicht weiter geben  
		  
	}  
	  
	function Collision_Detection(){  
	  
	  // SVG-Wurzelelement-Objekt  
	  var d=document.documentElement;  
	  // Kreis:  
	  var k=document.getElementById("fish");  
	  // Rechteck:  
	  var r=document.getElementById("rect");  
	  // Rechteck-Objekt = zu testender Intersection-Bereich  
	  var rect=d.createSVGRect();  
	  
	  rect.x=r.getAttribute("x");  
	  rect.y=r.getAttribute("y");  
	  rect.width=r.getAttribute("width");  
	  rect.height=r.getAttribute("height");  
  
	  var check=d.checkIntersection(k,rect);  
	  //var check=d.checkEnclosure(k,rect);  
	  if(check){  
		alert("GAMEOVER");  
		Reset();  
	  }  
  
	  // Hinweis: analoges Vorgehen mit r.checkEnclosure()  
  
	}  
	  
	function Reset()  {  
	  
		//Objekt-Gruppe mittels Basismatrix auf den Ausgangspunkt setzen  
		fishCY=startCY;  
		fishCX=startCX;  
		fish.setAttribute("cy",fishCY);  
		fish.setAttribute("cx",fishCX);  
		setTime(180);  
	  
	}  

Ich hoffe mal es sind nicht zu viele blöde Anfängerfehler drin ;) und natürlich, dass dir oder jemand anderem dazu noch etwas einfällt.

Viele Grüße,
fleur