Javascript 点击提示按钮对图像的触发效果

我有一个隐藏对象游戏的代码，你们知道我如何在每次点击提示按钮时随机给我的图像添加效果吗。请帮助我。我还是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>

热气球

Balut pateros

煤白蜡



鲜奶

卡佩·巴拉科

马里基纳鞋

竹米

我不确定你想要什么样的效果，但我想做一些如下工作：

document.getElementById（'hintBtn'）.addEventListener（'click'，function（）{
var randomizer=Math.floor（（Math.random（）*3）+1）；
//随机数发生器是介于1和3之间的随机整数（包括1和3）
开关（随机发生器）{
案例1：
控制台日志（“效果1”）；
打破
案例2：
控制台日志（“效果2”）；
打破
案例3：
控制台日志（“效果3”）；
打破
}
});
按钮
您可以这样做，它使用CSS关键帧动画，但您可以将其更改为您想要的任何内容：


函数提示（）{
var imgs=document.querySelectorAll（'img'）；//获取所有图像
var img=imgs[Math.floor（Math.random（）*imgs.length）]；//选择随机一个
img.classList.add（'shake'）；//add shake类
setTimeout（函数（）{
img.classList.remove（'shake'）；//半秒后删除类
}, 500);
}
div{
显示：内联块；
宽度：128px；
高度：128px；
位置：相对位置；
}
img{
位置：绝对位置；
宽度：100%；
}
.摇{
左边距：0；
动画：shakeAnim.1s无限；
-webkit动画：shakeAnim.1s无限；
}
@-webkit关键帧shakeAnim{
0%{左边距：0；}
25%{左边距：5px；}
50%{左边距：0；}
75%{左边距：-5px；}
100%{左边距：0；}
}
@关键帧shakeAnim{
0%{左边距：0；}
25%{左边距：5px；}
50%{左边距：0；}
75%{左边距：-5px；}
100%{左边距：0；}
}
HINT

什么效果？@Shomz我想在图像上有一个震动效果。