explosion

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?
 
wenn ein Ballon angeklickt wird, sein Bild durch ein anderes Bild ersetzen
Zum Vergrößern anklicken....
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?
Zum Vergrößern anklicken....
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.
 
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);
}}
 
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]
 
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++;

}
 
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.
 
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück