af2111: Zufällige Verteilung der Münzen

Beitrag lesen

SELF-Forum

Zufällige Verteilung der Münzen

af2111
– Informationen zu den Bewertungsregeln

Hallo,

ich programmiere ein Spiel, bei dem der Charakter Münzen in einer bestimmten Zeit sammeln muss. Die Steuerung habe ich fertig, jetzt will ich aber die Münzen zufällig auf dem Spielfeld verteilen. Und hier liegt das Problem. Eigentlich sollen die Münzen am ganzen Spielfeld erscheinen, aber stattdessen kommt diese Fehlermeldung: Uncaught TypeError: coins[i].css is not a function at HTMLDocument.<anonymous> (SpielMitCoins.html:44) at mightThrow (jquery-3.3.1.js:3534) at process (jquery-3.3.1.js:3602) Das ist der Code:

<!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>

 $(document).ready(function () {


            let sprite = $(".sprite");
            let spritePos = sprite.position();
            let playground = $(".playground");


            let coins = [];
            let i = 0;
            while (i <= 20) {

                let coin = $.parseHTML("<img class=\"coinimg\" src=\"Coin.png\">");
                coins.push(coin);


                min = -332.00125;
                max = 517.99875;
                let positionCoinX = toString((Math.random() * (max - min)) + min);
                let MinY = -182;
                let MaxY = 168;
                let positionCoinY = toString((Math.random() * (MaxY - MinY)) + MinY);

                coins[i].css({
                    left: positionCoinX + "px",
                    top: positionCoinY + "px"
                });
                playground.prepend(coins[i]);
            }
            i++;

            console.log(coins);




            $(document).keydown(function (event) {
                switch (event.key) {
                    case "ArrowUp":
                        if (spritePos.top <= -182) {
                            break;
                        }
                        spritePos.top -= 10;
                        sprite.animate({
                            top: spritePos.top
                        }, 25);
                        console.log(spritePos.top);

                        break;
                    case "ArrowLeft":

                        if (spritePos.left <= -322.49925) {
                            break;
                        }
                        spritePos.left -= 10;
                        sprite.animate({
                            left: spritePos.left
                        }, 25);
                        console.log(spritePos.left);
                        break;

                    case "ArrowRight":

                        if (spritePos.left >= 517.99875) {
                            break;
                        }
                        spritePos.left += 10;
                        sprite.animate({
                            left: spritePos.left
                        }, 25);
                        console.log(spritePos.left);
                        break;
                    case "ArrowDown":
                        if (spritePos.top >= 168) {
                            break;
                        }

                        spritePos.top += 10;
                        sprite.animate({
                            top: spritePos.top
                        }, 25);
                        console.log(spritePos.top);
                        break;



                }
            });
        });

Was muss ich anders machen?

Beitrag melden
–
Informationen zu den Bewertungsregeln