dart
Funktioniert kein bisschen
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dart Spielen!</title>
</head>
<body>
<header>Dart</header>
<nav>
<ul id="form">
<li><input id="name1" type="text" name="name1" placeholder="Spieler 1"></li>
<li><input id="name2" type="text" name="name2" placeholder="Spieler 2"></li>
<li><input id="name3" type="text" name="name3" placeholder="Spieler 3"></li>
<li><input id="name4" type="text" name="name4" placeholder="Spieler 4"></li>
<li><input id="name5" type="text" name="name5" placeholder="Spieler 5"></li>
<li><button onclick="names();">Okay!</button></li>
</ul>
<div id="anzeige"></div>
Modus:<p><button id="501" onclick="mode501()">501</button> <button id="301" onclick="mode301()">301</button></p>
<div id="modusanzeige"></div>
</nav>
<section>
<canvas id="dartscheibe" width="1800" height="700"></canvas>
</section>
</body>
</html>
CSS
body { margin: 30px; background-color: #E5E5E5; }
button { border: 1px #000000 solid; border-radius: 5px; padding: 5px; background-color: #EEEEEE; cursor: pointer; }
header { width: 99%; padding: 10px; background-color: lightblue; border-radius: 5px; }
nav ul li { display: inline-block; }
nav input { border: none; border-radius: 5px; margin: 5px; padding: 5px; background-color: #EEEEEE; }
section { background-color: #FFFFFF; }
JavaScript
$('#301').hide();
$('#501').hide();
/*function for names*/
function names() {
name1 = document.querySelector("#name1").value;
name2 = document.querySelector("#name2").value;
name3 = document.querySelector("#name3").value;
name4 = document.querySelector("#name4").value;
name5 = document.querySelector("#name5").value;
if(name1 =="" && name2 =="" && name3 =="" && name4 =="" && name5 =="") {
document.getElementById('anzeige').innerHTML = "Es müssen mindestens 2 Felder ausgefüllt werden.";
}else if(name1 !="" && name2 =="") {
document.getElementById('anzeige').innerHTML = "Es müssen mindestens 2 Felder ausgefüllt werden.";
}else if(name1 !="" && name2 !="" && name3 =="" && name4 =="" && name5 =="") {
document.getElementById('anzeige').innerHTML = name1 + ", " + name2;
delete name3, name4, name5;
$('#301').show();
$('#501').show();
$('#form').hide();
}else if(name1 !="" && name2 !="" && name3 !="" && name4 =="" && name5 =="") {
document.getElementById('anzeige').innerHTML = name1 + ", " + name2 + ", " + name3;
delete name4, name5;
$('#301').show();
$('#501').show();
$('#form').hide();
}else if(name1 !="" && name2 !="" && name3 !="" && name4 !="" && name5 =="") {
document.getElementById('anzeige').innerHTML = name1 + ", " + name2 + ", " + name3 + ", " + name4;
delete name5;
$('#301').show();
$('#501').show();
$('#form').hide();
}else if(name1 !="" && name2 !="" && name3 !="" && name4 !="" && name5 !="") {
document.getElementById('anzeige').innerHTML = name1 + ", " + name2 + ", " + name3 + ", " + name4 + ", " + name5;
$('#301').show();
$('#501').show();
$('#form').hide();
}
}
/*Das Spiel*/
function playgame(modeus) {
var c = document.getElementById('dartscheibe');
var ctx = c.getContext("2d")
ctx.font = "30px Arial";
if(name1 && name2 && !name3 && !name4 && !name5) {
...