每次div為特定顏色並單擊時添加一個點

Question

因此，我嘗試使用具有更改顏色的div的游戲來創建游戲，並在每次用戶單擊閃爍有顏色的div時為用戶提供一個分數。 如果div閃爍該顏色，則用戶只會得到一個點，因此必須滿足該條件，我肯定知道。 這些點將顯示在彩色div下方的另一個div中。 我已經使div間隔更改顏色，但是，盡管創建了一個if語句來檢查背景色的條件以及是否單擊了div，但我無法使點系統正常工作。 這是我的代碼：

<!DOCTYPE html>
<HTML>

<HEAD>
<STYLE>
.container {
 border: 1px solid black;
 min-width: 100%;
 min-height: 50px;
margin: auto;
 }
   .bigbox {
   min-width: 100%;
   min-height: 100px;
   overflow: scroll;
   border: 1px solid black;
   }
   #bluebox {
   width: 100px;
    height: 100px;
    border: 4px solid black;
    background-color: grey;
    display: inline-block;
   }
 #redbox {
 width: 100px;
 height: 100px;
 border: 4px solid black;
 background-color: grey;
 display: inline-block;
 }
#yellowbox {
width: 100px;
height: 100px;
border: 4px solid black;
background-color: grey;
display: inline-block;
}
  #greenbox {
   width: 100px;
   height: 100px;
   border: 4px solid black;
   background-color: grey;
  display: inline-block;
  }
 </STYLE>
<SCRIPT>
var score = 0;


  function start_game() {
   setTimeout(function() { 
 document.getElementById("redbox").style.backgroundColor = "red";
  }, 1000); 

   setTimeout(function() 
   {document.getElementById("redbox").style.backgroundColor = "grey";
    }, 2000);

   setTimeout(function() { 
   document.getElementById("greenbox").style.backgroundColor = "green";
    }, 2000);
   setTimeout(function() { 
  document.getElementById("greenbox").style.backgroundColor = "grey";
   }, 3000);

     setTimeout(function() { 
   document.getElementById("bluebox").style.backgroundColor = "blue";
    }, 3000);
    setTimeout(function() { 
   document.getElementById("bluebox").style.backgroundColor = "grey";
   }, 4000);    

   setTimeout(function() { 
    document.getElementById("yellowbox").style.backgroundColor = "yellow";
    }, 4000);
  setTimeout(function() { 
   document.getElementById("yellowbox").style.backgroundColor = "grey";
   }, 5000);

   setInterval(function(){ start_game() }, 5500);

   if(document.getElementById("redbox").style.backgroundColor = "red" && 
   document.getElementById("redbox").clicked == true) {
   document.getElementById("score").innerHTML =  score + 1;
    alert("You got a point!");
    }

  }


 </SCRIPT>
 <TITLE> Game </TITLE>
 </HEAD>

 <BODY>
 <DIV class="container">
 <CENTER>
 <DIV id="redbox"> </DIV>
<DIV id="greenbox"> </DIV>
<DIV id="bluebox"> </DIV>
<DIV id="yellowbox"> </DIV>
</CENTER>
</DIV>

 <BR><BR>

  <DIV class="container" style= "background-color: grey;"> <CENTER> <BR> 
  <button onclick="start_game()"> Start game </button> </CENTER> </DIV>
  <BR><BR>

  <DIV class="bigbox">
  Press "Start Game" to begin. <br>
  Score <p id="score"> 0 </p>

 </DIV>

</HTML>

Answer 1

這是因為div中沒有稱為clicked的屬性。 正確的方法是向每個div添加一個事件偵聽器。 我會給你一個div的例子

document.getElementById("redbox").addEventListener("click", function(e) {
  //e.target is the same div we added the event listener to
  if(e.target.style.backgroundColor == "red") {
    document.getElementById("score").innerHTML =  score + 1;
    alert("You got a point!");
  }
});

每當用戶點擊該特定div時，上面的內容就會運行。 我們作為第二個參數傳遞的函數是該div上click事件的事件處理程序。

