学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码:

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>打地鼠的小游戏</title>

     <link rel="stylesheet" href="CSS/comment.css">

     <script src="Javascript/JavaScript.js"></script>

 </head>

 <body>

     <p style="height: 30px;font-size: 20px;color: #EEEEEE;background: #445566;">欢迎来到打地鼠小游戏,让我们一起打啊打!</spap>

     <div id="bgDiv" class="div1">

     </div>

     <p>分数为:<span id="number"></span></p>

     <div style="width: 200px;height: 50px;background:black;text-align: center;margin: 0 auto ;">

         <input style="height: 50px;color: #ffffff;font-size: 16px;background: red;" type="button" value="开始游戏"onclick="start()">

         <input style="height: 50px;color: #ffffff;font-size: 16px;background: green;" type="button" value="结束游戏" onclick="stop()">

     </div>

 </body>

 </html>

接下来是CSS部分代码:

 body,div{

     padding:;

     margin:;

 }

 .div1{

     width: 400px;

     height: 400px;

     background: gray;

     margin: 0 auto;

 }

 .btn{

     height: 35px;

     width: 35px;

     background-image: url("1.jpg");

 }

 p{

     text-align: center;

 }

再往下就是控制这一切的javascript代码:

 var hitNumber=0;

 var timer=null;

 var flag=null;

 function start(){

     if(timer==null){

         timer=setInterval(function create(){//开始创建每一个地鼠,

             flag=true;//这里设置flag的原因是用来防止onclick的多次点击累加

             var newButton = document.createElement("input");

             newButton.type="button";

             newButton.value="地鼠";

             newButton.style.height="40px";

             newButton.style.width="40px";

             newButton.style.backgroundImage="url(CSS/1.jpg)";//给每一个button添加背景图片

             var box = document.getElementById("bgDiv");

             box.appendChild(newButton);

             newButton.onclick=hit;

             newButton.style.marginLeft=randomX();

             newButton.style.marginTop=randomX();

             setTimeout(function(){

                 box.removeChild(newButton);

             },1000);

         },2000);

     }

 }

 function stop(){//停止打地鼠,但是这里我在下边进行了一个结束时弹出一个结语框

     clearInterval(timer);

     var tip=document.createElement("div");

     tip.style.height="100px";

     tip.style.width="200px";

     tip.style.background="red";

     var box = document.getElementById("bgDiv");

     box.appendChild(tip);

     tip.style.margin="0 auto";

     tip.style.color="white";

     tip.style.fontSize="20px";

     tip.style.textAlign="center";

     tip.style.lineHeight="100px";

     tip.innerHTML="恭喜你获得"+hitNumber+"分"

 }

 function randomX(){

     var leftLength=Math.floor(Math.random()*360)+"px";

     return leftLength;

 }

 function randomY(){

     var topLength=Math.floor(Math.random()*360)+"px";

     return topLength;

 }

 function hit(){//当点击地鼠时,进行打击次数的累加

     if(flag){

         flag=false;

         hitNumber++;

         //var hit1=document.getElementById("event.target.id");

         var text1=document.getElementById("number");

         text1.innerHTML=hitNumber;

     }

 }

好了,博友们,今天的分享就到这里,大家有了好的方法可以一起交流呀,今天的代码有很多冗余代码没有精简,不过这样看起来会详细点.

