Beiträge von DER

Zitat von maxi0909

Wenn du/ihr mir nicht helfen willst/wollt, wieso kriege ich dann eine Antwort

Ich will helfen, aber alles was Du willst ist ein fertiges Spiel, das kann ich dir nicht geben. Wenn Du nun sagst, dein Bruder hat dabei Probleme die Kollisionswerte entsprechend zu berechnen, oder sonst etwas, das wäre kein Problem.

Nun stell dir mal vor, ich komme zu dir und möchte das Du ein Unternehmen für mich bewirtschaftest, nur solange bis es von selbst läuft, dann übernehme ich es und schenke es meinem Bruder, Schwester oder sonst wem.

basti1012 Er will ja nicht nur einen Code, er will ein fertiges Spiel...

Hallo, ich arbeite zur Zeit an ein Spiel mit JCanvas und möchte dabei animationen verwenden.

Allerdings bleibt die Animation nicht auf einer Geschwindigkeit und das Objekt bewegt sich zum Beispiel von Punkt A nach Punkt B langsamer als von Punkt B nach Punkt A. Ich habe absolut keine Ahnung wie das zustande kommen konnte. Damit ihr selbst sehen könnt was ich meine, habe ich das ganze mal hochgeladen:

Wenn ihr im Spiel auf 'Start' klickt, sollten sich rote Ballons die Strasse entlang bewegen. Allerdings wechseln sie dabei ihre Geschwindigkeit. Der Code dazu ist folgender:

$('canvas').addLayer({
                    type: 'image',
                    name: bloonName,
                    data: { 
                    bloonType: 0
                    },
                    groups: ['bloons', 'redBloons'],
                    source: 'img/redBloon.png',
                    x: mapValues[0].x,
                    y: mapValues[0].y
                }).animateLayer(bloonName, {
                    x: mapValues[1].x,
                    y: mapValues[1].y
                    }, 2000, 'linear',
                    function(layer) {
                        for (var i = 2; i < mapValues.length; i++) {
                            $(this).animateLayer(layer, {
                                x: mapValues[i].x,
                                y: mapValues[i].y
                            }, 2000, 'linear');
                        }
                    });

Ich kann mir nicht erklären, wieso sowas passiert, da ich auch sehr neu in JCanvas bin und zuvor weder mit JCanvas oder mit JQuery gearbeitet habe.

Zumal ich es sehr komisch finde, deine Idee von ihm eine Freude machen... Wir sollen also dein Weihnachtsgeschenk basteln und Du darfst es dann überreichen und den Dank einstecken?

Sorry, aber wenns nur darum geht, dann kann man dir weder hier noch sonst wo helfen, ein ganzes Spiel programmieren, das machen nicht mal diejenigen aus dem Forum, die den Leuten schon den halben Code immer zuwerfen.

Das Du keine ahnung hast von der Informatik merkt man schnell - sowas macht man auch als Profi nicht kurz nebenbei, und mehr Zeit als 'nebenbei' kann man auch nicht für sowas erwarten.

Das Problem ist ja, dass wir nicht wissen wo genau die Probleme liegen. Sollen wir jetzt ein ganzes Billiard Spiel programmieren welches dein Bruder dann vorzeigen kann?

Leider kann man nicht universellen Code schreiben, den man dann in jedem Programm nutzen kann.

Coden werden wir dir nichts, von der Logik her hilft man dir oder deinem Bruder bestimmt gerne. Dazu muss man aber wissen, wo genau die Probleme liegen?

Ansonsten kann man nur allgemeine Erklärungen zeigen:

Hi, da wäre Code von Nöten um dir weiterhelfen zu können.

Komischerweise geht es erst, dann nicht mehr. Ab einem bestimmten Punkt ist h+1 plötzlich undefined. Wie löst man das Problem?

EDIT: Ja ok, habs!

Ich habe gerade gesehen das es generell klappt. Nur kann man nicht returnMap[h+1] machen. Das gibt ne Fehlermeldung.

Okay, das ist natürlich schlauer. Also alles. Versuche ich so umzusetzen.

Sempervivum Ja, es klappt erstmal soweit, aber natürlich nicht ganz ohne Fehler, bzw. gibt es ein neues Problem. Wie teile ich jetzt dem Programm mit, ab wann die Bloons abbiegen sollen? Habe da ein wenig rumprobiert, doch es hat nicht geklappt:

if(xPlusZaehler == returnMap[h+1].x && yPlusZaehler == returnMap[h+1].y) { h++; }

Hier ist mal ein Bild: https://ibb.co/r2wgSxY

Die roten Dinger sind die Bloons, die sich auf der Strasse entlang bewegen sollen. Vom anfang bis zum Ende.

function Street() {
//die Werte für die Map
  coordinates = [
  { x: 660, y: -40 },
  { x: 660, y: 100 }
  ];
  // 0 = --, 1 = neutral, 2 = ++
  directions = [
  { x: 1, y: 2 }
  ];

return directions;
}

Hier sehen wir in 'coordinates' ab welchem Punkt sich die direction ändern soll. in 'directions' steht 0 für einen negativ Wert, 1 für neutral und 2 für positiv.

Haben wir nun also x = 1; und y = 2; soll die der Bloon sich auf der X-Achse nicht bewegen, aber auf der Y-Achse nach unten. (Weil +1 dazu gerechnet wird).

xPlusZaehler und yPlusZaehler stehen im drawImage(); für die Position x und y.

