学习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. java作业3

    Java字段初始化的规律: 静态初始化生成实例之后(就是new之后)变成你赋给它的值 ,先执行静态初始化,如果没有实例化,按照初始化块和构造方法在程序中出现的顺序执行. 当多个类之间有继承关系时,创建 ...

  2. Unity3D ShaderLab 简单的立方体图反射

    Unity3D ShaderLab 简单的立方体图反射 反射是着色器模拟现实环境的一个关键因素,它能使我们的着色器渲染效果更加具备视觉冲击,因为他利用了我们周围的环境, 让着色器反射外界的场景信息并将 ...

  3. Push推送原理

    Push 的工作机制 APNS 是Apple Push Notification Service(Apple Push服务器)的缩写,是苹果的服务器. 推送可以分为三个阶段. 第一阶段:.net应用程 ...

  4. 在yii中使用分页

    yii中使用分页很方便,如下两种方法: 在控制器中: 1. $criteria = new CDbCriteria(); //new cdbcriteria数据库$criteria->id = ...

  5. HTML-day-1-HTML基础知识

    HTML基础知识 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  6. MapBox TileMill

    TileMill 学习网站: Walkthrough: Creating tiles with Mapnik using TileMill TileMill 快速入门 Cartography With ...

  7. ARM处理器模式

    ARM处理器模式 ARM处理器共有7种运行模式: l  用户模式(User,usr):正常程序执行的模式 l  快速中断模式(FIQ,fiq):用于高速数据传输和通道处理 l  外部中断模式(IRQ, ...

  8. ResponsiveSlides.js最轻量级的幻灯片插件

    摘要:ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支 ...

  9. 229. Majority Element II

    Given an integer array of size n, find all elements that appear more than ⌊ n/3 ⌋ times. The algorit ...

  10. JavaScript的一些认识

    最近看了一下<nodejs开发指南>发现nodejs在某些特定的领域由他自己的长处,适合密集计算但是业务逻辑比较简单的场景,如果做网站还是选择php吧,呵呵,这本书我除了第5章<用n ...