Question

我正在做一个COLOR GAME网站。

它显示了6个不同颜色的正方形和文本中rgb的颜色您应该单击与rgb文本匹配的方块。

问题是我遇到了var pickedColor的问题在我点击错误颜色的情况下，代码进入if的ELSE parte，但是当我点击正确的颜色时它会转到else parte无论如何Update1：我改变了数组以使用颜色名称而不是rgb值和它都工作，但我需要使用rgb代码，

＆＃13;

/* declaracion de variables*/
var squares =[]
var colors=[]
var pickedColor
var squares=document.querySelectorAll(".square")
var colorDisplay = document.getElementById("#colorDisplay")
var messageDisplay = document.querySelector("#message")
var h1= document.querySelector("h1")
var colors = ["green","pink","yellow","blue","red","purple"]    
var pickedColor=colors[1]




/*asigno un color a cada div*/
for (i=0; i<squares.length; i++){
  squares[i].style.background=colors[i]
}

/* agrego un evenot click a cada div y comparo si el color del div es el 
mismo
q el de la variable pickedColor*/
for (i=0; i<squares.length; i++){
  squares[i].addEventListener("click", function(){
    var clickedColor=this.style.background
    if (clickedColor===pickedColor){
      changeColors(clickedColor)
      h1.style.background=clickedColor
      messageDisplay.textContent="Correcto"
    }else{
      this.style.background="black"
      messageDisplay.textContent="Intenta de nuevo"
    }
  })
}

function changeColors(color){
    for(i=0;i<squares.length;i++){
      squares[i].style.background=color
    }
}

function pickColor(){
  var random=Math.floor(Math.random()*colors.lenght)
  return colors[random]
}

function changeColors(color){
for(i=0;i<squares.length;i++){
  squares[i].style.background=color
   }
 }

＆＃13;

body {
  background: black;
}

.square {
  float : left;
  height: 30%;
  width:30%;
  background-color: red;
  margin : 1%;
}

.container {
  max-width: 500%;
}

#titulo {

  text-align: center;
  color: white;
  background: steelblue;
  margin: 0;
  font-weight: normal;
  text-transform: uppercase;

}

#message {
  text-align:center;
  color: blue;
  font-weight: normal;

}

.menu {
  background-color: white;
    height: 30px;
    text-align: center;
}

＆＃13;

<iDOCTYPE>
<html>
<head>
  <title>Proyecto Color Game</title>
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
  <link rel="stylesheet" href="stylesheet.css">

</head>
<body>
<h1 id="titulo">The Great</br>
  <span id="colorDisplay"></span></br>
  Guessing Game</h1>

<div class="menu"><span id="message">Mensaje</span></div>

  <div class="container" align="center">

      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
</div>


<script src="Javascript.js" ></script>
</body>
</html>

＆＃13;

Answer 1

我认为如果你使用jQuery会更好。如果您这样做，那么您可以使用以下代码：

jQuery的：

var colors = ["#232323", "#343434", "#555555", "#989889", "#987898", "#458676"];

var rand = colors[Math.floor(Math.random() * colors.length)];
$('#message').text(rand);
$('.square').click(function() {
  hexcolor = $(this).css('background-color');
  hexc(hexcolor);
  if (color == $('#message').text()) {
    $(this).css('outline', '5px dotted red');
    alert('Correct!');
    window.location.href=window.location.href;
  } else {
    $(this).text('Incorrect; Try again.');
    $(this).css('background-color', 'black');
  }
});
function hexc(colorval) {
  var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  delete(parts[0]);
  for (var i = 1; i <= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
  }
  color = '#' + parts.join('');
  return color;
}

你需要改变这个：

  <div class="square" style="background-color: #232323;"></div>
  <div class="square" style="background-color: #343434;"></div>
  <div class="square" style="background-color: #555555;"></div>
  <div class="square" style="background-color: #989889;"></div>
  <div class="square" style="background-color: #987898;"></div>
  <div class="square" style="background-color: #458676;"></div>

并在body标签的底部添加：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

并将其添加到您的CSS：

.square {
  float: left;
  height: 30vh;
  width: 30vw;
  margin: 1%;
  color: gold;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none; 
}

var colors = ["#232323", "#343434", "#555555", "#989889", "#987898", "#458676"];

var rand = colors[Math.floor(Math.random() * colors.length)];
$('#message').text(rand);
$('.square').click(function() {
  hexcolor = $(this).css('background-color');
  hexc(hexcolor);
  if (color == $('#message').text()) {
    $(this).css('outline', '5px dotted red');
    alert('Correct!');
    window.location.href=window.location.href;
  } else {
    $(this).text('Incorrect; Try again.');
    $(this).css('background-color', 'black');
  }
});
function hexc(colorval) {
  var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  delete(parts[0]);
  for (var i = 1; i <= 3; ++i) {
    parts[i] = parseInt(parts[i]).toString(16);
    if (parts[i].length == 1) parts[i] = '0' + parts[i];
  }
  color = '#' + parts.join('');
  return color;
}

body {
  background: black;
}

.square {
  float: left;
  height: 30vh;
  width: 30vw;
  margin: 1%;
  color: gold;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none; 
}

.container {
  max-width: 500%;
}

#title {
  text-align: center;
  color: white;
  background: steelblue;
  margin: 0;
  font-weight: normal;
  text-transform: uppercase;
}

#message {
  text-align: center;
  color: blue;
  font-weight: normal;
}

.menu {
  background-color: white;
  height: 30px;
  text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Draft Color Game</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <h1 id="title">The Great</br>
  <span id="colorDisplay"></span></br>
  Guessing Game</h1>
    <div class="menu">
      <span id="message"></span>
    </div>
    <div class="container" align="center">
      <div class="square" style="background-color: #232323;"></div>
      <div class="square" style="background-color: #343434;"></div>
      <div class="square" style="background-color: #555555;"></div>
      <div class="square" style="background-color: #989889;"></div>
      <div class="square" style="background-color: #987898;"></div>
      <div class="square" style="background-color: #458676;"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </body>
</html>

Javascript变量RGB值

1 个答案: