纯JS编写打地鼠游戏

这个游戏是本人前不久刚入门编写的游戏,感觉里面代码很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=""/>&nbsp;分钟</td></tr>

                 <tr><td>倒计时间</td><td><span id="datetime"></span></td></tr>

                 <tr><td>地鼠出现间隔</td><td><input type="text" id="inp1"/>&nbsp;秒钟</td></tr>

                 <tr><td>停留时间</td><td><input type="text" id="inp2"/>&nbsp;秒钟</td></tr>

                 <tr><td>得分情况</td><td><span id="grade">0</span> </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.cnblogs.com/shuilangyizu/p/10008962.html

时间: 2024-10-13 21:32:16

纯JS编写打地鼠游戏的相关文章

原生js简单打地鼠游戏

js部分内容 ------------------------------------------------------ var start = document.getElementById("start"); /*游戏开始按钮*/var diglettLocation = document.getElementsByClassName("anmint");var gameImg = ['img/ds01.png', 'img/ds03.png', 'img/d

js中打地鼠游戏

<!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:迷你简哈哈;

纯js编写验证信息提示正则匹配数字,字母,空值

1.显示效果 2,html结构 1 <div class="border_bg"> 2 <div id="upcCode" style="position:relative;"> 3 <h3 style="color:#337ab7; margin:0 0 15px;">Please enter verification code</h3> 4 <form action=&

纯js制作的弹球游戏

纯js的弹球游戏,撞壁自动返回,按钮放置暂停移动,移开开始移动 1 <!-- 2 author:zhangjie 3 date :2016-7-23 4 --> 5 <!DOCTYPE html> 6 <html> 7 <head> 8 <title></title> 9 <meta charset="UTF-8"> 10 <script type='text/javascript'> 11

JS实现一个基本的打地鼠游戏

直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠),将得分100 实现 老鼠好像有点难画,又不想用图片,就直接用CSS画个简单的图代表老鼠和坑吧 html结构 挺简单,用9个 li 标签代表坑,用9个 div 标签代表老鼠 <div class="container"> <h4>无聊打打地鼠</h4>

为Node.js编写组件的几种方式

本文主要备忘为Node.js编写组件的三种实现:纯js实现.v8 API实现(同步&异步).借助swig框架实现. 关键字:Node.js.C++.v8.swig.异步.回调. 简介 首先介绍使用v8 API跟使用swig框架的不同: (1)v8 API方式为官方提供的原生方法,功能强大而完善,缺点是需要熟悉v8 API,编写起来比较麻烦,是js强相关的,不容易支持其它脚本语言. (2)swig为第三方支持,一个强大的组件开发工具,支持为python.lua.js等多种常见脚本语言生成C++组件

Highcharts纯js图表库,以后可以跟客户说,你跟阿里云ECS用的图表库是同款

Highcharts是一款纯javascript编写的图表库,能够很简便的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达18种不同类型的图表,可以满足常用的Web图表需求 ! 近来维护我的阿里云服务器,进入后台偶然发现阿里云管理后台数据图表用的也是Highcharts,刚好正需要WEB端展示数据的东西,研究哈… Highcharts官网:http://www.highcharts.com Highcharts中文站:ht

[Erl_Question07] Erlang 做图形化编程的尝试:纯Erlang做2048游戏

用Erlang久了,以为erlang做类似于As3,JS的图形化界面是绝对不可能的,多少次,多少次想用erlang做个炫酷的图形游戏.终于:折腾出来了结果:纯Erlang也可以做到! 因为以前接触过WxErlang,网上的资料又少,还好有wx : demo().神器,用了大约20小时的时间.代码在这里: Erlang 2048 github 欢迎大家一起玩! 框架基本流程 使用到的知识: 1. 图形化界面使用了wxErlang; 2.LAN联网使用到Erlang的分布节点互连:net_kerne

Vue.js实现拼图游戏

Vue.js实现拼图游戏 之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/luozhihao/p/5516065.html 前言 为了进一步让大家了解Vue.js的神奇魅力,了解Vue.js的一种以数据为驱动的理念,本文主要利用Vue实现了一个数字拼图游戏,其原理并不是很复杂,效果图如下: demo展示地址为:https://luozhihao.github.io/vue-puzz