af2111: Problem mit Spritebewegung

Beitrag lesen

SELF-Forum

Problem mit Spritebewegung

af2111
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte für ein Spiel eine Figur Münzen einsammeln lassen. Die Figur lässt sich mit den Pfeiltasten steuern, und genau bei der Steuerung liegt das Problem. Ich kriege es einfach nicht hin, die Figur so zu bewegen, dass die dynamisch erstellte Position der Münzen noch gespeichert wird. Leider gibt mir auch die Console keine Fehlermeldung. Hier ist der Code:

HTML:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Sammle die Münzen</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="SpielMitMünzen.css" />

    <script src="Jquery/jquery-3.3.1.js"></script>
</head>

<body>
    <div class="playground">
        <img class="sprite" src="Player.png">


    </div>
    </body>

</html>

JS:


            let coins = [];
            let sprite = $(".sprite");
            let spritePosX = sprite.css("left");
            let spritePosY = sprite.css("top");
            let playground = $(".playground");



            let i = 0;
            while (i <= 20) {
                let img = $("<img class=\"coinimg\" src=\"Coin.png\">");

                coins.push[img];
                img.attr("id", "coin" + i);



                let min = 0;
                let max = 300;
                let positionCoinX = (Math.random() * (max - min) + min) + "px";
                let MinY = 0;
                let MaxY = 200;
                let positionCoinY = (Math.random() * (MaxY - MinY) + MinY) + "px";

                img.css({
                    left: positionCoinX,
                    top: positionCoinY
                });



                playground.prepend(img);
                i++;


                function coordinates() {
                    return [positionCoinX, positionCoinY, spritePosX, spritePosY];
                }


            }




            let coords = coordinates();
            console.log(coords);

            $(document).keydown(function (event) {

                switch (event.key) {
                    case "ArrowUp":

                        coords[3] -= 10;
                        sprite.animate({
                            top: coords[3]

                        }, 25);

                        if (coords[0] && coords[1] === coords[2] && coords[3]) {
                            alert("berührt");
                        }
                        break;
                    case "ArrowLeft":


                        coords[2] -= 10;
                        sprite.animate({
                            left: coords[2]
                        }, 25);

                        if (coords[0] && coords[1] === coords[2] && coords[3]) {
                            alert("berührt");
                        }
                        break;

                    case "ArrowRight":

                        coords[2] = parseInt(coords[2]);
                        coords[2] += 10;
                        coords[2] + "px";
                        sprite.animate({
                            left: coords[2]
                        }, 25);

                        if (coords[0] && coords[1] === coords[2] && coords[3]) {
                            alert("berührt");
                        }
                        break;
                    case "ArrowDown":
                        coords[3] = parseInt(coords[3]);
                        console.log(coords[3]);
                        coords[3] += 10;


                        sprite.animate({
                            top: coords[3]
                        }, 25);

                        if (coords[0] && coords[1] === coords[2] && coords[4]) {
                            alert("berührt");
                        }
                        break;


                }
            });
        });

Hat jemand eine Idee, wie die Steuerung funktionieren köntte?

Beitrag melden
–
Informationen zu den Bewertungsregeln