Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<title>textová hra</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id="vue"> <div> {{mista[aktualni_misto].text}} </div> <button v-for="moznost in mista[aktualni_misto].moznosti" @click="goto(moznost.zmena_mista)">{{moznost.popis}}</button> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { color: white; background-color: black; font-size: 1.6em; margin-left: 30%; margin-right:30%; } #images { height: 500px; background-size: cover; background-position: center; margin-bottom: 1em; } input { width: 100%; height: 30px; text-align:center; font-size: 1em; margin-top:15px; } #buttonBox { text-align:center; } button{ margin-left: 10px; margin-top: 15px; height: 22px; font-size: 14px; }
CSS
Autoformát
CSS reset
Až na konci
var vue = new Vue({ el: '#vue', data: { aktualni_misto: "krizovatka", mista: { "krizovatka": { "text": "Stojíš na křižovatce", "moznosti": [{ "popis": "Jít doleva", "zmena_mista": "vlevo" }, { "popis": "Jít doprava", "zmena_mista": "vpravo" } ] }, "vlevo": { "text": "Šel jsi doleva", "moznosti": [{ "popis": "pokračovat v cestě do leva", "zmena_mista": "vlevodal" }, { "popis": "Vrátit se a jít do prava", "zmena_mista": "vpravo" } ] }, "vpravo": { "text": "Šel jsi doprava", "moznosti": [{ "popis": "Pokračovat v cestě doprava", "zmena_mista": "vpravodal" }, { "popis": "vrátit se a jít doleva", "zmena_mista": "vlevo" } ] }, "vlevodal": { "text": "Pokračoval jsi doleva" }, "vpravodal": { "text": "Pokračoval jsi doprava" } } }, methods: { goto: function(misto) { this.aktualni_misto = misto; } } })
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>