Zufällige Verteilung der Münzen
0 0 0 
Matthias Apsel
0 
Rolf B
0 
dedlfix
0
Zufällige Verteilung der Münzen
JürgenB
Gunnar BittersmannHallo,
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?
-
Hm. Das
coins[i].cssist wirklich keine Funktion, Du notierst da aber etwas, was wie eine solche aussieht (Achte auf die runden Klammern!):coins[i].css({ left: positionCoinX + "px", top: positionCoinY + "px" });willst statt dessen Du nicht lieber:
coins[i].style.left = positionCoinX + "px"; coins[i].style.top = positionCoinY + "px";notieren?
-
Naja, jetzt kommt die Meldung:
jquery-3.3.1.js:3827 Uncaught TypeError: Cannot set property 'left' of undefined at HTMLDocument.<anonymous> (SpielMitCoins.html:44) at mightThrow (jquery-3.3.1.js:3534) at process (jquery-3.3.1.js:3602)
-
Naja, jetzt kommt die Meldung: jquery-3.3.1.js:3827 Uncaught TypeError: Cannot set property 'left' of undefined at HTMLDocument.
Dann schmeiss jquery raus. Du benutzt davon 0,01% und das an völlig unnötigen Punkten. Das alles geht ohne Aufwand auch in Vanilla-Js.
-
Hallo,
… Vanilla-Js.
und den Link zum Random Walk im Wiki hatte ich im anderen Thread ja schon verlinkt. Da findest du, wie du Objekte positionieren kannst.
Neue Münzbilder kannst du mit createElement und appendChild erzeugen.
Gruß
Jürgen-
@@JürgenB
und den Link zum Random Walk im Wiki hatte ich im anderen Thread ja schon verlinkt. Da findest du, wie du Objekte positionieren kannst.
Wie du Objekte statisch positionieren kannst, ja. Wie du Objekte animieren kannst, nein.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
-
-
Hallo ursus contionabundo,
Hm. Das
coins[i].cssist wirklich keine Funktion, Du notierst da aber etwas, was wie eine solche aussieht (Achte auf die runden Klammern!):coins[i].css({ left: positionCoinX + "px", top: positionCoinY + "px" });Grundsätzlich sollte eine solche Schreibweise möglich sein.
Bis demnächst
Matthias--
Pantoffeltierchen haben keine Hobbys. -
Hallo ursus,
Das coins[i].css ist wirklich keine Funktion
Grundsätzlich ist es das schon, wenn denn coins[i] ein jQuery Set wäre. Das bekommt man von $.parseHTML aber nicht; ich bekomme davon ein Array mit einem <img> Element drin.
Ein jQuery-Set erhält man mit $("<img class='coin' src='...'>"), und darauf kann man auch die css-Methode anwenden. Dieses Set kann man auch im Array speichern und aus Event-Handlern heraus per .animate() bewegen.
Rolf
--
sumpsi - posui - clusi
-
-
Tach!
Uncaught TypeError: coins[i].css is not a function
Was muss ich anders machen?
Wenn coins[i].css keine Funktion ist, dann ist coins[i] wohl nicht das Objekt, das du vermutest. Debugging heißt die Strategie, um Ursachen zu finden. console.log() ist eine wichtige Funktion, aber Breakpoint setzen und Variableninhalte direkt anschauen, geht auch in jedem modernen Browser, ohne Code ändern zu müssen.
dedlfix.
-
Hallo af2111, Sorry, irgendwie habe ich es geschafft, meine Antwort an den falschen thread zu hängen. Da sie dot keinen Sinn macht hier nochmal als Vollzitat
mir ist aufgefallen, dass dein i++ nicht innerhalb der Schleife steht. Dadurch wirst du vermutlich eine endlosschleife bekommen. Und was coins.push(coin) macht, wenn "unendlich" viele Elemente in das Array gepusht werden, weiß ich ehrlich gesagt nicht. Versuch einfach mal, das i++ innerhalb der geschweiften Klammern der Schleife zu schreiben.
Viele Grüße und viel Erfolg mit dem Spiel
mbr
@moderatoren: gibt es eine Möglichkeit, die alte Antwort zu löschen - oder zumindest auf "NoArchive" zu setzen? Oder ist es besser, mit dem "Spam" dort zu leben? Ich bitte nochmals um Entschuldigung, irgendwas ist da vorgestern schiefgegangen... (war länger nicht mehr hier - beziehungsweise habe nur still mitgelesen – muss mich ans posten erst wieder gewöhnen)
-
Hallo mbr,
@moderatoren: gibt es eine Möglichkeit, die alte Antwort zu löschen
Erledigt.
Ich bitte nochmals um Entschuldigung
Kein Problem. Und dafür musst du dich auch nicht entschuldigen.
Bis demnächst
Matthias--
Pantoffeltierchen haben keine Hobbys.
-