WinFuture-Forum.de: Javascript Problem: Object In Object Bewegen - WinFuture-Forum.de

Zum Inhalt wechseln

Registrieren

Hilfe

Nachrichten zum Thema: Entwicklung

3 Seiten
←
1
2
3

Javascript Problem: Object In Object Bewegen

#31 Iso

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 483
Beigetreten: 14. Mai 03
Reputation: 0
Wohnort:Hörstel
Interessen:Computer Parties Mädels...

geschrieben 12. März 2007 - 17:35

So, habe nun ein wenig hin und herexperementiert und es scheint mir so, als ob JS doch nicht so gut Objektorientiert ist, da wohl nach jedem neustarten der Funktion animateGo() alle Variablen der "Klasse" startAnimation neu initialisiert werden, sodass "x" immer der gleich Wert ist,
wer kann mir aus diesem Schlamassel heraus helfen? :imao:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<title>opdracht 2b</title>
		<script type="text/javascript">
		
		function init(){
			Rect1 = new startAnimation("rect1","yellow",0,0,2);
			Rect2 = new startAnimation("rect2","red",20,20,3);
			Rect3 = new startAnimation("rect3","blue",40,40,4);
			Rect4 = new startAnimation("rect4","green",80,80,5);
			Rect5 = new startAnimation("rect5","#0033cc",0,200,6);
			Rect6 = new startAnimation("rect6","#00ff00",20,100,7);
			Rect7 = new startAnimation("rect7","#330066",200,0,8);
			Rect8 = new startAnimation("rect8","#996600",130,100,9);
			setInterval(goRect,40);
		}
		
		function goRect()
		{
			Rect1.animateGo(Rect1.getRect());
			Rect2.animateGo(Rect2.getRect());
			Rect3.animateGo(Rect3.getRect());
			Rect4.animateGo(Rect4.getRect());
			Rect5.animateGo(Rect5.getRect());
			Rect6.animateGo(Rect6.getRect());
			Rect7.animateGo(Rect7.getRect());
			Rect8.animateGo(Rect8.getRect());
			
		}
		
		function startAnimation(rect, color, STop, SLeft, zIndex){
			getObj(rect).style.background = color;
			getObj(rect).style.top = STop + "px";
			getObj(rect).style.left = SLeft + "px";
			getObj(rect).style.zIndex = zIndex;
			this.rect = rect;
			var xTempo = 5;
			var yTempo = 5;
			var x;
			var y;
			
			this.getRect = function() 
			{
				return this.rect;
			}
			
			this.animateGo = function(rect)
			{
			
				if(x >= (getObj("box").offsetWidth-getObj(rect).offsetWidth)){
					xTempo = -5;
				}
				if(x <= 0){
					xTempo = 5;
				}
				if(y >= (getObj("box").offsetHeight-getObj(rect).offsetHeight)){
					yTempo = -5;
				}
				if(y <= 0){
					yTempo = 5;
				}
				x = getObj(rect).style.left + xTempo;
				y = getObj(rect).style.top + yTempo;
				
				getObj(rect).style.left = x + "px";
				getObj(rect).style.top = y + "px";
				
			}
		}		
		
		function getObj(elementID){
			return document.getElementById(elementID);
		}
		</script>
		
		<style type="text/css">
			#box { position: absolute; top: 50px; background: navy; height: 300px; width: 400px; z-index: 1; }
			#rect1 { position: absolute; height: 20px; width: 20px; }
			#rect2 { position: absolute; height: 20px; width: 20px; }
			#rect3 { position: absolute; height: 20px; width: 20px; }
			#rect4 { position: absolute; height: 20px; width: 20px; }
			#rect5 { position: absolute; height: 20px; width: 20px; }
			#rect6 { position: absolute; height: 20px; width: 20px; }
			#rect7 { position: absolute; height: 20px; width: 20px; }
			#rect8 { position: absolute; height: 20px; width: 20px; }
		</style>
	</head>
	<body>
	
	<div id="box">
	<div id="rect1"></div>
	<div id="rect2"></div>
	<div id="rect3"></div>
	<div id="rect4"></div>
	<div id="rect5"></div>
	<div id="rect6"></div>
	<div id="rect7"></div>
	<div id="rect8"></div>
	</div>
	
	<a href="java script:init()">Start</a>
	</body>
</html>

Asus F3JP-Z53 Notebook:
Intel Core 2 Duo T7200 @ 2 Ghz
Mobile Radeon X1700 256 MB
2048 MB DDR2-Ram
160 GB Hitachi HDD
Ubuntu 9.04 / Windows XP SP 3

Nach oben
Nach oben of the page up there ^

#32 Iso

Spezialist

Gruppe: aktive Mitglieder
Beiträge: 483
Beigetreten: 14. Mai 03
Reputation: 0
Wohnort:Hörstel
Interessen:Computer Parties Mädels...

