Anzeige

explosion


#21
Hab ich mir gedacht. Ich kann aber die Explosion gut in einem anderen Spiel gebrauchen, das nur mit javascript realisiert ist.

Frage;

Wenn die Ballons animiert flegen sollen sie ja angeklickt werden und eigentlich explodieren.
Kann ich alternativ
wenn ein Ballon angeklickt wird, sein Bild durch ein anderes Bild ersetzen (brennender Ballon), dies 1 bis 2 Sekunden sichtbar halten und dann verschwinden lassen?
oder noch besser:
Wenn er angeklickt wird kann ich dann an seiner Stelle eine Sequenz von Bildern bringen(kleines Feuer zu großes Feuer , dann verschwinden?
Also eine Animation innerhab einer Animation?
 

Sempervivum

Erfahrenes Mitglied
#22
wenn ein Ballon angeklickt wird, sein Bild durch ein anderes Bild ersetzen
Das ist sicherlich möglich, du brauchst ja nur das alte Bild unsichtbar und das neue sichtbar zu machen. Und Du musst sie genau übereinander positionieren, aber auch das sollte machbar sein, denn Du kannst ja die Position des alten Bildes ermitteln und auf das neue übertragen.
kann ich dann an seiner Stelle eine Sequenz von Bildern bringen(kleines Feuer zu großes Feuer , dann verschwinden?
Auch das sollte kein Problem sein: Die Dateinamen in einem Array ablegen, ein setInterval, einen Index führen und immer das Bild entspr. Index anzeigen. Hat der Index den Maximalwert erreicht, den Timer löschen und das letzte Bild verschwinden lassen.
 
#24
Hängt irgendwie mit dem 2. Timer

var ballon =[];
var seq=[];
var punkte=[];
var treffer=0;
var boese=[1,6,7,10,11];
var j = 0;
var ypos;
var xpos;
for (i=0;i<=2;i++)
{
seq="Terrorist"+i+ ".jpg";
}

for (i=0;i<=11;i++)
{
ballon="ballon"+i+ ".png";
}

var myVar1 = setInterval(Flieg, 1000);

function Flieg()
{

var nr= Math.floor(Math.random() * 12);

$('canvas').drawImage({
source: ballon[nr],
layer: true,
name: 'myBox' + j,
fromCenter: false,
opacity:0,
x: Math.floor(Math.random() * 800) + 100,
y: 650,
click: onclick
});
$('canvas').animateLayer('myBox' + j,
{
opacity: function(layer)
{
x= Math.min (1,0.5+0.25*i);
return x},
y: -140
},
{
duration: 8000,
easing: 'linear',
});

j++




function onclick(layer)
{
xpos=layer.x;
ypos=layer.y;

layer.visible = false;
sequenz();
var getroffen =false;

for (var ii=0;ii<=boese.length;ii++)
{
if(boese[ii]==nr)
{
treffer+=1;
getroffen=true;

}

}
if (getroffen==false)
{
treffer-=1;
}

}
}

function sequenz(){
var myVar2 = setInterval(seqfor, 100);
function seqfor()
{

for (var i =0;i<=seq.length;i++)
{
$('canvas').drawImage({
layer: true,
source: 'seq',
x: xpos,
y: ypos,
fromCenter: false
});
}
clearInterval(myVar2);
}}
 

Sempervivum

Erfahrenes Mitglied
#25
Irgend wie verstehe ich das Ganze noch nicht vollständig. Dies scheint jetzt ein anderes Spiel zu sein als das mit den Ballons?
Ohne es vollständig zu verstehen fällt mir folgendes auf:
- Für die Schleife, um auf Treffer zu prüfen, kannst Du sehr wahrscheinlich die Funktion indexOf verwenden und den Code wesentlich einfacher machen.
- Für die selbst gemachte Animation würde ich eher empfehlen, nur mit setLayer das source-Attribut auszutauschen, als das Bild mit drawImage neu zu zeichen. Sonst könntest Du Probleme damit bekommen, dass sich die einzelnen Bilder überlagern. Hatte ich selber früher bei einem eigenen Projekt.
- Wenn ich das richtig vertehe, musst Du beim source-Attribut noch den Index hinzu fügen,um das richtige Bild auszuwählen: [I][I]source: 'seq[I]' + i, [/I][/I][/I]
 
#26
Könntest du in deinem Beispiel mit den Kreisen beim Klickereignis einbauen, dass der geklickte Kreis eine Farbsequenz durchläuft. Dann kann ich das studieren und bei den Ballons entsprechend korriegieren?

Hier dein Code:


function Flieg() {

$('canvas').drawArc({
layer: true,
name: 'myBox' + j,
fillStyle: '#' + Math.floor(Math.random() * 16777215).toString(16),
x: Math.floor(Math.random() * 600) + 100,
y: 400,
radius: 40,
click: function (layer) {
layer.fillStyle = 'blue';
}
});
$('canvas').animateLayer('myBox' + j, {
y: -80
}, {
duration: 4000,
easing: 'linear',
step: function (now, fx, layer) {
// do something for each step of the animation
},
complete: function (layer) {
console.log("complete", layer.fillStyle);
if (layer.fillStyle == 'blue') console.log("clicked");
}

});
console.log($('canvas').getLayer('myBox' + j).fillStyle);
j++;

}
 

Sempervivum

Erfahrenes Mitglied
#29
Fertig:
Code:
        function Flieg() {

            $('canvas').drawArc({
                layer: true,
                name: 'myBox-' + j,
                fillStyle: '#' + Math.floor(Math.random() * 16777215).toString(16),
                x: Math.floor(Math.random() * 600) + 100,
                y: 400,
                radius: 40,
                click: function (layer) {
                    layer.fillStyle = 'blue';
                }
            });
            $('canvas').animateLayer('myBox-' + j, {
                y: 80
            }, {
                    duration: 2000,
                    easing: 'linear',
                    step: function (now, fx, layer) {
                        // do something for each step of the animation
                    },
                    complete: animation
                });
            j++;

        }
        function animation(layer) {
            var iAni = 1, maxAni = 6, xPos = layer.x, yPos = layer.y;
            var  iFly = layer.name.split('-')[1];
            layer.visible = false;
            $('canvas').drawImage({
                layer: true,
                name: 'ani' + iFly,
                source: 'images/frame1.jpg',
                x: xPos, y: yPos
            });
            var timer = setInterval(function () {
                iAni++;
                if (iAni <= maxAni) {
                    $('canvas').setLayer(
                        'ani' + iFly, {
                            source: 'images/frame' + iAni + '.jpg'
                        }
                    ).drawLayers();
                } else {
                    clearInterval(timer);
                }
            }, 500);
        }
Wie Du siehst, wird die zweite Animation beim complete der ersten angestoßen, damit ich es bei der Entwicklung leichter hatte. Du kannst den Aufruf leicht in das click verlegen.
 

Sempervivum

Erfahrenes Mitglied
#30
PS: Beim ersten Mal kann es sein, dass die Animation flackert. Das liegt daran, dass die Bilder erst geladen werden müssen. Man kann das durch Vorladen beheben; zeige ich dir, wenn es so weit bei dir funtioniert.
 
#31
Sehe heute erst dein Werk.
Du warst so schnell mit der Antwort, dass ich die ganze Zeit nicht bemerkt habe, dass du schon geantwortet hattest. Ich habe die ganze Zeit gewartet und gedacht, dass du vielleicht im Urlaub wärest.
War heute 8 Stunden auf der Autobahn. Davon mehr als 3 Stunden in diversen Staus. Werde mich morgen dran machen.
Danke dir schon mal herzlich.
 
#32
Funktioniert und ich kann es auch voll nachvollziehen.
Jetzt bastel ich noch etwas an den Bildern der Explosion rum damit der Übergang "flüssiger" aus schaut.

Und dann wird gnadenlos "geschossen"

Apropos: Die Feuer Animation sieht toll aus. Könnte ein Video sein.

Dank dir noch mal herzlich.
 
#34
Eine Frage habe ich doch noch:


in #25 hast du geschrieben, dass man statt mit der Schleife eleganter mit indexOf arbeiten könne.


var boese=[1,6,7,10,11];

for (var ii=0;ii<=boese.length;ii++)
{
if(boese[ii]==nr)
{
treffer+=1;
getroffen=true;

}

}
if (getroffen==false)
{
treffer-=1;
}


Könntest du mir das vielleicht zeigen?
 
Anzeige

Neue Beiträge

Anzeige