var returnMap = Street();

var h = 0;

console.log(returnMap[h].x);

var xPlusZaehler = 660,

yPlusZaehler = 50;


// 0 = --, 1 = neutral, 2 = ++

if(returnMap[h].x == 1 && returnMap[h].y == 2) { yPlusZaehler ++; }

if(returnMap[h].x == 1 && returnMap[h].y == 0) { yPlusZaehler --; }

if(returnMap[h].x == 2 && returnMap[h].y == 1) { xPlusZaehler ++; }

if(returnMap[h].x == 0 && returnMap[h].y == 1) { xPlusZaehler --; }

Klappt soweit auch ganz gut, nur weiß ich nicht wie ich das coordinates Array rüberholen kann. Kann ich sowas machen wie:

return coordinates, directions;

und dann:

var h = Street()[0];

geht das?

Ja, die Sache war Interessant, bis ich sie gelöst hab Hab das clearRect einfach an die richtige Stelle gepackt.

Auf andere Weise ist aber interessant die Bloons nun in eine andere Richtung zu weisen, wenn sie einen bestimmten Punkt erreicht haben.

Dazu habe ich mal zwei Arrays:

coordiantes [];
direction = [];

Sobald coordinates[x] und coordinates[y] erreicht ist, soll direction[x] und direction[y] gemacht werden.

So gut? Oder gäbs da was besseres?

Die sache mit JCanvas ist ganz bestimmt schlauer, aber ich glaub die Diskussion hatten wir schon einmal ;D Ich hab mir für dieses Projekt vorgesetzt nur vanilla JS zu verwenden, vor Allem um meine Programmierfähigkeiten was Logik angeht zu verbessern. Viele sachen sind in JCanvas schon fertig, aber genau da will ich meinen Kopf schulen.

Sempervivum Nach meinen Versuch das jetzt in die Praxis umzusetzen sind natülich einige Fehler entstanden. Statt einfache console.logs will ich natürlich was anderes.

Undzwar soll jedes mal auf dem Canvas ein Bild gezeichnet werden, also ein Bloon. Die sollen dann über den Bildschirm laufen, wie im Originalspiel Bloons TD 4. Nur wenn ich ctx.clearRect(); einsetze um die Animation zu vollenden, bleibt der Schirm weiß.

Also:

var intv = 1000;
    for (let idx1 = 0; idx1 < whichBloons.length; idx1++) {

        let idx2 = 0;
        
        setTimeout(function () {

            var plusZaehler = 0;
            var bloonAnimation;

            function drawBloons() {
                
                //hier sollte ein ctx.clearRect hin, doch dann sieht man erst gar keine Bloons
                var newBloon = new Image();
                newBloon.src = bloons[whichBloons[idx1]].skin;
                newBloon.onload = function() {
                  bloonCtx.drawImage(newBloon, 660, plusZaehler);
                }
                plusZaehler ++;
                bloonAnimation = requestAnimationFrame(drawBloons);
            }
            drawBloons();
            idx2++;

            var timer = setInterval(function () {

                var plusZaehler = 0;
                var secondBloonAnimation;

                function secondDrawBloons() {
                    
                    /Hier verschwinden die Bloons nach etwa 2 Sekunden.
                    var nextBloon = new Image();
                    nextBloon.src = bloons[whichBloons[idx1]].skin;
                    nextBloon.onload = function() {
                    bloonCtx.drawImage(nextBloon, 660, plusZaehler);
                }

                plusZaehler ++;
                secondBloonAnimation = requestAnimationFrame(secondDrawBloons);
                }
                secondDrawBloons();
                idx2++;

                if (idx2 >= bloonCounter[idx1]) {

                    clearInterval(timer);
                    startButton();
                }
            }, intv);
        }, timeLapse[idx1] * 1000);
    }
  })();

Ich hoffe ich konnte vermitteln was ich meine und suche gerade nach einer Lösung, bzw. nach einen Grund wieso das überhaupt passiert.

Denn nach meine Auffasung sollte es dadurch aussehen als wenn sich die Bloons über den Bildschirm bewegen, da erst alles gelöscht wird und dann der nächste bloon einen Pixel weiter gezeichnet wird.

Funktioniert super!

Sempervivum an sich funktioniert das Script. Danke! Nur habe ich es mir mit dem TimeLaps anders vorgestellt.

die zweite Reihe an Bloons soll nicht erst dann erstellt werden, wenn die andere fertig ist, sondern timeLaps[1] sekunden nach dem man die Funktion ausführt.

Du kannst die IP Adresse des Users ermitteln und darüber weißt Du dann aus welchem Land der User auf deine Seite zugreift. Das ist soweit ich weiß die üblichste Methode.

https://www.a-coding-project.de/ratgeber/php/geolocation

Jetzt hört der nicht auf Bloons zu erstellen. Liegt wahrscheinlich daran, dass whichBloons[idx1] undefined ist. Aber woran kann das liegen? whichBloons ist definend und der erste Eintrag ist 0.

Ja stimmt, ist richtig. Wobei die 3 Sekunden auch nicht statisch sein würden, sondern sich auch mit Art des Bloons ändern würden. Aber das ist ja nicht so schwer.

idx1 ist bei dir jetzt ein statischer Wert, der sich jedoch nach jedem Durchlauf ändern soll.

Daher wollte ich das mit ner Schleife machen. Dann wäre i immer die Nummer im Array die ich brauche und die zu den anderen Arrays passt.