nicht angemeldet
Hallo zusammen,
in der Webseiten - Programmierung bin ich ganz neu. Ich arbeite gerade einen Online - Kurs durch. Neben dem Kurs möchte ich ein Merkspiel programmieren.Man muss auf vorher gezeigte divs klicken. Wenn das richtig war kommt ein neues dazu. Die Anordnung am Kreis funktioniert. Ich möchte zur Zeit, dass, wenn man den Start Button klickt, die im array gespeicherten divs nacheinander anzeigt. Scheinbar läuft das aber alles parallel ab, obwohl ich eine Pause eingebaut habe. Habt ihr vielleicht eine Idee?
Oder was noch wichtiger ist, was kann ich an dem Code verbessern(ich hab da keine Erfahrung!)
Hier mein Code:
<html>
<head>
<title>Merkspiel von Lars</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="jquery-3.6.4.min.js"></script>
<link href="jquery-ui-1_13_2/jquery-ui.css" rel="stylesheet">
<script src=" jquery-ui-1_13_2/jquery-ui.js"></script>
<style type="text/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%;
}
.number{
position: absolute;
margin: auto;
left: 40%;
top: 30%;
font-size: 100%;
color: white;
}
#endButtonDiv{
position: absolute;
float: right;
left: 1000px;
}
</style>
</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 onclick="gameStart()">Spiel starten</button>
</div>
<div id="endButtonDiv">
<button id="endButton" onclick="gameEnd()">Spiel beenden</button>
</div>
</body>
<script type="text/javascript">
let numberOfDiv;
let posSmallCircle = {x_position:0, y_position:0};
let premadeObjects = [1,3,2,3,1,1,2];
let counterfeitObjects = [];
let pretendOrImitate = true;
let newObject = false;
let endGame = false;
unvisible();
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);
let element = document.getElementById('circleNumber');
let numberOfCircle = element.options[element.selectedIndex].value;
if (newObject == false){
numberOfDiv = number;
}else{
numberOfDiv = rand(1, element.options[element.selectedIndex].value);
}
let numberTop = document.getElementById("number" + numberOfDiv).offsetTop;
let numberLeft = document.getElementById("number" + numberOfDiv).offsetLeft;
let numberFontSize = document.getElementById("number" + numberOfDiv).style.fontSize;
document.getElementById("smallDiv" + numberOfDiv).style.height = (document.getElementById("smallDiv" + numberOfDiv).offsetHeight + 20) + "px";
document.getElementById("smallDiv" + numberOfDiv).style.width = (document.getElementById("smallDiv" + numberOfDiv).offsetWidth + 20) + "px";
document.getElementById("number" + numberOfDiv).style.fontSize = "175%";
setTimeout(function(){
document.getElementById("smallDiv" + numberOfDiv).style.height= (document.getElementById("smallDiv" + numberOfDiv).offsetHeight - 20) + "px";
document.getElementById("smallDiv" + numberOfDiv).style.width= (document.getElementById("smallDiv" + numberOfDiv).offsetWidth - 20) + "px";
document.getElementById("number" + numberOfDiv).style.fontSize = "100%";
},2000);
if (newObject==true){
premadeObjects.push(numberOfDiv);
}
}
function imitate(){
}
function unvisible(){
let divName="";
for (i=1; i <=9; i++){
divName = 'smallDiv' + i;
document.getElementById(divName).style.visibility = "hidden";
}
}
function arrangeCircle() {
unvisible();
let element = document.getElementById('circleNumber');
let numberOfCircle = element.options[element.selectedIndex].value;
let degreeInTheCircle = 360 / numberOfCircle;
let outOfMiddleDegree = degreeInTheCircle / 2;
for (let i=1; i<=numberOfCircle; i++){
let degree = outOfMiddleDegree + degreeInTheCircle * (i-1);
posCalculate(degree);
document.getElementById('smallDiv' + i).style.left = posSmallCircle.x_position + "px";
document.getElementById('smallDiv' + i).style.top = posSmallCircle.y_position + "px";
document.getElementById('smallDiv' + i).style.visibility = "visible";
var test = randomColour();
document.getElementById('smallDiv' + i).style.backgroundColor = "#" + test;
}
}
function posCalculate(degree) {
var smallDivRadius = 25;
var circleToArrangeRadius = 200;
var el = document.getElementById('circleToArrange');
var circleToArrangePos = el.getBoundingClientRect();
if (degree>=0 && degree<=90) {
degree = 90 - degree;
posSmallCircle.x_position = (circleToArrangePos.left + circleToArrangeRadius - smallDivRadius) + Math.round(200 * Math.cos(degreeToRadians(degree)));
posSmallCircle.y_position = (circleToArrangePos.top + circleToArrangeRadius - smallDivRadius) - Math.round(200 * Math.sin(degreeToRadians(degree)));
} else if (degree>90 && degree<=180) {
degree = degree - 90;
posSmallCircle.x_position = (circleToArrangePos.left + circleToArrangeRadius - smallDivRadius) + Math.round(200 * Math.cos(degreeToRadians(degree)));
posSmallCircle.y_position = (circleToArrangePos.top + circleToArrangeRadius - smallDivRadius) + Math.round(200 * Math.sin(degreeToRadians(degree)));
} else if (degree>180 && degree<=270) {
degree = 90 -(degree - 180);
posSmallCircle.x_position = (circleToArrangePos.left + circleToArrangeRadius - smallDivRadius) - Math.round(200 * Math.cos(degreeToRadians(degree)));
posSmallCircle.y_position = (circleToArrangePos.top + circleToArrangeRadius - smallDivRadius) + Math.round(200 * Math.sin(degreeToRadians(degree)));
} else if (degree>270 && degree<=360) {
degree = degree - 270;
posSmallCircle.x_position = (circleToArrangePos.left + circleToArrangeRadius - smallDivRadius) - Math.round(200 * Math.cos(degreeToRadians(degree)));
posSmallCircle.y_position = (circleToArrangePos.top + circleToArrangeRadius - smallDivRadius) - Math.round(200 * Math.sin(degreeToRadians(degree)));
}
return posSmallCircle;
}
function degreeToRadians(degree){
return degree * Math.PI / 180;
}
function randomColour() {
var randomColour = "";
for (var zaehler = 1; zaehler < 7; zaehler++) {
var Farbe = "0123456789ABCDEF";
var RND = Math.round(Math.random() * 15);
randomColour += Farbe.substr(RND, 1);
}
return randomColour;
}
function rand (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function gameEnd(){
endGame = true;
}
</script>
</html>
Gruß websity
JürgenB
Rolf B