Utiliser pour implémenter le jeu de whack-a-mole en js-js tutoriel-php.cn

Utiliser pour implémenter le jeu de whack-a-mole en js

不言

Libérer： 2018-07-14 17:24:53

original

2317 Les gens l'ont consulté

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>

Copier après la connexion

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!