成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

純JS編寫(xiě)打地鼠游戲

番茄西紅柿 / 3270人閱讀

摘要：這個(gè)游戲是本人前不久剛?cè)腴T編寫(xiě)的游戲，感覺(jué)里面代碼很但是對(duì)于新手來(lái)說(shuō)很一般般吧沒(méi)有上傳音樂(lè)文件了運(yùn)行效果上代碼游戲時(shí)間分鐘倒計(jì)時(shí)間地鼠出現(xiàn)間隔秒鐘停留時(shí)間秒鐘得分情況開(kāi)始游戲退出游戲游戲說(shuō)明點(diǎn)擊游戲開(kāi)始按鈕，在下圖中隨機(jī)

這個(gè)游戲是本人前不久剛?cè)腴T編寫(xiě)的游戲，感覺(jué)里面代碼很LOW但是對(duì)于新手來(lái)說(shuō)很一般般吧~

沒(méi)有上傳音樂(lè)文件了

運(yùn)行效果：

 

上代碼（HTML+JS）：

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>title>
        <link rel="stylesheet" type="text/css" href="css/new_file.css"/>
        <script type="text/javascript">
            function $$(idName){
                return document.getElementById(idName);
            }
        script>
    head>
    <body>
        
        
        
        <div id="" class="top">
            <table>
                 <tr><td>游戲時(shí)間td><td><input type="text" id="inp0" value=""/> 分鐘td>tr>
            
                 <tr><td>倒計(jì)時(shí)間td><td><span id="datetime">span>td>tr>
            
                 <tr><td>地鼠出現(xiàn)間隔td><td><input type="text" id="inp1"/> 秒鐘td>tr>
            
                 <tr><td>停留時(shí)間td><td><input type="text" id="inp2"/> 秒鐘td>tr>
            
                 <tr><td>得分情況td><td><span id="grade">0span> td>tr>
            
                 <tr><td><input type="button" value="開(kāi)始游戲" id="st" />td>
                 <td><input type="button" value="退出游戲" id="over" disabled=""/>td>tr>

               table>
               
        div>
        
        <div id="heads" class="header">
            <span  class="mouse1 dd">
                <a id="mouses1" onclick="addGrade()" href="#">a>
            span>
            <span  class="mouse2 dd">
                <a id="mouses2" onclick="addGrade()" href="#">a>
            span>
            <span  class="mouse3 dd">
                <a id="mouses3" onclick="addGrade()" href="#">a>
            span>
            <span  class="mouse4 dd">
                <a id="mouses4" onclick="addGrade()" href="#">a>
            span>
            <span  class="mouse5 dd">
                <a id="mouses5" onclick="addGrade()" href="#">a>
            span>
            <span  class="mouse6 dd">
                <a id="mouses6" onclick="addGrade()" href="#">a>
            span>
            <span  class="mouse7 dd">
                <a id="mouses7" onclick="addGrade()" href="#">a>
            span>
            <span  class="mouse8 dd">
                <a id="mouses8" onclick="addGrade()" href="#">a>
            span>
            <span id="cuizi" class="c">
                
            span>
        div>
        <div class="rule">
            <h2>游戲說(shuō)明h2>點(diǎn)擊游戲開(kāi)始按鈕，在下圖中隨機(jī)產(chǎn)生老鼠,老鼠消失前單機(jī)老鼠進(jìn)行打擊，            
            打中一次即可獲得10積分，失敗一次不扣分，趕快行動(dòng)吧！
        div>
        
        <audio id="audio1" controls="controls" loop>
            <source src="mp3/music2.mp3" type="audio/mp3" />
            Your browser does not support the audio element.
        audio>
        <audio id="audio2">
            <source src="mp3/music1.mp3" type="audio/mp3" />
            Your browser does not support the audio element.
        audio>
        
        
        <script type="text/javascript">
            var audioa= $$(audio1);
            window.onload=function(){
                audioa.play();
            }
        script>
        
        <script type="text/javascript">
            //錘子在div里面跟蹤鼠標(biāo)移動(dòng)
            $$("heads").onmousemove=function(e){
                e = e||event;//獲事件對(duì)象
                var xx=e.x;
                var yy=e.y;
                $$("cuizi").style.left = xx+"px";
                $$("cuizi").style.top = yy+"px";                
            }
            var timespace=0;//間隔
            var timestop=0;//停留時(shí)間
            var timesdaojishi=1000;
            
            var jg;
            var daoji;
            var stops;
            //點(diǎn)擊開(kāi)始按鈕
            $$(st).onclick=function(){
                //禁用開(kāi)始鍵 和開(kāi)啟退出游戲
                $$(st).disabled=disabled;
                $$(over).disabled=;
                
                if(timesdaojishi!=0){
                    //倒計(jì)時(shí)
                    var mit=$$(inp0).value;
                    mit*=60;                
                    daoji= setInterval(function(){
                        if(mit>=0){
                            $$(datetime).innerHTML=倒計(jì)時(shí)：+mit+秒;
                        }else{
                                end();
                        }
                        mit--;
                    },timesdaojishi);
                }                    
                
                //時(shí)間間隔
                timespace = document.getElementById(inp1).value*1000;
                timestop = document.getElementById(inp2).value*1000;
                //不等于0就繼續(xù)
                if(timespace!=0)
                    jg = setInterval(mouse,timespace);
            }
            //點(diǎn)擊退出游戲按鈕
            $$(over).onclick=function(){
                end();
            };
            //點(diǎn)擊地鼠加分
            function addGrade(){
                var g=$$(grade).innerHTML;
                $$(grade).innerHTML=parseInt(g)+10;
                //播放敲擊的聲音
                $$(audio2).play();
                
                //當(dāng)前的老鼠隱身
                event.target.style.display=none;
            }
            //============================================以下是幫助函數(shù)
            //地鼠出現(xiàn)時(shí)間
            function mouse(){
                //不等于0就繼續(xù)
                if(timestop!=0){
                    var dishuNum=[mouses1,mouses2,mouses3,mouses4,mouses5,mouses6,mouses7,mouses8];
                    
                    
                    var sj = parseInt(Math.random()*10%dishuNum.length);
    //                alert(sj);
                    $$(dishuNum[sj]).style.display=block;
    //                alert(timestop);
                    function datime() {
                            $$(dishuNum[sj]).style.display=none;
                        
                    }
                    stops=setTimeout(datime, timestop);
                }
                
            }
            //結(jié)束
            function end(){
                //禁用退出游戲鍵 和開(kāi)啟開(kāi)始游戲
                $$(over).disabled=disabled;
                $$(st).disabled=;
                $$(inp0).value=0;
                $$(grade).innerHTML=0;
                window.clearInterval(jg);
                window.clearInterval(daoji);
                window.clearTimeout(stops);
            }
        script>
    body>
