Zadání:
Vykreslete obrázky náhodně hozených kostek a vypočtěte součet hozených hodnot.
Prvně vždy vytvoříme HTML div, kterému dáme id. Do divu budeme později vypisovat výstup.
JavaScriptový kód vždy začínáme otevíracím tagem scriptu(<script>), ukončujeme ho uzavíracím tagem scriptu
(</script>).
Prvně vytvoříme proměnnou suma, která nám později umožní vypočítat součet na kostkách. Jako druhé vytvoříme proměnnou zprava, do které vložíme prázdné uvozovky.
Za pomoci cyklu for() jsme schopni vygenerovat více kostek. Pomocí funkce Math. random() vygenerujeme náhodné číslo od 0 do 1. Funkci pak vynasobíme následovně: * (nejvyšší číslo - nejnižší číslo) + nejnižší číslo.
Pak pomocí Math.floor() odsekneme desetinná místa čísla, díky zaokrouhlení dolů.
Výslednou hodnotu vložíme do konstanty x. U nás generujeme číslo mezi 1 a 6.
Do proměnné text přidáme html elementy pro zobrazení obrázků, které musíme mít předem vytvořeny ve složce. Obrázky musí být pojmenovány 1.png, 2.png ...
Na toto pojmenování se můžeme odkázat ve vytvoření obrázku, kdy místo názvu dáme proměnnou x. Styl kostek můžete
ozvláštnit použitím této proměnné i ve stylování.
K proměnné suma se nám vždy na konci cyklu přičte číslo z proměnné x.
Nakonec text vložíme do HTML divu.
<div id="kostky-vysledek" style="text-align:center"></div>
<script>
let suma = 0;
let text = "";
for (let i = 1; i <= 6; i++) {
const x = Math.floor(Math.random() * 6 + 1);
text += `<img
src="../${x}.png"
style="margin: 15px; transform: rotate(${x * 15}deg); width: 120px; height: 120px;">`;
suma += x;
}
text += `<h2 style="text-align:center">Součet = ${suma}</h2>`;
document.getElementById("kostky-vysledek").innerHTML = text;
</script>