Maison > Article > interface Web > Utiliser pour implémenter le jeu de whack-a-mole en js
Utiliser pour implémenter le jeu de whack-a-mole en js
- 不言original
- 2018-07-14 17:24:532217parcourir
Cet article présente principalement l'implémentation du jeu whack-a-mole en js. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
<!DOCTYPE html>
<html lang="">
<head>
<mata charset = "utf-8" />
<title>打地鼠</title>
<style>
#tb{
background:url(beijing.jpg) no-repeat;
}
#fen{
font-weight:bold;
font-size:60px;
font-family:迷你简哈哈;
}
#fen1{
font-weight:bold;
font-size:60px;
font-family:迷你简哈哈;
}
</style>
<script>
function kaishi(){
setTimeout("bh()",3000);
sum=0;
}
// 实现地鼠出现的动作
function bh(){
sj=Math.floor(Math.random()*9);
img1=document.getElementsByTagName("img");
img1[sj].src="dishu.gif";
// 给地鼠图片添加单击事件和打击动作
img1[sj].setAttribute("onclick","daji()");
setTimeout("xs()",1000);
}
// 实现打击地鼠的动作，将地鼠图片更换为击中图片，并且去掉onclick事件，避免出现一只地鼠击中两次，加两次分数的情况
function daji(){
img1[sj].src="shang.gif";
img1[sj].removeAttribute("onclick");
// 更换一次图片积分器加十分
sum+=10;
// 改变积分器
document.getElementById("fen").innerHTML=sum/10;
document.getElementById("fen1").innerHTML=sum;
}
// 一秒后没击中地鼠，地鼠消失动作
function xs(){
img1[sj].removeAttribute("onclick");
img1[sj].src="keng.gif";
setTimeout("bh()",1000);
}
</script>
</head>
<body onload="kaishi()">
<center>
<table id="tb">
<foction>打地鼠</foction>
<tr>
<td><img src="keng.gif"></td>
<td><img src="keng.gif"></td>
<td><img src="keng.gif"></td>
</tr>
<tr>
<td><img src="keng.gif"></td>
<td><img src="keng.gif"></td>
<td><img src="keng.gif"></td>
</tr>
<tr>
<td><img src="keng.gif"></td>
<td><img src="keng.gif"></td>
<td><img src="keng.gif"></td>
</tr>
</table>
<p id="fen">击中次数</p>
<p id="fen1">分数</p>
</center>
</body>
</html>Le. ci-dessus se trouve cet article. Le contenu complet, j'espère qu'il sera utile à l'étude de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Utilisez js pour implémenter le code du jeu du serpent
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Une explication du modèle de méthode modèle de jsArticle suivant：Une explication du modèle de méthode modèle de js