純JS編寫打地鼠游戲

番茄西紅柿發布于2019-04-23 13:34 / 3264人閱讀

摘要：這個游戲是本人前不久剛入門編寫的游戲，感覺里面代碼很但是對于新手來說很一般般吧沒有上傳音樂文件了運行效果上代碼游戲時間分鐘倒計時間地鼠出現間隔秒鐘停留時間秒鐘得分情況開始游戲退出游戲游戲說明點擊游戲開始按鈕，在下圖中隨機

這個游戲是本人前不久剛入門編寫的游戲，感覺里面代碼很LOW但是對于新手來說很一般般吧~

沒有上傳音樂文件了

運行效果：

上代碼（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>游戲時間td><td><input type="text" id="inp0" value=""/> 分鐘td>tr>
            
                 <tr><td>倒計時間td><td><span id="datetime">span>td>tr>
            
                 <tr><td>地鼠出現間隔td><td><input type="text" id="inp1"/> 秒鐘td>tr>
            
                 <tr><td>停留時間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="開始游戲" 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>游戲說明h2>點擊游戲開始按鈕，在下圖中隨機產生老鼠,老鼠消失前單機老鼠進行打擊，            
            打中一次即可獲得10積分，失敗一次不扣分，趕快行動吧！
        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里面跟蹤鼠標移動
            $$("heads").onmousemove=function(e){
                e = e||event;//獲事件對象
                var xx=e.x;
                var yy=e.y;
                $$("cuizi").style.left = xx+"px";
                $$("cuizi").style.top = yy+"px";                
            }
            var timespace=0;//間隔
            var timestop=0;//停留時間
            var timesdaojishi=1000;
            
            var jg;
            var daoji;
            var stops;
            //點擊開始按鈕
            $$(st).onclick=function(){
                //禁用開始鍵 和開啟退出游戲
                $$(st).disabled=disabled;
                $$(over).disabled=;
                
                if(timesdaojishi!=0){
                    //倒計時
                    var mit=$$(inp0).value;
                    mit*=60;                
                    daoji= setInterval(function(){
                        if(mit>=0){
                            $$(datetime).innerHTML=倒計時：+mit+秒;
                        }else{
                                end();
                        }
                        mit--;
                    },timesdaojishi);
                }                    
                
                //時間間隔
                timespace = document.getElementById(inp1).value*1000;
                timestop = document.getElementById(inp2).value*1000;
                //不等于0就繼續
                if(timespace!=0)
                    jg = setInterval(mouse,timespace);
            }
            //點擊退出游戲按鈕
            $$(over).onclick=function(){
                end();
            };
            //點擊地鼠加分
            function addGrade(){
                var g=$$(grade).innerHTML;
                $$(grade).innerHTML=parseInt(g)+10;
                //播放敲擊的聲音
                $$(audio2).play();
                
                //當前的老鼠隱身
                event.target.style.display=none;
            }
            //============================================以下是幫助函數
            //地鼠出現時間
            function mouse(){
                //不等于0就繼續
                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);
                }
                
            }
            //結束
            function end(){
                //禁用退出游戲鍵 和開啟開始游戲
                $$(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/地鼠場地.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;
}

需要的圖片：

GPU云服務器云服務器打地鼠 java打地鼠素材 html5打地鼠教程用c語言編寫打磚塊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2058.html

python_blomb----函數面試題

摘要：用戶管理后臺管理員只有一個用戶密碼當管理員登陸成功后，可以管理前臺用戶信息用戶信息管理包含添加用戶信息刪除用戶信息查看用戶信息指定用戶查看密碼退出快注釋和取消注釋添加用戶添加用戶信息請添加用戶請輸入密碼該用戶已存在用戶添加成功刪除用戶刪除用用戶管理 1.后臺管理員只有一個用戶admin,密碼admin 2.當管理員登陸成功后，可以管理前臺用戶信息 3.用戶信息管理包含：添...

leo108 2019-07-30 17:28 評論0 收藏0
unicode之痛【精校版】

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

zombieda 2019-07-30 17:39 評論0 收藏0
【Pygame實戰】開心——消消樂，你樂，我樂，大家樂~

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

changfeng1050 2021-11-25 09:43 評論0 收藏0

發表評論

登陸后可評論

0條評論

番茄西紅柿

男|高級講師

我要關注我要私信

TA的文章

tensor

閱讀 713·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3910·2021-11-30 14:52
Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

閱讀 3784·2021-11-30 14:52
VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區

閱讀 3852·2021-11-29 11:00
百度智能云：云產品特惠福利,1核2G輕量應用服務器僅48元/年

閱讀 3783·2021-11-29 11:00
Linux系統和寶塔面板如何啟用禁ping功能?

閱讀 3869·2021-11-29 11:00
301重定向怎么做?301重定向設置方法有幾種

閱讀 3558·2021-11-29 11:00
wordpress網站重定向次數過多的解決方法

閱讀 6105·2021-11-29 11:00

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

純JS編寫打地鼠游戲

相關文章

python_blomb----函數面試題

unicode之痛【精校版】

【Pygame實戰】開心——消消樂，你樂，我樂，大家樂~

發表評論

0條評論

番茄西紅柿

男|高級講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區

百度智能云：云產品特惠福利,1核2G輕量應用服務器僅48元/年

Linux系統和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設置方法有幾種

wordpress網站重定向次數過多的解決方法

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

純JS編寫打地鼠游戲

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！