Objekte: Schmetterlingsschwarm fliegen lassen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
arrangement
array
ausgabe
bildschirm
code
fliegende schmetterlinge
helfen
http
image
jemand
kreatur
not
position
richtung
schirm
schmetterling
schwarm
tag
umstellen
url
-
Hallo zusammen!
Ich habe vor langer Zeit mal mit JavaScript experimentiert und damit ein kleines Spiel gemacht: man muss tag/fliegende schmetterlinge">fliegende Schmetterlinge anklicken. Diese Ändern von Zeit zu Zeit die Richtung und Geschwindigkeit und können auch den Bildschirm verlassen. Zu sehen ist das ganze hier.
Nun habe ich etwas Kontakt mit objektorientierter Programmierung und würde das Projekt nun gerne objektorientiert umstellen. Ich dachte an Schmetterlingsobjekte, die einen Schwarm bilden und dieser Schwarm schließlich fliegt. Leider habe ich mich inzwischen total verirrt und bekomme die Animation des Schwarms einfach nicht hin. Das Array, in das ich aus Not die Schmetterlingsobjekte schiebe, wird anscheinend nicht verkürzt, wenn ein Schmetterling den Bildschirm verlässt und ich habe immer wieder einen Schmetterling irgendwo stehen, der dann nicht mehr animiert wird.
Ich komme seit zwei Tagen auf keinen grünen Zweig mehr und ich würde mich sehr freuen, wenn mir jemand wieder auf den richtigen Weg helfen könnte. Meinen aktuellen Stand könnt ihr euch ebenfalls einmal ansehen.
Wenn mir jemand helfen kann, meldet euch bitte und wenn ihr weitere Infos braucht, liefere ich die auch gerne nach. Zur besseren Ansicht ist hier nun die aktuelle JS-Datei:
// JavaScript Document var creature1 = new Creature("creature1", "butterfly1", document.getElementsByTagName("body")[0], window.innerWidth); var creature2 = new Creature("creature2", "butterfly2", document.getElementsByTagName("body")[0], window.innerWidth); var creature3 = new Creature("creature1", "butterfly3", document.getElementsByTagName("body")[0], window.innerWidth); var creature4 = new Creature("creature2", "butterfly4", document.getElementsByTagName("body")[0], window.innerWidth); var creature5 = new Creature("creature2", "butterfly5", document.getElementsByTagName("body")[0], window.innerWidth); var swarm = new Array(creature1, creature2, creature3, creature4, creature5); function swarmMove() { //creature-counting starts with 1 for(var i=0; i<=(swarm.length - 1); i++) { // alert("swarm.length im for: " + swarm.length); document.getElementById("ausgabe").innerHTML = swarm[0]['CSSid'] + "<br>" + swarm[1]['CSSid'] + "<br>" + swarm[2]['CSSid'] + "<br>" + swarm[3]['CSSid'] + "<br>" + swarm[4]['CSSid']; if(swarm.length == 0) { clearInterval(movement); } // alert("21 - swarm bei " + i + " " + swarm[i].CSSid); swarm[i].move(swarm[i]); //give the name of variable swarm.sort(); } // creature2.move(creature2); //give the name of variable } //swarm-object //butterfly-object function Creature(varName, creatId, parentElem, areaWidth) { this.varName = this.varName; this.CSSclass = "butterfly"; this.dirX = Math.round(Math.random() * 10); //although get negative values if(this.dirX & 1) { this.dirX = this.dirX * (-1); //unequal number => go left } this.dirY = Math.round(Math.random() * 10); //although get negative values if(this.dirY & 1) { this.dirY = this.dirY * (-1); //unequal number => go down } this.CSSid = creatId; this.imgPath = "img/games/"; this.posX = Math.round(((Math.random() * 90)/100) * areaWidth); // relative and random arrangement of the swarm this.posY = 0; this.src = this.imgPath + "butterfly_left.gif"; this.width = 30; //at initialisation var temp = document.getElementsByTagName("body")[0].appendChild(document.createElement("img")); temp.setAttribute("class", this.CSSclass); temp.setAttribute("id", this.CSSid); temp.setAttribute("src", this.imgPath + "butterfly_left.gif"); // temp.setAttribute("onClick", "this.caught(this)"); temp.style.left = this.posX + "px"; temp.style.top = "auto"; temp.style.width = this.width + "px"; conformImg(this.dirX, 0, this, this.imgPath) //methods this.caught = function() {}; this.move = function(elem) {elem.counter = 0; elem.movement = setInterval(function() { // alert("67 - movement wird gemacht für " + elem.CSSid + "\nelem.Counter: " + elem.counter); elem.counter++; if(document.getElementById(elem.CSSid) == null) { clearInterval(movement); return;} //get actual position elem.posX = document.getElementById(elem.CSSid).offsetLeft; elem.posY = document.getElementById(elem.CSSid).offsetTop; //change direction every 10th circle if(elem.counter == 10) { elem.counter = 0; //speed moveX = Math.round((Math.random() * 10) + 4) * 2; moveY = Math.round((Math.random() * 10) + 4) * 2; //define move-direction elem.dirX = Math.round(Math.random() * 10); elem.dirY = Math.round(Math.random() * 10); //although get negative values if(elem.dirX & 1) { moveX = moveX * (-1); //unequal number => go left } if(elem.dirY & 1) { moveY = moveY * (-1); //unequal number => go down } // alert("Aktuelle Position: " + elem.posX + "/" + elem.posY + "\nAktuelle Richtung: " + elem.dirX + "/" + elem.dirY + ""); elem.conformImg(moveX, moveY, elem, elem.imgPath); // alert("Bewegung um " + moveX + "/" + moveY + " - Bild ist " + elem.src); elem.posX = elem.posX + moveX; elem.posY = elem.posY + moveY; } else { elem.posX = elem.posX + elem.dirX; elem.posY = elem.posY + elem.dirY; } // alert("Neue Position: " + elem.posX + "/" + elem.posY); document.getElementById(elem.CSSid).style.left = (elem.posX + "px"); document.getElementById(elem.CSSid).style.top = (elem.posY + "px"); //set new pos // for(var i=0; i<10; i++) { // alert("windowheight: " + (window.innerHeight) + "\nposY: " + (elem.posY) + "\nwidth: " + elem.width); /* if(elem.posX <= (window.innerWidth + elem.width)) { alert("elem.posX <= (window.innerWidth + elem.width): " + elem.posX + " <= " + window.innerWidth + " + " + elem.width); } if(elem.posX > 0) { alert("elem.posX > 0: " + elem.posX); } if(elem.posY <= (window.innerHeight - elem.width)) { alert("elem.posY <= (window.innerHeight - elem.width): " + elem.posY + " <= " + window.innerHeight + " - " + elem.width); } if(elem.posY > 0) { alert("elem.posY > 0: " + elem.posY); } */ //in body-area if(elem.posX <= (window.innerWidth - elem.width) && elem.posX > -elem.width && elem.posY <= (window.innerHeight + elem.width) && elem.posY > 0) { document.getElementById(elem.CSSid).style.left = (elem.posX + "px"); document.getElementById(elem.CSSid).style.top = (elem.posY + "px"); } else { // alert("136 - Kreatur " + elem.CSSid + " verlässt den Schirm!"); document.getElementById(elem.CSSid).parentNode.removeChild(document.getElementById(elem.CSSid)); clearInterval(elem.movement); // document.getElementById(elem.CSSid).style.visible = 'none'; // alert("alte schwarmgröße: " + swarm.length); swarm.splice(swarm.indexOf(elem),1); // alert("neu schwarmgröße: " + swarm.length); // document.getElementById("ausgabe").innerHTML = 'Es gibt noch ' + swarm.length + ' Schmetterlinge';*/ } // }*/ }, 100); } //conform the image to direction this.conformImg = function(moveX, moveY, elem, imgPath) { if(moveX < 0 && moveY == 0) { elem.src = imgPath + "butterfly_left.gif"; document.getElementById(elem.CSSid).src = elem.src; } else if (moveX >= 0 && moveY == 0) { elem.src = imgPath + "butterfly_right.gif"; document.getElementById(elem.CSSid).src = elem.src; } else if(moveX > 0 && moveY > 0) { elem.src = imgPath + "butterfly_up_right.gif"; document.getElementById(elem.CSSid).src = elem.src; } else if(moveX < 0 && moveY < 0) { elem.src = imgPath + "butterfly_down_left.gif"; document.getElementById(elem.CSSid).src = elem.src; } else if(moveX > 0 && moveY < 0) { elem.src = imgPath + "butterfly_down_right.gif"; document.getElementById(elem.CSSid).src = elem.src; } else if(moveX < 0 && moveY > 0) { elem.src = imgPath + "butterfly_up_left.gif"; document.getElementById(elem.CSSid).src = elem.src; } } } //conform the image to direction function conformImg (moveX, moveY, elem, imgPath) { if(moveX < 0 && moveY == 0) { elem.src = imgPath + "butterfly_left.gif"; document.getElementById(elem.CSSid).src = elem.src; } else if (moveX >= 0 && moveY == 0) { elem.src = imgPath + "butterfly_right.gif"; document.getElementById(elem.CSSid).src = elem.src; } else if(moveX > 0 && moveY > 0) { elem.src = imgPath + "butterfly_up_right.gif"; document.getElementById(elem.CSSid).src = elem.src; } else if(moveX < 0 && moveY < 0) { elem.src = imgPath + "butterfly_down_left.gif"; document.getElementById(elem.CSSid).src = elem.src; } else if(moveX > 0 && moveY < 0) { elem.src = imgPath + "butterfly_down_right.gif"; document.getElementById(elem.CSSid).src = elem.src; } else if(moveX < 0 && moveY > 0) { elem.src = imgPath + "butterfly_up_left.gif"; document.getElementById(elem.CSSid).src = elem.src; } }
Vielen Dank für eure Hilfe!
Grüße
things -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage