Javascript Würfel, Summe addieren und Werte in Liste ausgeben

skyfin

Könnt Ihr mir helfen, die Ergebnisse, beim drücken eines Würfels, im linken grauen Feld auf zu listen und im rechten Feld, die Summe zu addieren?

Schöne Grüße Fin

basti1012

Also die gewürfelten Zahlen sollen unten Links im Kasten stehen ? Dann alle zusammen rechen und das ergebniss dann in rechten Feld stehen. Sehe ich das richtig. ?

PS: Habe das mal gerade versucht und muß sagen das es sich ganz einfach umsetzen läst.Es gibt zwar viele Wege und das wahr meiner.

Die gewürfelten Zahlen läßt man ganz normal unten im Feld anzeigen so wie du die oben auch anzeigen läßt . Das sollte nicht dein problem sein das solltest du hinbekommen. Dann läst du die Gewürfelte Zahl in ein Feld anzeigen ( Bei mir id="gesammt" ). Beim nächsten Würfeln liest du die Zahl aus "id Gesamt" wieder aus und rechnest die mit der neuen gewürfelten Zahl wieder zusammen und läßt sie wieder in den Feld Gesamt anzeigen. So hast du nach jeden Würfeln die Gesamt Zahlen .

Dein Script habe ich am Anfang gleich geändert ,weil deins ist zu lang das brauch man so nicht.

Bei randomNumber1() gibst du die max Zahl und Würfelnummer gleich mit . randomNumber(1,4). Das machst du bei jeden Würfel

randomNumber(1,4)

randomNumber(2,6)

randomNumber(3,10)

usw.

Dann sieht dein Script insgesamt nur noch so aus

Code

function randomNumber(a,b) {
  var min1 = 1;
  var max1 = b;
  var elem1 = document.getElementById('output'+a);
  elem1.innerHTML = rand1(min1, max1);
}
function rand1(min1, max1) {
    return Math.floor(Math.random() * (max1 - min1 + 1)) + min1;
}

Mehr brauchst du bei deinen Script nicht.Da sind jetzt noch nicht deine gewollte änderungen drinne , das wahr jetzt nur dein Script und zwar kürzer. Wie du das andere hinbekommst habe ich dir geschrieben. Fals es nicht klappt dann melde dich nochmal

skyfin

ja, genau so

Arne Drews

Ich habe mir das Script nicht angesehen, weil ich keine ZIP aus Foren lade, aber warum nicht alle Würfel gleichzeitig rollen?

JavaScript

var _min = 1;
var _max = 6;
var _dices = 6

for ( x=0; x<_dices; x++ )
  _out.innerHTML += '<p>' + (Math.floor(Math.random() * (_max - _min + 1)) + _min) + '</p>';

Lustig wäre auch, wenn Du die Unicode-Zeichen verwenden würdest:

JavaScript

var _min = 1;
var _max = 6;
var _dices = 6
var _diceFaces = [ "0x2680", "0x2681", "0x2682", "0x2683", "0x2684", "0x2685" ];

for ( x=0; x<_dices; x++ )
  _out.innerHTML += String.fromCharCode( _diceFaces[(Math.floor(Math.random()*(_max-_min+1))+_min)-1] );

Muss man halt ein wenig mit der Größe usw. rumspielen, damit das nett aussieht...

chrisee82

Die ermittelte Zufallszahl des gerade gewürfelten Würfels kannst Du wie die Würfelwerte unter die Würfel schreiben. Die id der Ebene ist ja "outputwert". z.B.

elem_dice_single=document.getElementById("outputwert")

elem_dice_single.innerHTML=Wert des Würfels.

Da du den gewürfelten Wert zweimal schreiben willst, würde ich diesen auch in einer variable abspeichern. z.B. dice1=Rand(...)

Das Aufsummieren ist komplizierter. Neben der von Arne Drews vorgeschlagenen Variante alle Würfel auf einmal zu aktivieren, kannst Du die Summe auch in einer Variablen z.B. dice_sum ermitteln. Diese kannst Du per

dice_sum+=Wert des aktuell aktivierten Würfels laufend erhöhen.

Hierbei müsstest Du aber den VORIGEN Wert des Würfels wieder abziehen, da er ja in der Gesamtsumme nicht mehr enthalten sein darf (sondern "nur" der neue Wert). Also ggf. nochmal eine Variable z.B. dice1_old, mit der du den vorigen Wert abspeicherst.

skyfin

sorry, wegen der späten Antwort. Ich habs probiert, bekomm es aber nicht hin. Mit Html und Css kann ich flüssig arbeiten. Bei Javascript, bin ich absoluter Anfänger.

Auf die Frage von Arne Drews, ich programmier es für einen Kollegen, nach seinen Vorgaben

basti1012

was genau bekommst du den jetzt nicht hin.? Hast du das mit den zusammen rechnen hinbekommen oder das noch nicht ?

mein Codet sieht so aus

Code

<body>
<div class="divsimon">
    <img class="imgsimon1" src="picture/simon1.jpeg">
    <img class="imgsimon2" src="picture/simon3.jpeg">