html>

css代碼：

.top{
    width: 700px;
    margin: 0 auto;
}
/**{
    border: 1px solid lightgoldenrodyellow;
}*/
.header{
    width: 700px;
    height: 400px;
    margin: 0 auto;
    border: 1px dotted lightsalmon;
    background-image: url(../img/地鼠場(chǎng)地.gif);
    background-color: lightgreen;
}
.dd{
    /*display: none;*/
    width: 54px;
    height: 54px;
    /*background-image: url(../img/地鼠.gif);*/
    /*background-position: -159px -130px;*/    
    display: block;
    /*border: 1px solid red;*/
}
.dd a{
    display: none;
    width: 53px;
    height: 53px;
    background-image: url(../img/地鼠.gif);
    background-position: -159px -130px;
    /*border: 1px solid lightgoldenrodyellow;*/
}
.mouse1{
    position: relative;
    z-index: 3px;
    left: 315px;
    top: 90px;
}
.mouse2{
    position: relative;
    z-index: 3px;
    left: 210px;
    top: 73px;
}
.mouse3{
    position: relative;
    z-index: 4px;
    left: 540px;
    top: 25px;
}
.mouse4{
    position: relative;
    z-index: 1px;
    left: 53px;
    top: 54px;
}
.mouse5{
    position: relative;
    z-index: 1px;
    left: 285px;
    top: -10px;
}
.mouse6{
    position: relative;
    z-index: 1px;
    left: 500px;
    top: -76px;
}
.mouse7{
    position: relative;
    z-index: 1px;
    left: 173px;
    top: -55px;
}
.mouse8{
    position: relative;
    z-index: 1px;
    left: 376px;
    top: -80px;
}
.c{
    position: absolute;
    z-index: 1000px;
    top:190px;
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(../img/錘子.gif);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position:-2px -3px;
    border-radius:10px ;
}
.rule{
    position: absolute;
    width: 200px;
    z-index: 10px;
    right: 5%;
    top: 0px;
    border: 1px dotted lightcoral;
    text-align: center;
    border-radius: 10px;
    background-color: lightgoldenrodyellow;
}

需要的圖片：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2058.html

相關(guān)文章

  • python_blomb----函數(shù)面試題

    摘要：用戶管理后臺(tái)管理員只有一個(gè)用戶密碼當(dāng)管理員登陸成功后，可以管理前臺(tái)用戶信息用戶信息管理包含添加用戶信息刪除用戶信息查看用戶信息指定用戶查看密碼退出快注釋和取消注釋添加用戶添加用戶信息請(qǐng)?zhí)砑佑脩粽?qǐng)輸入密碼該用戶已存在用戶添加成功刪除用戶刪除用 用戶管理 1.后臺(tái)管理員只有一個(gè)用戶admin,密碼admin 2.當(dāng)管理員登陸成功后，可以管理前臺(tái)用戶信息 3.用戶信息管理包含： 添...

    leo108 評(píng)論0 收藏0

  • unicode之痛【精校版】

    摘要：之痛原文地址譯者校正實(shí)用編程指南這是我在所做的演講。事實(shí)一和二共同造成了計(jì)算機(jī)設(shè)備結(jié)構(gòu)與世界人類需求的一個(gè)沖突。就是為了解決之前的老的字符集問(wèn)題。值意味著，失敗時(shí)將會(huì)返回一個(gè)標(biāo)準(zhǔn)的替代字符。將使用進(jìn)行了解碼。 Unicode之痛原文地址： http://nedbatchelder.com/text...譯者： yudun1989 校正: sicklife實(shí)用Unicode編程指南這是...

    zombieda 評(píng)論0 收藏0

  • 【Pygame實(shí)戰(zhàn)】開(kāi)心——消消樂(lè)，你樂(lè)，我樂(lè)，大家樂(lè)~

    摘要：正文開(kāi)心消消樂(lè)分為二部分首先是開(kāi)心然后是消消樂(lè)游戲嘛嘿嘿一開(kāi)心小故事三則近視聰明的學(xué)生殺手二消消樂(lè)游戲素材圖片開(kāi)心消消樂(lè)語(yǔ)音提示環(huán)境安裝本文是由寫(xiě)的小游戲。 導(dǎo)語(yǔ) 你今天消消樂(lè)了嗎？ ? 哈嘍哈嘍~木木子之前不是寫(xiě)過(guò)一篇百變消消樂(lè)嘛？ 可能你們不記得了，沒(méi)關(guān)系——今天重溫一下，來(lái)一篇開(kāi)心?...

    changfeng1050 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<