Skip to content

Instantly share code, notes, and snippets.

@silentdan
Created Nov 23, 2014
Embed
What would you like to do?
test aufgabe
<html>
<head>
<meta charset="utf-8">
<title>versuch 1</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<div class="kreis" id="gruenerKreis">
<div id="wPunkt"></div>
</div>
<div class="kreis" id="roterKreis"></div>
<div class="kreis" id="gelberKreis"></div>
<div class="kreis" id="grauerKreis"></div>
<div class="kreis" id="orangerKreis"></div>
<div class="kreis" id="blauerKreis"></div>
<a href="#" onclick="starten();">
<div id="startButton">START</div>
</a>
<form id="Formular" action="">
<label>Aktuelle Farbe: </label>
<input type="text" name="content" id="content" style="background-color: #45a588" value="grün" size="10"/>
</form>
</div>
</body>
</html>
// Alle Informationen zu den Kreisen
var kreisInfo = [
{"id" : "gruenerKreis", "color" : "gruen", "hexcode" : "#45a588"},
{"id" : "roterKreis", "color" : "rot", "hexcode" : "#bd3249"},
{"id" : "gelberKreis", "color" : "gelb", "hexcode" : "#ecdb46"},
{"id" : "grauerKreis", "color" : "grau", "hexcode" : "#9f9e9d"},
{"id" : "orangerKreis", "color" : "orange", "hexcode" : "#f4ad71"},
{"id" : "blauerKreis", "color" : "blau", "hexcode" : "#4989bc"},
];
// gesamte Spielzeit zwischen 1 und 10 Sekunden
// minimale Spielzeit
var minSpielzeit = 1000;
// maximale Spielzeit
var maxSpielzeit = 10000;
// Wechselzeit zwischen den Kreisen, zwischen 0,2 und 0,8 Sekunden
// minimale Wechselzeit
var minSprung = 200;
// maximale Wechselzeit
var maxSprung = 800;
// zufällige Zeit ermitteln
function getRandom(minimum, maximum){
if(minimum > maximum){
return -1;
}
else{
var diff = maximum - minimum;
var multiplier = Math.random() * diff;
return Math.round(minimum + multiplier);
}
}
// ermitteln, wo sich der Punkt befindet
function getAktuellerPunkt(){
var punkt = document.getElementById("wPunkt");
//vielleicht ab hier weglassen?
if(punkt == null){
// get first index element
punkt = document.getElementById(kreisInfo[0].id);
newPunkt = document.createElement("div");
newPunkt.setAttribute("id","wPunkt");
punkt.appendChild(newPunkt);
}
return punkt;
}
// ID des Kreises mit dem weißen Punkt
function getAktuelleId(){
var aktuellerPunkt = getAktuellerPunkt();
var aktuelleId = aktuellerPunkt.parentNode.id;
return aktuelleId;
}
// Index der aktuellen ID
function getIndex(aktuelleId){
for(var i = 0; i < kreisInfo.length; i++){
// weißen Punkt wandern lassen
if(kreisInfo[i].id == aktuelleId)
{
return i;
}
}
return null;
}
// weißen Punkt entfernen
function entfernenPunkt(){
var aktuellesElement = document.getElementById(getAktuelleId());
var aktuellerPunkt = getAktuellerPunkt();
aktuellesElement.removeChild(aktuellerPunkt);
}
function wandernPunkt(sprung, spielzeit){
var aktuelleId = getAktuelleId();
var i = getIndex(aktuelleId);
var aktuellesElement;
var aktuellerPunkt;
var punkt;
if(!isNaN(i))
{
setTimeout(function(){
// weißen Punkt vom aktuellen Kreis entfernen
entfernenPunkt();
i++;
// Wenn noch Restspielzeit und kreisInfo durchlaufen, dann von vorne beginnen
if(i == kreisInfo.length)
{
i = 0;
}
// Gesamte Spielzeit um die Sprungzeit kürzen
spielzeit = spielzeit - sprung;
// Punkt im nächsten Kreis
aktuellesElement = document.getElementById(kreisInfo[i].id);
punkt = document.createElement("div");
punkt.setAttribute("id", "wPunkt");
aktuellesElement.appendChild(punkt);
aktuelleId = getAktuelleId();
// testen, ob noch Restspielzeit vorhanden
if (spielzeit > sprung) {
// falls noch genug Spielzeit, dann weiter wandern
wandernPunkt(sprung, spielzeit);
}
else
{
// wenn Spielzeit vorbei, dann Farbe und Bezeichnung des Formulars anpassen
anpassenAktuelleFarbe(i);
}
} , sprung);
}
}
// Farbe und Bezeichnung des Formulars
function anpassenAktuelleFarbe(i){
var element = document.getElementById("content");
// Formular mit Farbe und Bezeichnung aus Kreisinfo
element.style.backgroundColor = kreisInfo[i].hexcode;
element.value = kreisInfo[i].color;
}
function starten(){
// zufällige Gesamtspielzeit
var spielzeit = getRandom(minSpielzeit, maxSpielzeit);
// zufällige Wechselzeit
var sprung = getRandom(minSprung, maxSprung);
// weglassen??
// only continue if step and timer are correct
if(sprung != -1 && spielzeit != -1){
// changeValue("step", step);
// check timer
// changeValue("timer", timer);
// cycle through dots
wandernPunkt(sprung, spielzeit);
}
}
body {
font-family: Verdana, Helvetica, sans-serif;
color: #000;
font-size: 12px;
}
#wrapper {
width: 1000px;
height:700px;
margin: 0 auto 200px;
position: relative;
}
.kreis {
width: 200px;
height: 200px;
position: absolute;
border: 1px solid black;
text-align: center;
border-radius:100px;
}
#gruenerKreis {
background-color: #45a588;
top: 100px;
left: 250px;
}
#roterKreis {
background-color: #bd3249;
top: 100px;
left: 480px;
}
#blauerKreis {
background-color: #4989bc;
top: 300px;
left: 125px;
}
#gelberKreis {
background-color: #ecdb46;
top: 300px;
left: 600px;
}
#orangerKreis {
background-color: #f4ad71;
top: 500px;
left: 250px;
}
#grauerKreis {
background-color: #9f9e9d;
top: 500px;
left: 480px;
margin-bottom:200px;
}
#startButton {
position: absolute;
top: 375px;
left: 400px;
width: 100px;
border: 2px solid black;
text-align: center;
padding: 15px;
}
#wPunkt {
background-color: white;
margin: 85px;
width: 30px;
height: 30px;
border: 1px solid black;
border-radius: 100px;
}
form {
position: absolute;
width: 300px;
height: 200px;
top: 390px;
left: 850px;
}
form label {
float: left;
width: 130px;
padding-top: 10px;
}
form input {
padding: 10px 15px;
width: 80px;
border: solid 3px #000;
color: white;
}
/*#link {
position: absolute;
width: 200px;
height: 65px;
top: 350px;
left: 360px;
border: 5px solid black;
text-align: center;
padding-top: 35px;
}
a #link {
text-decoration: none;
font-size: 24px;
font-wight: bold;
text-transform: uppercase;
color: #000;
}*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment