Interessantes Problem. Die einzige Lösung, die mir einfällt, ist, die rote Karte in zwei Dreiecke diagonal aufzuteilen, dann kann man die Abdeckung getrennt steuern. Erzeugen der Dreiecke:
Ja, das geht, aber nur, wenn Du das Bild als Hintergrund anlegst:
https://wiki.selfhtml.org/wiki/CSS/Eigen…ackground-image
Es hat aber den Nachteil, dass sich der Container, in dem das Bild liegt, nicht an die Größe des Bildes anpasst. Nur umgekehrt kann man einstellen, dass sich die Größe des Bildes an den Container anpasst:
Poste doch mal das HTML des Bildes mit diesen Zusatzinformationen, dann kann man prüfen, ob es mit CSS geht oder ob man Javascript braucht.
Die Größe der Boxen kannst Du über flex-basis, flex-grow und flex-shrink bzw. die Kurzform flex steuern, auch so, dass sie unterschiedlich breit werden. Unter dem Link auf HTML-Seminar wird das erklärt.
Und sofern sich ein Text auf das Bild bezieht, eine Beschreibung o. ä. dazu ist, bietet sich die Verwendung des figure-Tags an:
https://wiki.selfhtml.org/wiki/HTML/Text…urierung/figure
Versuche am besten, einen Entwurf mit Flexlayout zu machen und wenn dann etwas nicht funktioniert wie gewünscht, poste den Code wieder, damit man es sich ansehen kann.
Hab mein wissen aus youtube und google...
Da hast Du immer das Problem, dass leider sehr viele veraltete Anleitungen herum geistern, wo Du nicht gut beraten bist, dich danach zu richten.
Von flexbox hab ich noch nix gehört
Dann empfehle ich, dich damit vertraut zu machen, z. B. hier:
Zweigleisig würde ich nicht fahren, wahrscheinlich würde das mehr Probleme schaffen als das bisherige mit einer anderen Bibliothek neu zu machen.
Da scheint es noch andere Bibliotheken für Spieleentwicklung zu geben:
Wenn es die Entwicklung von Spielen geht, ist meine Erfahrung allerdings sehr begrenzt, vor allem wenn es um die Performance bei hunderten von Objekten geht.
Wenn Du mich unter dieser Einschränkung fragst, wie ich es machen würde, dann genau so, wie Du es jetzt machst, mit einer Bibliothek wie jCanvas.
Die Objekte können verschwinden wenn man sie zerstört, müssen also schon als Objekt selbst ansprechbar sein.
Das ist bei jCanvas der Fall, Du kannst ein Objekt über seinen Namen ansprechen oder über seinen Index.
Wenn ein Objekt von Typ 2 zerstört wurde soll genau dort ein Objekt von typ 1 erstellt werden.
Das ist relativ einfach, denn Du kannst die Position nach x und y für das alte Objekt vor dem Zerstören abfragen und dann das neue genau dort platzieren.
Auch mit Flash habe ich überhaupt keine Erfahrung und kann deshalb auch keine Vergleiche ziehen.
Ich glaube da kann man auch ganz anders ansetzen als wir es bisher getan haben oder?
Ein ganz anderer Ansatz wäre, auf jegliche Bibliotheken zu verzichten und die Animationen mit requestAnimationFrame "zu Fuß" zu programmieren. Ich kann allerdings nicht voraussagen, ob man da wesentlich an Performane gewinnt.
Ich habe Caleb, den Entwickler von jCanvas, mal danach gefragt und er hat geantwortet, dass jCanvas für die Animationen jQuery benutzt und dass dieses seit Version 3 requestAnimationFrame einsetzt. Ich bin mir auch nicht sicher, ob diese Funktion die Probleme mit dem Tabwechsel löst.
Meinst Du requestAnimationFrame? Wenn ich richtig informiert bin, benutzen jQuery und jCanvas das.
Auf diesen Screenshots erkennt man es allerdings.
Bisher hatte ich im Opera getestet und auch dort kommt es zu gravierenden Problemen, wenn ich, während die Animation läuft, auf einen anderen Tab wechsele.
Anscheinend benutzt Du Firefox, aber auch damit kann ich das Problem nicht reproduzieren, auch nicht auf deiner bplaced-Seite.
Auch dort kann ich das Problem mit den Abständen nicht erkennen.
Das erste mit dem Abstand kann ich nicht reproduzieren. Am besten wäre es, wenn Du deins irgendwo hochladen könntest, damit man es sich in Aktion ansehen kann.
Das Timeout braucht man, damit die Bloons in zeitlichem Abstand starten. Versuche es: Wenn man das Timeout heraus nimmt, liegen sie alle übereinander und es hat den Anschein, dass nur einer da ist.
Ich glaube, so annähernd verstehe ich jetzt, wie das funktioniert.
da nicht 14 Bloons erstellt werden, sondern nur einer.
Dann versuche mal dieses:
function levels() {
level++;
allLevels();
var speed = 0.1;
var nrBloons = 14, intv = 500;
function getDuration(v, x1, y1, x2, y2) {
var t = Math.hypot(x2 - x1, y2 - y1) / v;
return t;
}
for (let h = 0; h < nrBloons; h++) {
setTimeout(function () {
$('canvas').addLayer({
type: 'image',
name: 'bloon' + h,
data: {
bloonType: 0
},
groups: ['bloons', 'redBloons'],
source: 'img/redBloon.png',
x: mapValues[0].x,
y: mapValues[0].y
});
let idxAni = 1;
while (mapValues[idxAni]) {
$('canvas').animateLayer('bloon' + h, {
x: mapValues[idxAni].x,
y: mapValues[idxAni].y
}, getDuration(speed,
mapValues[idxAni - 1].x, mapValues[idxAni - 1].y,
mapValues[idxAni].x, mapValues[idxAni].y), 'linear');
idxAni++;
}
}, intv * h);
}
}konnte den Code zu meinem erstaunen deutlich kürzer halten
Mich erstaunt vor allem, dass dieser Code funktioniert. Er tut es, aber ich bin weit davon entfernt, zu verstehen, wie und warum.
Was mich betrifft, kann ich daher auch das zweite Problem nicht lösen.
Das ist Gameplaytechnisch aber doch ziemlich doof.
Warum denn das?
BTW:
da es reicht die Bildschirmgröße minimal zu verändern damit nichts mehr funktioniert.
Das hat mir gestern Abend auch Kopfzerbrechen bereitet. Das Problem ist, dass Du mit CSS die Größe des Canvas verändert hast. Dass dabei die Auflösung leidet, ist in diesem Fall das kleinere Problem, aber der klick-sensitive Bereich ändert sich dabei nicht mit, so dass betr. Event nicht feuert.
Verstehe, ich hatte mich schon gefragt, wozu der Blooncounter da ist. Du kannst ja selber mal versuchen, es einzubauen.
Bei den Towers verstehe ich nur Bahnhof 
wahrscheinlich weil ich das Originalspiel nicht kenne. Wenn ich mir deinen Code ansehe, fällt mir ein, dass man Layer in jCanvas auch draggable machen kann.
Aber für heute ist es spät genug, ich mache jetzt erst Mal Schluss.
Das ist in items.js, Du brauchst nur die Konfiguration zu erweitern:
function allLevels() {
switch (level) {
case 1:
counter = 1;
whichBloons = ['redBloon', 'redBloon2'];
bloonCounter = [14, 20];
timeLapse = [0, 2];
console.log('heeeyooo');
break;Es ist noch nicht ganz perfekt, weil es am Ende mit einem Laufzeitfehler abbricht. Das musst Du noch abfangen.
Ja, auf den ersten Blick scheint es komplizierter zu sein, aber wenn man sich an die Denkweise von jCanvas gewöhnt hat, ist es einfacher als mit Timern oder animationFrame.
Ich habe mal das Skript levels.js umgearbeitet und jetzt läuft der Bloon einwandfrei und geschmeidig. Auch wenn ich die Konfiguration auf zwei Bloons erweitere, funktioniert es:
function levels() {
level++;
allLevels();
console.log($('canvas').getLayers());
console.log('klappt');
(function () {
var intv = 500;
var h = 1;
var speed = 0.1;
function getDuration(v, x1, y1, x2, y2) {
var t = Math.hypot(x2 - x1, y2 - y1) / v;
return t;
}
for (let idx1 = 0; idx1 < whichBloons.length; idx1++) {
function animateIt(layer) {
console.log("ani")
idxAni++;
$('canvas').animateLayer(layer, {
x: mapValues[idxAni].x,
y: mapValues[idxAni].y
}, getDuration(speed,
mapValues[idxAni - 1].x, mapValues[idxAni - 1].y,
mapValues[idxAni].x, mapValues[idxAni].y),
'linear',
function (layer) {
animateIt(layer)
}
);
}
let idx2 = 0, idxAni = 0;
setTimeout(function () {
var bloonName = whichBloons[idx1] + h;
$('canvas').addLayer({
type: 'image',
name: bloonName,
data: {
bloonType: 0
},
groups: ['bloons', 'redBloons'],
source: 'redBloon.png',
x: mapValues[0].x,
y: mapValues[0].y
});
animateIt($('canvas').getLayer(bloonName));
console.log("create bloon " + whichBloons[idx1] + " " + bloonName);
h++;
idx2++;
}, timeLapse[idx1] * 1000);
}
})();
function startButton() {
}
return;
}Ich bin der Meinung, dass es relativ kompakt ist, man muss sich nur an den rekursiven Callback gewöhnen, aber der wird häufig verwendet, auch bei Animationen mit jQuery,
t ist die Dauer der Animation. Du kannst eine Funktion schreiben, die diese berechnet:
function getDuration(v, x1, y1, x2, y2) {
var t = hypot(x2 - x1, y2 - y1) / v;
return t;
}und diese dann bei der Animation aufrufen:
$('canvas').addLayer({
type: 'image',
name: bloonName,
data: {
bloonType: 0
},
groups: ['bloons', 'redBloons'],
source: 'redBloon.png',
x: mapValues[0].x,
y: mapValues[0].y
}).animateLayer(bloonName, {
x: mapValues[1].x,
y: mapValues[1].y
}, getDuration(1, mapValues[0].x, mapValues[0].y, mapValues[1].x,mapValues[1].y),
function (layer) {
for (var i = 2; i < mapValues.length; i++) {
$(this).animateLayer(layer, {
x: mapValues[i].x,
y: mapValues[i].y
}, 2000, 'linear');
}
});