JSFiddle - React, Tailwind, and code Playground
HTML
<head>
<title>Merkspiel von Lars</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<div id="titel">
<h1 id="titelText">Merk dir das!</h1>
</div>
<div id="options">
<label id="selectLabel" for="circleNumber">Anzahl der Kreise:</label>
<select id="circleNumber" onchange="arrangeCircle()">
<option value="1">Eins</option>
<option value="2">Zwei</option>
<option value="3">Drei</option>
<option value="4">Vier</option>
<option value="5">Fünf</option>
<option value="6">Sechs</option>
<option value="7">Sieben</option>
<option value="8">Acht</option>
<option value="9">Neun</option>
</select>
</div>
<div id="circleToArrange"></div>
<div id="smallDiv1" class="smallCircle">
<span id="number1" class="number">1</span>
</div>
<div id="smallDiv2" class="smallCircle">
<p id="number2" class="number">2</p>
</div>
<div id="smallDiv3" class="smallCircle">
<p id="number3" class="number">3</p>
</div>
<div id="smallDiv4" class="smallCircle">
<p id="number4" class="number">4</p>
</div>
<div id="smallDiv5" class="smallCircle">
<p id="number5" class="number">5</p>
</div>
<div id="smallDiv6" class="smallCircle">
<p id="number6" class="number">6</p>
</div>
<div id="smallDiv7" class="smallCircle">
<p id="number7" class="number">7</p>
</div>
<div id="smallDiv8" class="smallCircle">
<p id="number8" class="number">8</p>
</div>
<div id="smallDiv9" class="smallCircle">
<p id="number9" class="number">9</p>
</div>
<div id="displayDiv">
<button...
CSS
body{
margin: 0px;
padding: 0px;
}
#titel{
position:relative;
width: 100%;
height:75px;
background-color: aquamarine;
}
#titelText {
position: relative;
margin-top: 10px;
margin-left: 200px;
font-size: 300%;
}
#options{
position: absolute;
top: 100px;
width: 100%;
height: 100px;
background-color: cornsilk;
}
#selectLabel{
position: relative;
margin-left: 20px;
font-size: 25px;
}
#displayDiv{
position: relative;
background-color: azure;
top: 200px;
width: 150px;
height: 200px;
margin: 10px;
}
#circleNumber, #circleNumberLabel{
margin-left: 10px;
font-size: 100%;
}
#circleToArrange{
position: absolute;
top: 300px;
left: 400px;
width: 400px;
height: 400px;
background-color: cornsilk;
border-radius: 50%;
}
.smallCircle{
position: absolute;
left: 20px;
top: 200px;
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
}
...
JavaScript
let numberOfDiv;
let posSmallCircle = {x_position:0, y_position:0}; /* Kreiseposition */
let premadeObjects = []; /* Vorgemachte Objekte */
let counterfeitObjects = []; /* Nachgemachte Objekte */
let pretendOrImitate = true; /* ob vormachen oder nachmachen */
let newObject = false;
let endGame = false;
/* Funktionsaufruf, um die Kreise unsichtbar zu machen */
unvisible();
/*
#
# Spielt starten
##################################*/
function gameStart(){
if(pretendOrImitate==true){
if(premadeObjects.length==0){
pretend(true,0);
}else{
for (let i=0; i < premadeObjects.length; i++) {
let arrayContent = parseInt(premadeObjects[i]);
console.log("Array - Inhalt: " + arrayContent);
pretend(false,arrayContent);
}
pretend(true,0);
}
}else{
imitate();
}
}
function pretend(newObject,number){
console.log("Number am anfang: " + number);
/* 1. Zufallszahl zwischen 1 und gewählte Anzahl */
let element = document.getElementById('circleNumber');
/* Anzahl der Kreise aus der Klappbox */
let numberOfCircle = element.options[element.selectedIndex].value;
/* Zufallszahl zwischen 1 und gewählte Anzahl aus der Klappbox */
if (newObject == false){
numberOfDiv = number;
}else{
...