资讯专栏INFORMATION COLUMN

纯JS编写打地鼠游戏

番茄西红柿 / 2991人阅读

摘要:这个游戏是本人前不久刚入门编写的游戏,感觉里面代码很但是对于新手来说很一般般吧没有上传音乐文件了运行效果上代码游戏时间分钟倒计时间地鼠出现间隔秒钟停留时间秒钟得分情况开始游戏退出游戏游戏说明点击游戏开始按钮,在下图中随机

这个游戏是本人前不久刚入门编写的游戏,感觉里面代码很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;
}

需要的图片:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2058.html

相关文章

  • python_blomb----函数面试题

    摘要:用户管理后台管理员只有一个用户密码当管理员登陆成功后,可以管理前台用户信息用户信息管理包含添加用户信息删除用户信息查看用户信息指定用户查看密码退出快注释和取消注释添加用户添加用户信息请添加用户请输入密码该用户已存在用户添加成功删除用户删除用 用户管理 1.后台管理员只有一个用户admin,密码admin 2.当管理员登陆成功后,可以管理前台用户信息 3.用户信息管理包含: 添...

    leo108 评论0 收藏0
  • unicode之痛【精校版】

    摘要:之痛原文地址译者校正实用编程指南这是我在所做的演讲。事实一和二共同造成了计算机设备结构与世界人类需求的一个冲突。就是为了解决之前的老的字符集问题。值意味着,失败时将会返回一个标准的替代字符。将使用进行了解码。 Unicode之痛原文地址: http://nedbatchelder.com/text...译者: yudun1989 校正: sicklife实用Unicode编程指南这是...

    zombieda 评论0 收藏0
  • 【Pygame实战】开心——消消乐,你乐,我乐,大家乐~

    摘要:正文开心消消乐分为二部分首先是开心然后是消消乐游戏嘛嘿嘿一开心小故事三则近视聪明的学生杀手二消消乐游戏素材图片开心消消乐语音提示环境安装本文是由写的小游戏。 导语 你今天消消乐了吗? ​ 哈喽哈喽~木木子之前不是写过一篇百变消消乐嘛? 可能你们不记得了,没关系——今天重温一下,来一篇开心?...

    changfeng1050 评论0 收藏0
  • Python文章合集 | 这些项目里肯定有你的新宠(入门到实战、游戏、Turtle、案例等)

    摘要:有趣好玩的个入门题案例都在这里等你下载。趣味连连看经典版童年经典火影忍者连连看,无需下载,在线可玩小游戏植物大战僵尸游戏真的有毒戒不掉啊实战项目实战项目做一个刮刮乐案例,一不小心着实惊艳到我了。 导语 为了大家能相应的找到自己那方面的文章,这边小编进行了文章的汇总合集,也特别感谢我的粉丝们...

    derek_334892 评论0 收藏0
  • 制作html5微信页面的经验总结。

    摘要:由于操作上比较多的设计都是隐性的例如滑动之类,需要手势动画作提示。如果页面是推广页面,绝大部分用户都是首次进入,而设计中的元素前端不能复现只能使用图片时,会产生加载时间较长的问题。各手机尺寸,和比例。 先罗列一下我遇到的问题: 用户可选择图片上传,但是图片比较大(基本都是2M以上),而且还得异步上传。 由于操作上比较多的设计都是隐性的例如滑动之类,需要手势动画作提示。 块内元素滚动...

    Moxmi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<