用原生javascript做的一个打地鼠的小游戏的更多相关文章

  1. 原生javascript开发仿微信打飞机小游戏

    今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏.. 本来想用html5做的,但是毕竟人家才初学,连jquery都还不 ...

  2. 用canvas和原生js写的一个笨鸟先飞的小游戏（暂时只有一个关卡）

    其中一个画布背景是一张图片,还有小鸟,两个管子的图片.暂时不知道怎么附上去就不添加了.这里只有源代码,css和js都是在html写着的,感觉比他们的容易吧,hah <!DOCTYPE html& ...

  3. 最近做的一个Spring Boot小项目，欢迎大家访问 http://39.97.115.152/

    最近做的一个Spring Boot小项目,欢迎大家访问 http://39.97.115.152/,帮忙找找bug,网站里有源码地址 网站说明 甲壳虫社区(Beetle Community) 一个开源 ...

  4. 【C语言探索之旅】 第一部分第八课：第一个C语言小游戏

    ​ 内容简介 1.课程大纲 2.第一部分第八课:第一个C语言小游戏 3.第一部分第九课预告: 函数 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写 ...

  5. python小练习：使用循环和函数实现一个摇骰子小游戏。游戏规则如下：游戏开始，首先玩家选择Big or Small（押大小），选择完成后开始摇三个骰子，计算总值，11<=总值<=18为“大”，3<=总值<=10为“小”。然后告诉玩家猜对或者是猜错的结果。

    python小练习:使用循环和函数实现一个摇骰子小游戏.游戏规则如下:游戏开始,首先玩家选择Big or Small(押大小),选择完成后开始摇三个骰子,计算总值,11<=总值<=18为“ ...

  6. html5面向对象做一个贪吃蛇小游戏

    canvas加面向对象方式的贪吃蛇 2016-08-25 这个小游戏可以增加对面向对象的理解,可以加强js逻辑能力,总之认真自己敲一两遍收获还是不少啊!!适合刚学canvas的同学练习!! 废话不多说 ...

  7. 第一个leapmotion的小游戏

    自从看过leapmotion的宣传视频,就被吸引住了.觉得这东西迟早要替代鼠标,然后关注了一年多leapmotion的动态,终于在今年8月份入手了一只.//675大洋啊,心疼~ 一直想写份评测,一直想 ...

  8. python新手如何编写一个猜数字小游戏

    此文章只针对新手,希望大家勿喷,感谢!话不多说先上代码: import random if __name__ == '__main__': yourname = input("你好! 你的名 ...

  9. 原生JavaScript 获取下一个/上一个同胞元素

    看JavaScript遇到的问题,研究了下 获取上一个或者下一个同胞元素,使用很多人会立马想到JQuery  prev() 和 next() 的确非常方便.那么原生的JavaScript该怎么获取 上 ...

随机推荐

  1. fibonacci数列(二)_矩阵快速幂

    描述 In the Fibonacci integer sequence, F0 = 0, F1 = 1, and Fn = Fn − 1 + Fn − 2 for n ≥ 2. For exampl ...

  2. java作业7

    (1)阅读以下代码(CatchWho.java),写出程序运行结果: (2)写出CatchWho2.java程序运行的结果 (3)请先阅读 EmbedFinally.java示例,再运行它,观察其输出 ...

  3. BZOJ3261 最大异或和 （可持久化Trie）

    ; len=; var x,y,z,n,m,tot,lx,i:longint; sum:..maxn] of longint; rt:..maxn] of longint; time,l,r:..ma ...

  4. AttributeError: 'dict_values' object has no attribute 'translate'

    /***************************************************************************************** * Attribu ...

  5. 在虚拟上安装kali

    1.创建新的虚拟机 2.选择典型 下一步 3.选安装程序光盘映像文件:写入自己.iso的位置 4.linux--Ubuntu 5.给虚拟机名称 虚拟机在你电脑的位置 6.最大自盘自己定义 7.选自定义 ...

  6. Spring mvc源码url路由-我们到底能走多远系列(38)

    我们到底能走多远系列38 扯淡: 马航的事,挺震惊的.还是多多珍惜身边的人吧. 主题: Spring mvc 作为表现层的框架,整个流程是比较好理解的,毕竟我们做web开发的,最早也经常接触的就是一个 ...

  7. hdu 5187 zhx's contest

    题目分析如果n=1,答案是1,否则答案是2n−2. 证明:ai肯定是最小的或者最大的.考虑另外的数,如果它们的位置定了的话,那么整个序列是唯一的. 那么ai是最小或者最大分别有2n−1种情况,而整个序 ...

  8. ZOJ 1001 A + B Problem

    熟悉ZOJ环境,如何上传代码,如何查看结果. #include<iostream> using namespace std; int main(){ int a,b; while(cin& ...

  9. 通过ros节点发布Twist Messages控制机器人--10

    原创博客:转载请表明出处:http://www.cnblogs.com/zxouxuewei/ 1.到目前为止,我们已经从命令行移动机器人,但大多数时间你将依靠一个ros节点发布适当的Twist消息. ...

  10. php部分---对数据的多条件查询，批量删除

    1.给多条件查询,添加条件 <h1>新闻信息查看</h1> <?php $tiaojian1=" 1=1"; $tiaojian2=" 1= ...