javascript - 图像显示游戏 JavaScript

Question

嗨，我是 JavaScript 新手，必须制作一个游戏。

我的游戏涉及在 60 秒的时间内寻找隐藏在物体后面的动物。我所有的对象都是图像，并且我用 div 创建了它们。

我需要将动物的图像隐藏在对象后面，以便当玩家单击对象时动物就会出现。我打算使用警报，但不确定这是否是最好的方法。

代码示例: 网页:

<div id ="clown"> 
  <img src="clown.png" width="300" height="250">
</div>

Javascript:clown = document.getElementById('clown')

Answer 1

据我了解，您希望显示两种类型的图像:对象和动物，其中动物默认隐藏，单击对象时显示。

这可以使用 css 和 javascript 来完成，如下例所示。

<style>
#object .animal {
    position: absolute;
    left:0;
    top:0;
    visibility:hidden;
}
</style>


<div id="object">
<img class="animal" src="animalimgsrc">
<img src="objimgsrc">
</div>


<script>
document.getElementById("object").onclick = function(){
    document.getElementById("object").getElementsByClassName("animal")[0].style.visibility = "visible";
};
</script>

我想，如果你想要多个对象，你需要创建“object”类而不是 id。