</div>
<div class="divdice" id="divdice1">
    <img src="picture/picwürfel4.jpg">
    <h1 id="h1wuerfel">Würfel 1-4</h1>
    <p id="output1"></p>
    <button onclick="randomNumber(1,4)">Los!</button>
</div>
<div class="divdice" id="divdice2">
    <img src="picture/picwürfel6.jpg">
    <h1>Würfel 1-6</h1>
    <p id="output2"></p>
    <button onclick="randomNumber(2,6)">Los!</button>
</div>
<div class="divdice" id="divdice3">
    <img src="picture/picwürfel8.jpg">
    <h1>Würfel 1-8</h1>
    <p id="output3"></p>
    <button onclick="randomNumber(3,8)">Los!</button>
</div>
<div class="divdice" id="divdice4">
    <img src="picture/picwürfel10.jpg">
    <h1>Würfel 1-10</h1>
    <p id="output4"></p>
    <button onclick="randomNumber(4,10)">Los!</button>
</div>
<div class="divdice" id="divdice5">
    <img src="picture/picwürfel12.jpg">
    <h1>Würfel 1-12</h1>
    <p id="output5"></p>
    <button onclick="randomNumber(5,12)">Los!</button>
</div>
<div class="divdice" id="divdice6">
    <img src="picture/picwürfel20.jpg">
    <h1>Würfel 1-20</h1>
    <p id="output6"></p>
    <button onclick="randomNumber(6,20)">Los!</button>
</div>
<div class="divdice" id="divdice7">
    <img src="picture/picwürfel100.jpg">
    <h1>Würfel 1-100</h1>
    <p id="output7"></p>
    <button onclick="randomNumber(7,100)">Los!</button>
</div>
<div id="divfield1">
    <h2>Ausgabe der Werte der Würfel</h2>
    <p id="outputwert"></p>
</div>
<div id="divfield2">
    <h2>Ausgabe der Summe der Würfel</h2>
     Gesamt:
  <p id="gesammt">0</p>
</div>
<div class="divsimon">
    <img class="imgsimon1" src="picture/simon1.jpeg">
    <img class="imgsimon2" src="picture/simon3.jpeg">
</div>

  <script>
 
function randomNumber(a,b) {
  var min1 = 1;
  var max1 = b;
  ges=document.getElementById('gesammt');
  gesa=ges.innerHTML;
  var outfeld = document.getElementById('outputwert');
  var elem1 = document.getElementById('output'+a);
  var erg=rand1(min1, max1);
  elem1.innerHTML = erg;
  ges.innerHTML=parseInt(gesa)+parseInt(erg);
  outfeld.innerHTML+='Würfel '+a+' ='+erg+' <br>';
}

function rand1(min1, max1) {
    return Math.floor(Math.random() * (max1 - min1 + 1)) + min1;
}
  </script>
</body>

Alles anzeigen

Mußt im html auch noch kleinigkeiten anpassen. Fals es nicht klappt gebe ich dir Link zur kompletten geänderten Spieldatein

Was ist eigentlich mit deinen Würfel Bilder los? Die sind irgendwie kaputt.In den Bildern wird nix angezeigt. Du hast aber auch Sonderzeichen genommen für die Namen und Sonderzeichen haben eigentlich nix im Link zu suchen.

Sempervivum

Anders als chrisee82 schlage ich vor, bei jedem Würfeln die komplette Summe neu zu berechnen, dann muss man sich um das Subtrahieren, wenn schon einmal gewürfelt wurde, nicht kümmern.

Code

Ich habs probiert, bekomm es aber nicht hin.

Dann poste doch noch Mal den Stand, den Du jetzt hast.

Arne Drews

Hab nur mal aus Spaß etwas rumgespielt. Da ich gerne mit Objekten arbeite, habe ich das mal als Prototyp an das HTMLElement-Objekt gehängt:

Spoiler anzeigen

JavaScript

HTMLElement.prototype.throwDices = function(d=6,o={}) {
  o.min = (o.min!=null)?o.min:1;
  o.max = (o.max!=null)?o.max:6;
  o.rspTxt = (o.rspTxt!=null)?o.rspTxt:'gewürfelte Augenzahl: ';

  _diceFaces = [ "0x2680", "0x2681", "0x2682", "0x2683", "0x2684", "0x2685" ];
  _eDices = document.querySelector('.dices');
  _eSum = document.querySelector('.sum');
  _sum = 0;
  
  for ( x=0; x<d; x++ ) {
    _sum += _v = Math.floor(Math.random()*(o.max-o.min+1))+o.min;
    _eDices.innerHTML += String.fromCharCode( _diceFaces[_v-1] );
  }

  _eSum.innerHTML = o.rspTxt + _sum;
}

Alles anzeigen

Bei einer einfachen Vorlage wie dieser:

HTML

<div class="throw">
  <p class="dices"></p>
  <p class="sum"></p>
</div>

sind nun fast beliebige Aufrufe möglich:

JavaScript

// "wirft" mit default Werten ( 6 Würfel, Min=1, Max=6 )
document.querySelector( '.throw' ).throwDices();

