co/reinforcement_learning_simulation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Mensch und KI beginnen in jeder Spielrunde abwechselnd. Layoutverbesserungen.
All checks were successful
ci/woodpecker/push/default Pipeline was successful
Details

Browse source
This commit is contained in:
Christian Opitz 2023-11-12 12:01:59 +01:00
parent 6576aeeebc
commit 0c10bc9df9
1 changed files with 116 additions and 162 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

150
src/App.vue
View file

@ -1,8 +1,10 @@
<template>
<h2>
Wer die letzte Münze nimmt, gewinnt.<br />
Trainiere die KI!
Wer die letzte Münze nimmt, gewinnt.
</h2>
<h4>
Trainiere die KI und beobachte, was mit den gemerkten Zügen der KI passiert!
</h4>
<br />
<H3>Münzen:</H3>
@ -11,98 +13,70 @@
<br />
<br />
<div class="grid-container-spalten-2">
<div
class="grid-item-spalte"
v-bind:class="[
<div class="grid-item-spalte" v-bind:class="[
{ aktiv: this.wer_ist_dran_mensch },
{
inaktiv:
!this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
},
]"
>
]">
<h3>Mensch</h3>
</div>
<div
class="grid-item-spalte"
v-bind:class="[
<div class="grid-item-spalte" v-bind:class="[
{ aktiv: !this.wer_ist_dran_mensch },
{
inaktiv:
this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
},
]"
>
]">
<h3>KI</h3>
</div>
<div
v-bind:class="[
<div v-bind:class="[
{ aktiv: this.wer_ist_dran_mensch },
{
inaktiv:
!this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
},
]"
>
]">
<template v-for="index in this.max_muenzen_pro_zug">
<button class="btn btn-primary"
v-on:click="nimm(index, false)"
:disabled="!wer_ist_dran_mensch"
v-show="index <= this.aktueller_muenzen_stand"
>
<button class="btn btn-primary" v-on:click="nimm(index, false)" :disabled="!wer_ist_dran_mensch"
v-show="index <= this.aktueller_muenzen_stand">
nimm {{ index }}
</button>
<br />
</template>
</div>
<div
class="grid-container-spalten-3"
v-bind:class="[
<div class="grid-container-spalten-3" v-bind:class="[
{ aktiv: !this.wer_ist_dran_mensch },
{ inaktiv: this.wer_ist_dran_mensch },
{ inaktiv: this.wer_ist_dran_mensch == null },
]"
>
<div
class="grid-item-spalte"
v-bind:class="[
]">
<div class="grid-item-spalte" v-bind:class="[
{ aktiv: !this.wer_ist_dran_mensch },
{ inaktiv: this.wer_ist_dran_mensch },
{ inaktiv: this.wer_ist_dran_mensch == null },
]"
>
]">
Anzahl Münzen
</div>
<div
class="grid-item-spalte"
v-bind:class="[
<div class="grid-item-spalte" v-bind:class="[
{ aktiv: !this.wer_ist_dran_mensch },
{ inaktiv: this.wer_ist_dran_mensch },
{ inaktiv: this.wer_ist_dran_mensch == null },
]"
>
]">
Mögliche Züge
</div>
<div
class="grid-item-spalte"
v-bind:class="[
<div class="grid-item-spalte" v-bind:class="[
{ aktiv: !this.wer_ist_dran_mensch },
{ inaktiv: this.wer_ist_dran_mensch },
{ inaktiv: this.wer_ist_dran_mensch == null },
]"
>
]">
Gemerkter Zug
</div>
<template
v-for="(element, element_index) in this.spielsituationen"
:key="element.anzahl_muenzen"
>
<div
class="grid-item-spalte"
v-bind:class="[
<template v-for="(element, element_index) in this.spielsituationen" :key="element.anzahl_muenzen">
<div class="grid-item-spalte" v-bind:class="[
{
aktiv:
!this.wer_ist_dran_mensch &&
@ -113,13 +87,10 @@
!this.wer_ist_dran_mensch &&
element.anzahl_muenzen != this.aktueller_muenzen_stand,
},
]"
>
]">
{{ element.anzahl_muenzen }}
</div>
<div
class="grid-item-spalte"
v-bind:class="[
<div class="grid-item-spalte" v-bind:class="[
{
aktiv:
!this.wer_ist_dran_mensch &&
@ -130,25 +101,17 @@
!this.wer_ist_dran_mensch &&
element.anzahl_muenzen != this.aktueller_muenzen_stand,
},
]"
>
]">
<template v-for="zug_moeglichkeit in element.moegliche_zuege">
<button class="btn btn-primary"
v-on:click="nimm(zug_moeglichkeit, true)"
:disabled="
this.wer_ist_dran_mensch ||
<button class="btn btn-primary" v-on:click="nimm(zug_moeglichkeit, true)" :disabled="this.wer_ist_dran_mensch ||
element.anzahl_muenzen != this.aktueller_muenzen_stand
"
v-show="zug_moeglichkeit <= element.anzahl_muenzen"
>
" v-show="zug_moeglichkeit <= element.anzahl_muenzen">
nimm {{ zug_moeglichkeit }}
</button>
<br />
</template>
</div>
<div
class="grid-item-spalte"
v-bind:class="[
<div class="grid-item-spalte" v-bind:class="[
{
aktiv:
!this.wer_ist_dran_mensch &&
@ -159,11 +122,9 @@
!this.wer_ist_dran_mensch &&
element.anzahl_muenzen != this.aktueller_muenzen_stand,
},
]"
>
]">
<button class="btn btn-primary"
disabled v-show="element.gemerkter_zug > 0">
<button class="btn btn-primary" disabled v-show="element.gemerkter_zug > 0">
{{ this.gib_gemerkter_zug_ausgabe(element.gemerkter_zug) }}
</button>
</div>
@ -172,7 +133,9 @@
</div>
<br />
<DIV style="white-space: pre-wrap;">
{{ this.ausgabe }}
</DIV>
<br />
<br />
<br />
@ -192,11 +155,7 @@
<div class="content" id="content0" style="text-align: center">
<br />
<button
class="btn btn-primary"
style="background-color: red"
@click="initialisiere_spiel"
>
<button class="btn btn-primary" style="background-color: red" @click="initialisiere_spiel">
Alle gelernten KI-Züge löschen.
</button>
<br />
@ -209,19 +168,12 @@
<div class="column" style="text-align: center">
<h3>Münzenanzahl</h3>
<button
class="btn btn-primary"
@click="update_anzahl_muenzen(--this.zustaende)"
>
<button class="btn btn-primary" @click="update_anzahl_muenzen(--this.zustaende)">
-
</button>
&nbsp;
<b style="font-size: xx-large">{{ this.zustaende }}</b
>&nbsp;
<button
class="btn btn-primary"
@click="update_anzahl_muenzen(++this.zustaende)"
>
<b style="font-size: xx-large">{{ this.zustaende }}</b>&nbsp;
<button class="btn btn-primary" @click="update_anzahl_muenzen(++this.zustaende)">
+
</button>
@ -232,19 +184,13 @@
<div class="column" style="text-align: center">
<h3>max. Münzen pro Zug</h3>
<button
class="btn btn-primary"
@click="update_max_muenzen_pro_zug(--this.max_muenzen_pro_zug)"
>
<button class="btn btn-primary" @click="update_max_muenzen_pro_zug(--this.max_muenzen_pro_zug)">
-
</button>
&nbsp;
<b style="font-size: xx-large">{{ this.max_muenzen_pro_zug }}</b>
&nbsp;
<button
class="btn btn-primary"
@click="update_max_muenzen_pro_zug(++this.max_muenzen_pro_zug)"
>
<button class="btn btn-primary" @click="update_max_muenzen_pro_zug(++this.max_muenzen_pro_zug)">
+
</button>
<br />
@ -267,9 +213,10 @@ export default {
data() {
return {
wer_ist_dran_mensch: true,
wer_hat_zuletzt_angefangen: true,
aktueller_muenzen_stand: 4,
zustaende: 4,
max_muenzen_pro_zug: 3,
max_muenzen_pro_zug: 2,
spielsituationen: [],
letzter_gewinner_mensch: null,
ausgabe: "",
@ -314,17 +261,23 @@ export default {
},
neuer_spieldurchgang() {
this.aktueller_muenzen_stand = this.zustaende;
console.log("letzter gewinner: " + this.letzter_gewinner_mensch);
if (this.letzter_gewinner_mensch) {
this.loesche_gemerkten_zug();
} else {
this.reset_gemerkten_zug();
}
this.wer_ist_dran_mensch = true;
this.aktueller_muenzen_stand = this.zustaende;
this.wer_ist_dran_mensch = !this.wer_hat_zuletzt_angefangen;
this.wer_hat_zuletzt_angefangen = this.wer_ist_dran_mensch;
this.letzter_gewinner_mensch = null;
this.ausgabe = "Spiel läuft";
},
nimm(anzahl, ki_zug) {
@ -338,16 +291,17 @@ export default {
this.merke_zug(alter_muenzen_stand, anzahl);
wer = "Die KI";
}
this.ausgabe = wer + " hat im letzten Zug " + this.gib_muenztext(anzahl) + " genommen. ";
this.ausgabe = wer + " hat im letzten Zug " + this.gib_muenztext(anzahl) + " genommen.";
if (
this.aktueller_muenzen_stand <= 0 ||
this.wer_ist_dran_mensch &&
this.spielsituationen[
this.spielsituationen.length - this.aktueller_muenzen_stand
].moegliche_zuege.length == 0
) {
this.letzter_gewinner_mensch = this.wer_ist_dran_mensch;
this.ausgabe += "Spielende: " + wer + " hat gewonnen.";
this.ausgabe += " \n \n Spielende: " + wer + " hat gewonnen.";
this.wer_ist_dran_mensch = null;
} else {
this.wer_ist_dran_mensch = !this.wer_ist_dran_mensch;