geschrieben 13. März 2007 - 16:06

Kann mir denn keiner helfen? :wink:

Asus F3JP-Z53 Notebook:
Intel Core 2 Duo T7200 @ 2 Ghz
Mobile Radeon X1700 256 MB
2048 MB DDR2-Ram
160 GB Hitachi HDD
Ubuntu 9.04 / Windows XP SP 3

Nach oben
Nach oben of the page up there ^

#33 Witi

Supermond

Gruppe: aktive Mitglieder
Beiträge: 5.701
Beigetreten: 13. Dezember 04
Reputation: 43
Geschlecht:Männlich
Wohnort:Kingsvillage
Interessen:Frickeln

geschrieben 14. März 2007 - 09:38

Dann will ich doch mal helfen...

Ich habe es mal etwas "objekt-orientierter" gemacht, wobei immer noch Nachholbedarf ansteht.
Ich könnte mir bspw. ein Animator-Objekt vorstellen, mit folgendem Aufruf: "Animator.run(rect1)";

Zudem könntest du dir in HTML diese Zeilen sparen. "

" und lieber direkt per JS schreiben.

Aber wenigstens funktioniert es jetzt




opdracht 2b
<script type="text/javascript">

function init(){
	rect1 = new MyRect("rect1");
	rect1.setColor("yellow");
	rect1.setTop(0);
	rect1.setLeft(0);
	rect1.setZIndex(2);
	
	rect2 = new MyRect("rect2");
	rect2.setColor("red");
	rect2.setTop(20);
	rect2.setLeft(20);
	rect2.setZIndex(3);

	rect3 = new MyRect("rect3");
	rect3.setColor("blue");
	rect3.setTop(40);
	rect3.setLeft(40);
	rect3.setZIndex(4);

	rect4 = new MyRect("rect4");
	rect4.setColor("green");
	rect4.setTop(80);
	rect4.setLeft(80);
	rect4.setZIndex(5);

	rect5 = new MyRect("rect5");
	rect5.setColor("#0033cc");
	rect5.setTop(0);
	rect5.setLeft(200);
	rect5.setZIndex(6);

	rect6 = new MyRect("rect6");
	rect6.setColor("#0f0");
	rect6.setTop(20);
	rect6.setLeft(100);
	rect6.setZIndex(7);

	rect7 = new MyRect("rect7");
	rect7.setColor("#330066");
	rect7.setTop(200);
	rect7.setLeft(0);
	rect7.setZIndex(8);

	rect8 = new MyRect("rect8");
	rect8.setColor("#996600");
	rect8.setTop(130);
	rect8.setLeft(100);
	rect8.setZIndex(9);

	setInterval(goRect, 40);
}

function goRect() {
	var deltaX = 5;
	var deltaY = 5;
	
	rect1.animate("box", deltaX, deltaY);
	rect2.animate("box", deltaX, deltaY);
	rect3.animate("box", deltaX, deltaY);
	rect4.animate("box", deltaX, deltaY);
	rect5.animate("box", deltaX, deltaY);
	rect6.animate("box", deltaX, deltaY);
	rect7.animate("box", deltaX, deltaY);
	rect8.animate("box", deltaX, deltaY);
}

function MyRect(name, x, y) {
	this.obj = getObj(name);
	this.x = x;
	this.y = y;
	
	this.top;
	this.left;
	this.color;
	this.zIndex;

	this.xTempo = 5;
	this.yTempo = 5;
	
	
	this.setColor = function(color) {
		this.color = color;
		this.obj.style.background = this.color;
	}
	
	this.getColor = function() {
		return this.color;
	}

	this.setTop = function(top) {
		this.top = top;
		this.obj.style.top = this.top + "px";
	}
	
	this.getTop = function() {
		return this.top;
	}

	this.setLeft = function(left) {
		this.left = left;
		this.obj.style.left = this.left + "px";
	}
	
	this.getLeft = function() {
		return this.left;
	}
	
	this.setZIndex = function(z) {
		this.zIndex = z;
		this.obj.style.zIndex = this.zIndex + "px";
	}
	
	this.getZIndex = function() {
		return this.zIndex;
	}

	this.animate = function(parent, deltaX, deltaY) {
		if(this.x >= (getObj(parent).offsetWidth-this.obj.offsetWidth)) {
			this.xTempo = -deltaX;
		}
		if(this.x <= 0){
			this.xTempo = deltaX;
		}
		if(this.y >= (getObj(parent).offsetHeight-this.obj.offsetHeight)){
			this.yTempo = -deltaY;
		}
		if(this.y <= 0){
			this.yTempo = deltaY;
		}

		this.x = this.getLeft() + this.xTempo;
		this.y = this.getTop() + this.yTempo;

		this.setLeft(this.x);
		this.setTop(this.y);
	}
}

function getObj(elementID){
	return document.getElementById(elementID);
}