在单击提示按钮时触发图像效果

Trigger effect on images Onclick of hint button

本文关键字：图像 单击 提示 按钮      更新时间：2023-09-26

我有一个隐藏对象游戏的代码，你们对每次单击提示按钮时如何随机对图像施加效果有任何想法吗？请帮帮我。我对javascript和游戏开发仍然很陌生。

<a href="#" class="hint"><img onclick="remove_score_black();"src="../images/button/hint.png" width="152" height="108"></a>

<div class="item-wrapper"> 
<div class="Image">
<p onClick="changeFontColor('#FF0000', 'id1');"/><text id="id1">Atchara</text1>
  <a href="#loginScreen1" />
  <img  class="btn1 itm1" onclick="DoAllThese();" value="Add" src="../images/Luzon/intramuros/atchara.png"/></p>
</div>
  <p><div id="loginScreen1"><a href="#" ><button id="pause" onclick="PauseFunction();;add_score_black();add_score_black();" >OK</button></a>  </div><div id="cover" >
  </p></div>
<div class="Image">
<p onClick="changeFontColor('#FF0000', 'id2');"/><text id="id2">Hot air balloon</text2>
<a href="#loginScreen2" />
<img  class="btn2 itm2" onclick="DoAllThese();" value="Add" src="../images/Luzon/intramuros/balloon.png"/></div>
  <p><div id="loginScreen2"><a href="#" ><button id="pause" onclick="PauseFunction();add_score_black();" >OK</button></a>  </div><div id="cover" >
  </p></div>
<div class="Image">
<p onClick="changeFontColor('#FF0000', 'id3');"/><text id="id3">Balut-pateros</text3>
<a href="#loginScreen3" />
<img  class="btn3 itm3" onclick="DoAllThese();" value="Add" src="../images/Luzon/intramuros/balut-pateros.png"/></div>
<p><div id="loginScreen3"><a href="#" ><button id="pause" onclick="PauseFunction();add_score_black();" >OK</button></a>  </div><div id="cover" >
  </p></div>

  <div class="Image">
  <p onClick="changeFontColor('#FF0000', 'id4');"/><text id="id4">Coal Briquitte</text4>
  <a href="#loginScreen4" />
  <img  class="btn4 itm4" onclick="DoAllThese();" value="Add" src="../images/Luzon/intramuros/briqiutte.png"/></div>
  <p><div id="loginScreen4"><a href="#" ><button id="pause" onclick="PauseFunction();add_score_black();" >OK</button></a>  </div><div id="cover" >
  </p></div>
<div class="Image">
  <p onClick="changeFontColor('#FF0000', 'id5');"/><text id="id5">Carabao</text5>
  <a href="#loginScreen5" />
  <img src="../images/Luzon/intramuros/carabao.png" width="88" height="77"  class="btn5 itm5" onclick="DoAllThese();" value="Add"/></div>
  <p><div id="loginScreen5"><a href="#" ><button id="pause" onclick="PauseFunction();add_score_black();" >OK</button></a>  </div><div id="cover" >
  </p></div>
<div class="Image"><p onClick="changeFontColor('#FF0000', 'id6');"/><text id="id6">Fresh Milk</text6><a href="#loginScreen6" />
  <img  class="btn6 itm6" onclick="DoAllThese();" value="Add" src="../images/Luzon/intramuros/carabaomilk.png"/></div>
  <p><div id="loginScreen6"><a href="#" ><button id="pause" onclick="PauseFunction();add_score_black();" >OK</button></a>  </div><div id="cover" >
  </p></div>

  <div class="Image">
  <p onClick="changeFontColor('#FF0000', 'id8');"/><text id="id8">Kape Barako</text8><a href="#loginScreen8" />
  <img  class="btn8 itm8" onclick="DoAllThese();" value="Add" src="../images/Luzon/intramuros/kape.png"/></div>
  <p><div id="loginScreen8"><a href="#" ><button id="pause" onclick="PauseFunction();add_score_black();" >OK</button></a>  </div><div id="cover" >
  </p></div>
<div class="Image">
  <p onClick="changeFontColor('#FF0000', 'id9');"/><text id="id9">Marikina Shoes</text9>
  <a href="#loginScreen9" />
  <img  class="btn9 itm9" onclick="DoAllThese();" value="Add" src="../images/Luzon/intramuros/marikina.png"/></div>
  <p><div id="loginScreen9"><a href="#" ><button id="pause" onclick="PauseFunction();add_score_black();" >OK</button></a>  </div><div id="cover" >
  </p></div>
<div class="Image">
  <p onClick="changeFontColor('#FF0000', 'id10');"/><text id="id10">Bamboo Rice</text10>
  <a href="#loginScreen10" />
  <img  class="btn10 itm10" onclick="DoAllThese();" value="Add" src="../images/Luzon/intramuros/bambooriceshrimp.png"/></div>
  <p><div id="loginScreen10"><a href="#" ><button id="pause" onclick="PauseFunction();add_score_black();" >OK</button></a>  </div><div id="cover" >
  </p></div>

我不确定你想要什么样的效果，但像这样的东西会起作用吗：

document.getElementById('hintBtn').addEventListener('click', function() {
  var randomizer = Math.floor((Math.random() * 3) + 1);
  // randomizer is a random integer between 1 and 3 (inclusive)
  switch (randomizer) {
      case 1:
        console.log('effect 1');
        break;
      case 2:
        console.log('effect 2');
        break;
      case 3:
        console.log('effect 3');
        break;
      }
});
<button id="hintBtn">button</button>

你可以做这样的事情，它使用 CSS 关键帧动画，但你可以把它更改为你想要的任何内容： 

function hint() {
  var imgs = document.querySelectorAll('img');             // get all images
  var img = imgs[Math.floor(Math.random() * imgs.length)]; // select random one
  img.classList.add('shake');                              // add shake class
  setTimeout(function() {
    img.classList.remove('shake');           // remove class after half a sec
  }, 500);
}
div {
  display: inline-block;
  width: 128px;
  height: 128px;
  position: relative;
}
img {
  position: absolute;
  width: 100%;
}
.shake {
  margin-left: 0;
  animation: shakeAnim .1s infinite;
  -webkit-animation: shakeAnim .1s infinite;
}
@-webkit-keyframes shakeAnim {
  0%   { margin-left: 0; }
  25%   { margin-left: 5px; }
  50%   { margin-left: 0; }
  75%   { margin-left: -5px; }
  100%   { margin-left: 0; }
}
@keyframes shakeAnim {
  0%   { margin-left: 0; }
  25%   { margin-left: 5px; }
  50%   { margin-left: 0; }
  75%   { margin-left: -5px; }
  100%   { margin-left: 0; }
}
<button onclick="hint()">HINT</button><br />
<div><img src="http://www.mariogame.info/images/icon-facebook.png" /></div>
<div><img src="http://www.mariogame.info/images/icon-facebook.png" /></div>
<div><img src="http://www.mariogame.info/images/icon-facebook.png" /></div>
<div><img src="http://www.mariogame.info/images/icon-facebook.png" /></div>

相关文章：