// "wirft" mit 10 Würfeln und weiteren default Werten ( Min=1, Max=6 )
document.querySelector( '.throw' ).throwDices( 10 );

// "wirft" mit 6 Würfeln, Min=3 und default Wert ( Max=6 )
document.querySelector( '.throw' ).throwDices( 6, { min:3 } );

// "wirft" mit 5 würfeln, Min=2, Max=5
document.querySelector( '.throw' ).throwDices( 5, { min:2, max:5 } );

Alles anzeigen

Der Text für die gewürfelte Augenzahl könnte über den zweiten Parameter ebenfalls angepasst werden:

JavaScript

// Beispiel: 6 würfel, Min und Max = default
document.querySelector( '.throw' ).throwDices( 6, { rspTxt:'Dein Ergebnis: ' } );

Muss man nicht so machen, ich finds halt praktisch...

skyfin

ich bin immer noch beim alten Stand, hatte noch keine Zeit neue Versuche zu unternehmen

Sempervivum

Dann probiere mal, ob Du mit dieser Funktion zum Ziel kommst:

Code

function summieren() {
    var outputs = document.querySelectorAll(".divdice p[id^='output']");
    var sum = 0;
    for (var i = 0; i < outputs.length; i++) {
        var content = outputs[i].innerHTML;
        if (content != "") sum += parseInt(content);
    }
    document.getElementById("outputsumme").innerHTML = sum;
}

BTW: Ich habe da auch etwas mit Objekten experimentiert:

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <title>Würfelspiel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/indexDestop2.css">
    <link rel="stylesheet" type="text/css" media="(max-width: 800px)" href="css/indexMobil2.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <template id="dicetpl">
        <div class="divdice" id="divdice{{nr}}">
            <img src="{{img}}">
            <h1 class="h1wuerfel">{{title}}</h1>
            <p class="output"></p>
            <button class="btn">Los!</button>
        </div>
    </template>
</head>

<body>
    <!-- img simon -->
    <div class="divsimon">
        <img class="imgsimon1" src="picture/simon1.jpeg">
        <img class="imgsimon2" src="picture/simon3.jpeg">
    </div>
    <div id="dicecontainer"></div>
    <div id="summary">
        <div>
            <h2>Ausgabe der Werte der Würfel</h2>
            <ul id="sumlist"></ul>
        </div>
        <div>
            <h2>Ausgabe der Summe der Würfel</h2>
            <p id="outsum"></p>
        </div>
    </div>

    <div class="divsimon">
        <img class="imgsimon1" src="picture/simon1.jpeg">
        <img class="imgsimon2" src="picture/simon3.jpeg">
    </div>
    <script>
        function Sum() {
            var list = $("ul#sumlist");
            var outsum = $("#outsum");
            var values = [];
            return {
                createVal: function (nr, title) {
                    values[nr] = 0;
                    list.append('<li>' + title + ': <span id="val' + nr + '"></span></li>');
                },
                reportVal: function (nr, val) {
                    values[nr] = val;
                    list.find("#val" + nr).text(val);
                    sum = 0;
                    values.forEach(function (item, idx) {
                        sum += item;
                    });
                    outsum.text(sum);
                }
            }
        }
        function Dice(min, max, title, pic, nr, sum) {
            sum.createVal(nr, title);
            var val = 0;
            function randomNumber(min, max, out) {
                var rnd = Math.floor(Math.random() * (max - min + 1)) + min;
                out.text(rnd);
                val = rnd;
                sum.reportVal(nr, val);
            }
            var thehtml = $("#dicetpl").html();
            thehtml = thehtml.replace("{{nr}}", nr)
                .replace("{{img}}", pic)
                .replace("{{title}}", title);
            var thedice = $(thehtml);
            var out = thedice.find(".output");
            thedice.find(".btn").on("click", function () { randomNumber(min, max, out) });
            $("#dicecontainer").append(thedice);
        }
        var thesum = new Sum();
        var dice1 = new Dice(1, 4, 'Würfel 1-4', "picture/picwuerfel4.jpg", 1, thesum);
        var dice2 = new Dice(1, 6, 'Würfel 1-6', "picture/picwuerfel6.jpg", 2, thesum);
        var dice3 = new Dice(1, 8, 'Würfel 1-8', "picture/picwuerfel8.jpg", 3, thesum);
        var dice4 = new Dice(1, 10, 'Würfel 1-10', "picture/picwuerfel10.jpg", 4, thesum);
        var dice5 = new Dice(1, 12, 'Würfel 1-12', "picture/picwuerfel12.jpg", 5, thesum);
        var dice6 = new Dice(1, 20, 'Würfel 1-20', "picture/picwuerfel20.jpg", 6, thesum);
    </script>
</body>

</html>

Alles anzeigen

Arne Drews

Die Idee mit dem Template gefällt mir.

Aber die Frage sei auch an dieser Stelle erlaubt: Warum greift man für so'n bisschen JavaScript zu jQuery?!

skyfin

danke euch ich habs geschaft, es funktioniert nun =)

Jetzt mitmachen!