您可能已經猜到了，您將必須向每個div添加一個事件偵聽器，以檢測是否單擊了它們。

Answer 2

這可行！

因此，我所做的只是稍微更改了代碼，因此，每次單擊某個框時，它都會進行一次檢查，以查看被單擊的框是否實際上是“活動的”，如果是，則可以為您提供一個要點。

但是，這是非常多的錯誤，如果您是我，那么我肯定會研究另一個庫或至少一個JQuery。 jQuery將使您的生活更加輕松:)

 var score = 0; function start_game() { setTimeout(function() { document.getElementById("redbox").style.backgroundColor = "red"; }, 1000); setTimeout(function() { document.getElementById("redbox").style.backgroundColor = "grey"; }, 2000); setTimeout(function() { document.getElementById("greenbox").style.backgroundColor = "green"; }, 2000); setTimeout(function() { document.getElementById("greenbox").style.backgroundColor = "grey"; }, 3000); setTimeout(function() { document.getElementById("bluebox").style.backgroundColor = "blue"; }, 3000); setTimeout(function() { document.getElementById("bluebox").style.backgroundColor = "grey"; }, 4000); setTimeout(function() { document.getElementById("yellowbox").style.backgroundColor = "yellow"; }, 4000); setTimeout(function() { document.getElementById("yellowbox").style.backgroundColor = "grey"; }, 5000); setInterval(function() { start_game() }, 5500); } document.getElementById("redbox").addEventListener("click", function(e) { if(e.target.style.backgroundColor == "red") { document.getElementById("score").innerHTML = score + 1; alert("You got a point!"); } }); document.getElementById("greenbox").addEventListener("click", function(e) { if(e.target.style.backgroundColor == "green") { document.getElementById("score").innerHTML = score + 1; alert("You got a point!"); } }); document.getElementById("bluebox").addEventListener("click", function(e) { if(e.target.style.backgroundColor == "blue") { document.getElementById("score").innerHTML = score + 1; alert("You got a point!"); } }); document.getElementById("yellowbox").addEventListener("click", function(e) { if(e.target.style.backgroundColor == "yellow") { document.getElementById("score").innerHTML = score + 1; alert("You got a point!"); } });

 .container { border: 1px solid black; min-width: 100%; min-height: 50px; margin: auto; } .bigbox { min-width: 100%; min-height: 100px; overflow: scroll; border: 1px solid black; } #bluebox { width: 100px; height: 100px; border: 4px solid black; background-color: grey; display: inline-block; } #redbox { width: 100px; height: 100px; border: 4px solid black; background-color: grey; display: inline-block; } #yellowbox { width: 100px; height: 100px; border: 4px solid black; background-color: grey; display: inline-block; } #greenbox { width: 100px; height: 100px; border: 4px solid black; background-color: grey; display: inline-block; }

 <DIV class="container"> <CENTER> <DIV onclick="" id="redbox"> </DIV> <DIV onclick="" id="greenbox"> </DIV> <DIV onclick="" id="bluebox"> </DIV> <DIV onclick="" id="yellowbox"> </DIV> </CENTER> </DIV> <BR> <BR> <DIV class="container" style="background-color: grey;"> <CENTER> <BR> <button onclick="start_game()"> Start game </button> </CENTER> </DIV> <BR> <BR> <DIV class="bigbox"> Press "Start Game" to begin. <br> Score <p id="score"> 0 </p> </DIV>

每次div為特定顏色並單擊時添加一個點

問題描述

2 個解決方案

解決方案1
0 已采納 2017-11-17 02:58:44

解決方案2
0 2017-11-17 03:04:55

每次div為特定顏色並單擊時添加一個點

問題描述

2 個解決方案

解決方案1 0 已采納 2017-11-17 02:58:44

解決方案2 0 2017-11-17 03:04:55

解決方案1
0 已采納 2017-11-17 02:58:44

解決方案2
0 2017-11-17 03:04:55