1
Ich versuche ein RGB-Farbratenspiel zu erstellen. Die Voraussetzung ist, dass jedes Mal, wenn jemand auf ein Div klickt, die Funktion ihren Farbwert abrufen und mit dem zufälligen Farbwert (vorgewählt) einer bestimmten Anzahl von Farbwerten abgleichen soll.this.style.background gibt einen falschen Wert zurück
Jetzt hat das Spiel zwei Schwierigkeitsstufen. Einfach und schwer. Der Code für die zwei Ebenen ist fast gleich, die Anzahl der Farbdivs in easy ist 3, während im Fall von hard die Anzahl der Farbdivs 6 ist.
Während jedoch im einfachen Modus, ruft die Funktion ab ein Farbwert, der keiner der drei Divs gehört. Tatsächlich gibt es den Hintergrundfarbwert zurück.
Hier ist der Code ist
var colors = randomColors(6);
var easyColor = [];
var squares = document.querySelectorAll(".square");
function color() {
var a = Math.floor(Math.random()*250);
var b = Math.floor(Math.random()*250);
var c = Math.floor(Math.random()*250);
return "rgb("+ [(a),(b),(c)].join(', ') + ")";
}
function randomColors(num) {
var arr = [];
for(var i =0; i < num; i++) {
arr.push(color());
}
return arr;
}
// Tried to generate different set of colors for easy mode. Still working on it.
for(var x = 0; x < 3; x++) {
easyColor[x] = color();
}
var easyRandomColor = easyColor[Math.floor(Math.random()*easyColor.length)];
// selecting hard difficulty works same as playing again, hence the reload()
document.getElementById("hard").addEventListener("click", function() {
window.location.reload();
});
document.getElementById("reset").addEventListener("click", function() {
window.location.reload();
});
var squareColor;
// setting up the easy level of the game
document.getElementById("easy").addEventListener("click", function() {
document.getElementById("header").style.background = "#232323";
for(var y = 0; y < 3; y++) {
squares[y].style.background = easyColor[y];
}
for(var z = 3; z < 6; z++) {
squares[z].style.background = "#232323";
}
easyRandomColor = easyColor[Math.floor(Math.random()*easyColor.length)];
document.getElementById("guess").textContent = easyRandomColor;
// setting up the background colors of easy level squares
for(var j = 0; j < easyColor.length; j++)
squares[j].addEventListener("click", function() {
squareColor = this.style.background;
console.log(squareColor, easyRandomColor);
if(squareColor === easyRandomColor) {
document.getElementById("header").style.background = name;
document.getElementById("display").textContent = "Correct!";
document.getElementById("reset").textContent = "Play again?";
for(var k = 0; k < easyColor.length; k++) {
squares[k].style.background = name;
}
} else{
this.style.background = "#232323";
document.getElementById("display").textContent = "Try again.";
}
});
document.getElementById("easy").classList.add("selected");
document.getElementById("hard").classList.remove("selected");
});
var randomColor = colors[Math.floor(Math.random()*colors.length)];
//changing the RGB in h1 to rgb of one the squares
document.getElementById("guess").textContent = randomColor;
//assigning colors to the squares and adding the click event
for(var j = 0; j < squares.length; j++) {
\t
squares[j].style.background = colors[j];
squares[j].addEventListener("click", function() {
var name = this.style.background;
// console.log(name, randomColor);
if(name === randomColor) {
\t
document.getElementById("header").style.background = name;
document.getElementById("display").textContent = "Correct!";
document.getElementById("reset").textContent = "Play again?";
for(var k = 0; k < squares.length; k++) {
squares[k].style.background = name;
}
} else{
\t this.style.background = "#232323";
document.getElementById("display").textContent = "Try again.";
}
\t
});
}body {
\t background-color: #232323;
\t margin: 0;
}
html {
margin: 0;
padding: 0;
}
.square {
\t width: 30%;
\t /*background: purple;*/
\t padding-bottom: 30%;
\t float: left;
\t margin: 1.66%;
\t transition: 0.2s ease-in;
\t border-radius: 6%;
}
#container {
\t margin: 0 auto;
\t max-width: 600px;
}
h1, h3 {
color: white;
padding-top: 1%;
padding-bottom: 0.5%;
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
#header {
transition: 0.2s ease-in;
}
#nav {
\t margin-top: 0;
\t padding-top: 0;
\t background: white;
\t max-width: 100%;
\t clear: left;
}
#nav p {
\t margin: 0 auto;
\t position: relative;
\t max-width: 580px;
}
#reset {
\t position: relative;
}
#hard {
\t position: absolute;
\t right: 0;
}
#easy {
\t position: absolute;
\t right: 50px;
}
#display {
\t position: relative;
\t left: 27%;
}<!DOCTYPE html>
<html>
<head>
\t <title>RGBA Guess</title>
\t <link rel="stylesheet" type="text/css" href="colorgame.css">
</head>
<body>
<div id="header">
<h3>
The Great
</h3>
<h1>
<span id="guess">number</span>
</h1>
<h3>
Guessing Game
</h3>
</div>
<div id="nav">
<p>
<button id="reset">New Colors</button>
<span id="display"></span>
<button id="easy">Easy</button>
<button id="hard" class="selected">Hard</button>
</p>
</div>
<div id="container">
<div class="square" id="sqaure1"></div>
<div class="square" id="sqaure2"></div>
<div class="square" id="sqaure3"></div>
\t <div class="square" id="sqaure4"></div>
\t <div class="square" id="sqaure5"></div>
\t <div class="square" id="sqaure6"></div>
</div>
<script type="text/javascript" src="colorgame.js"></script>
</body>
</html>ich weiß, gibt es einen besseren Weg, dies zu tun. Ich kann stattdessen die RandomColors (3) im einfachen Modus aufrufen, aber ich möchte wissen, was ich falsch mache, damit ich es in Zukunft vermeiden kann.
als Sie
Was für ein lustiges kleines Spiel =) schön gemacht. –
Verwenden Sie nicht 'element.style.background', dies ist eine Abkürzung für viele verschiedene Eigenschaften (Positionswiederholung usw.), und Sie können nicht wissen, was die Ausgabe sein wird (zB FF gibt alle anderen Eigenschaften aus, während Chrom nicht). Besser ist es stattdessen "element.style.backgroundColor" zu verwenden, aber selbst dann können Sie nicht sicher sein, dass es Ihren rgb-Wert nicht in eine hexadezimale Schreibweise konvertiert. Der wahrscheinlich beste Ansatz wäre also, Referenzen sowohl Ihrer Farben als auch Ihrer Elemente in Arrays zu speichern und nur nach deren jeweiligem Index zu suchen. – Kaiido