1. <!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>
  2.  
  3. <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>
  4.  
  5.     </table>
        <p id="fen">击中次数</p>
        <p id="fen1">分数</p>
    </center>
    </body>
    </html>

js中打地鼠游戏的更多相关文章

  1. 纯JS编写打地鼠游戏

    这个游戏是本人前不久刚入门编写的游戏,感觉里面代码很LOW但是对于新手来说很一般般吧~ 没有上传音乐文件了 运行效果: 上代码(HTML+JS): <!DOCTYPE html> < ...

  2. 无聊的人用JS实现了一个简单的打地鼠游戏

    直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...

  3. 解读前端js中签名算法伪造H5游戏加分

    信息安全在我们日常开发中息息相关,稍有忽视则容易产生安全事故.对安全测试也提出更高要求.以下是笔者亲自实践过程: 一. 打开某个数钱游戏HTML5页面,在浏览器 F12 开发工具中,查看的js,如下, ...

  4. JS开发HTML5游戏《神奇的六边形》（一）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  5. 三维空间旋转和Three.JS中的实现

    三维空间中主要有两种几何变换,一种是位置的变换,位置变换和二维空间的是一样的.假设一点P(X1,Y1,Z1) 移动到Q(X2,Y2,Z2)只要简单的让P点的坐标值加上偏移值就可以了.但是三维空间的旋转 ...

  6. JS开发HTML5游戏《神奇的六边形》（二）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  7. 团队项目——打地鼠游戏(SPEC)系统性能评估测试

    1.SPEC测试的目标: 本轮测试的目的是测试打地鼠游戏的需求以及确保每个需求都能得到满足的方法.编写此需求说明书是为了使用户和开发人员对所开发的系统有一致的理解.通过阅读此说明书,开发人员可以了解当 ...

  8. JS开发HTML5游戏《神奇的六边形》（四）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  9. JS开发HTML5游戏《神奇的六边形》（三）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

随机推荐

  1. 字符串类——KMP子串查找算法

    1, 如何在目标字符串 s 中,查找是否存在子串 p(本文代码已集成到字符串类——字符串类的创建(上)中,这里讲述KMP实现原理) ? 1,朴素算法: 2,朴素解法的问题: 1,问题:有时候右移一位是 ...

  2. 学习：STL----优先队列

    优先队列是队列的高级版,最大的特点是可以内部实现排序 优先队列的定义 优先队列内部使用堆排序,从而实现队列内一直保持着某种顺序规律(比如递增,递减等) 在使用优先队列时,首先要引入头文件:#inclu ...

  3. 20190825 On Java8 第十二章 集合

    第十二章 集合 java.util 库提供了一套相当完整的集合类(collection classes)来解决这个问题,其中基本的类型有 List . Set . Queue 和 Map. 不要在新代 ...

  4. JSP基础--会话跟踪技术、cookie、session

    会话跟踪技术 1 什么是会话跟踪技术 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而10 ...

  5. Python分布式爬虫必学框架Scrapy打造搜索引擎 学习教程

    Python分布式爬虫打造搜索引擎Scrapy精讲—用Django实现搜索的自动补全功能 elasticsearch(搜索引擎)提供了自动补全接口 1.创建搜索自动补全字段suggest自动补全需要用 ...

  6. JavaScript.InjectedScriptHost

    "use strict"; (function(InjectedScriptHost, inspectedGlobalObject, injectedScriptId) {     ...

  7. Redis数据库-基础篇

    Redis Redis是一个开源的,先进的key-value存储. 它通常被称为数据结构服务器,因为键可以包含字符串,哈希,链表,集合和有序集合. Redis 简介 Redis 是完全开源免费的,遵守 ...

  8. LTP安装方法

    git clone https://github.com/linux-test-project/ltp.git apt-get install automake make autotools ./co ...

  9. Springboot-技术专区-war包部署在Tomcat上并修改默认端口

    springboot项目内置Tomcat,直接打成jar包在dos下运行即可,但有时我们需要用war包以非内嵌Tomcat的方式来部署,以下是本人的实际经验 1.首先需要修改pom.xml文件 < ...

  10. USTC现代软件工程--summary

    起笔:我希望先简单总结一下我在这门课程中经历的一些工作以及学习到的一些东西,再对自己.队友.老师做一个评价.然后我想提出一些对这门课程的一些看法和建议,与自己的心得体会. 第一部分: 我在这门课上经历 ...