学习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. Android Priority Job Queue (Job Manager)：后台线程任务结果传回前台（三）

     Android Priority Job Queue (Job Manager):后台线程任务结果传回前台(三) 在附录文章4,5的基础上改造MainActivity.java和MyJob.ja ...

  2. Android动态Java代码调整window大小

    Android调整window大小 举一个例子,设置当前的APP所需要的屏幕高度为设备高度的一半: Window window = getActivity().getWindow(); WindowM ...

  3. LCA（Tarjan)

    program LCA(Tarjan); type arr=record u,v,w,next:longint; end; ; maxm=; ..maxm*] of arr; last,lasq,an ...

  4. 【转】Fiddler 教程

    原文转自:http://www.cnblogs.com/tankxiao/archive/2012/02/06/2337728.html Fiddler是最强大最好用的Web调试工具之一,它能记录所有 ...

  5. Ubuntu安装Sun JDK及如何设置默认java JDK

    假设系统为Ubuntu 10.10 64位.    先来看看当前的系统默认的java版本,及提供商.通过命令java -version       kemix@kemix-VB10-64:~$ jav ...

  6. LeetCode Path Sum II （DFS）

    题意: 给一棵二叉树,每个叶子到根的路径之和为sum的,将所有可能的路径装进vector返回. 思路: 节点的值可能为负的.这样子就必须到了叶节点才能判断,而不能中途进行剪枝. /** * Defin ...

  7. Python 如何跳出多重循环

    Python 如何跳出多重循环 抛异常 return

  8. css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

  9. jsoup的elements类

    jsoup的Elements类 一.简介 该类是位于select包下,直接继承自Object,所有实现的接口有Cloneable, Iterable<Element>, Collectio ...

  10. scala言语基础学习十一

    隐式转换 使用隐式转换加强现有的类型的功能-类似于设计模式的装饰模式