Question

我正在尝试使用HTML，CSS和Javascript制作鼠标迷宫迷宫。如果您用鼠标光标触摸任何一面墙，就会迷路。但是，当您触摸迷宫中的一堵墙（游戏结束）时，我想将迷宫的背景颜色设为红色。

    var boundaries = document.querySelectorAll(".boundary");
var start = document.querySelector("#start");
var end = document.querySelector("#end");
var status = document.querySelector("#status");
var win = true;

  start.addEventListener("mouseover", function() {
    document.getElementById("status").innerHTML = "Move the mouse cursor over to "E" to win";
    for (var i = 0; i < boundaries.length; i++) {
      boundaries[i].addEventListener("mouseover", function() {
        win = false;
        this.style.background = "red";
        alert("You lost, try again!");
        this.style.background = "#eeeeee";
        document.getElementById("status").innerHTML = "You lost!";
      });
    }

  });

end.addEventListener("mouseover", function() {
  if (win == true) {
    document.getElementById("status").innerHTML = "You won!";
    alert("Gongratulations! You won!");
  }
  win = true;
});

在html中，我正在使用类制作墙壁

  <div id="maze">
        <div id="start">S</div>
        <div class="boundary" id="boundary1"></div>
        <div class="boundary"></div>
        <div class="boundary"></div>
        <div class="boundary"></div>
        <div class="boundary"></div>

Answer 1

如果迷宫的墙是由类boundary的div给定的，我想您也只需添加一个事件侦听器即可。像这样的小提琴：

var boundaries = document.querySelectorAll(".boundary");
var start = document.querySelector("#start");
var end = document.querySelector("#end");
var status = document.querySelector("#status");
var win = true;

  start.addEventListener("mouseover", function() {
    document.getElementById("status").innerHTML = "Move the mouse cursor over to 'E' to win";
    for (var i = 0; i < boundaries.length; i++) {
      boundaries[i].addEventListener("mouseover", function() {
        win = false;
        this.style.background = "red";
        alert("You lost, try again!");
        this.style.background = "#eeeeee";
        document.getElementById("status").innerHTML = "You lost!";
      });
    }

  });


const walls = document.querySelectorAll(".boundary");

walls.forEach(wallDOM => {
   wallDOM.addEventListener("mouseover", function() {
        document.getElementById("maze").style.background = "red";
    });
});

document.getElementById("resetButton").addEventListener("click", function() {
        document.getElementById("maze").style.background = "black";
    });

#maze {
  width: 300px;
  height: 300px;
  position: relative;
  background: black;
}

#boundary1 {
  width: 50px;
  height: 5px;
  background: green;
  position: absolute;
  top: 0;
}

#boundary2 {
  width: 5px;
  height: 250px;
  background: green;
  position: absolute;
  top: 50px;
}

#boundary3 {
  width: 125px;
  height: 5px;
  background: green;
  position: absolute;
  top: 25px;
  left: 45px;
}

#boundary4 {
  width: 70px;
  height: 5px;
  background: green;
  position: absolute;
  top: 220px;
  right: 0;
}

#boundary5 {
  width: 5px;
  height: 80px;
  background: green;
  position: absolute;
  top: 75px;
  left: 120px;
}

 <div id="maze">
   <div id="start">S</div>
   <div class="boundary" id="boundary1"></div>
   <div class="boundary" id="boundary2"></div>
   <div class="boundary" id="boundary3"></div>
   <div class="boundary" id="boundary4"></div>
   <div class="boundary" id="boundary5"></div>
</div>

<button id="resetButton">Reset BG</button>

使用JS触摸div时如何更改背景颜色

1 个答案: