<!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>

<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>

    </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. HTML--JS 随机背景色

    <html> <head> <title>背景随机变色</title> <script type="text/javascript&qu ...

  2. python实现压缩文件成zip格式

    实现代码如下: #压缩文件 import time,zipfile class zip: def get_zip(self,files,zip_name): zp=zipfile.ZipFile(zi ...

  3. mysql - 标识列

    #标识列 /* 又称为自增长列 含义:可以不用手动插入值,系统提供默认的序列值 特点: 1.表示列必须和主键搭配吗?不一定,但是要求是一个key 2.一个表中只能有一个标识列! 3.标识列的类型有限制 ...

  4. $_POST,$_GET,$_REQUEST区分

    PHP $_REQUEST PHP $_REQUEST 用于收集 HTML 表单提交的数据. 下面的例子展示了一个包含输入字段及提交按钮的表单.当用户通过点击提交按钮来提交表单数据时, 表单数据将发送 ...

  5. 如何配置JedisPool的参数

    转自:http://blog.csdn.net/huahuagongzi99999/article/details/13631579 如何配置Pool的参数 JedisPool的配置参数很大程度上依赖 ...

  6. 8、numpy——数组的迭代

    1.单数组的迭代 NumPy 迭代器对象 numpy.nditer 提供了一种灵活访问一个或者多个数组元素的方式. 迭代器最基本的任务的可以完成对数组元素的访问. 1.1 默认迭代顺序 import ...

  7. JS面向对象——工厂模型

    工厂模型抽象了创建具体对象的过程,以下示例代码说明工厂类型: <!DOCTYPE html> <html> <head> <title>工厂模型< ...

  8. ajax中的application/x-www-form-urlencoded中的使用[转]

    一,HTTP上传的基本知识 在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型.下边是说明: application/x-w ...

  9. 一网打尽 @ExceptionHandler、HandlerExceptionResolver、@controlleradvice 三兄弟！

    把 @ExceptionHandler.HandlerExceptionResolver.@controlleradvice 三兄弟放在一起来写更有比较性.这三个东西都是用来处理异常的,但是它们使用的 ...

  10. Java疯狂讲义笔记——内部类

    [定义]内部类:定义在其它类内部的类.外部类:包含内部类的类,也称 宿主类.局部内部类:定义在方法里的内部类. [接口内部类]接口中也可以定义内部类,必须为public static修饰(自动添加), ...