学习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. python类的定义和使用

    python中类的声明使用关键词class,可以提供一个可选的父类或者说基类,如果没有合适的基类,那就用object作为基类. 定义格式: class 类名(object): "类的说明文档 ...

  2. C++之创建对象时的new与不new

    C++在创建对象的时候可以采用两种方式:(例如类名为Test) Test test  或者 Test* pTest = new Test(). 这两种方法都可以实例化一个对象,但是这两种方法有很大的区 ...

  3. Java 集合深入理解（11）：LinkedList

    点击查看 Java 集合框架深入理解 系列, - ( ゜- ゜)つロ 乾杯~ 今天心情鱼肚白,来学学 LinkedList 吧! 日常开发中,保存一组数据使用的最多的就是 ArrayList, 其次就 ...

  4. iOS app的破解原理，就是去除已付费的账户信息的原理是什么？

    正规的应用程序(IPA 格式,官方软件店发布)在被 iTunes 同步到 iPhone 的时候会调用系统进程 INSTALLD 对应用程序进行证书校验(GPLv3 授权)而这个证书本身是由官方捆绑在应 ...

  5. Selenium - 实现网页元素拖拽

    Drag and Drop, 使用鼠标实现元素拖拽的操作貌似很复杂, 在Selenium中, 借助OpenQA.Selenium.Interactions.Actions类库中提供的方法, 实现起来还 ...

  6. json-c-0.9 的简单用法

    1.下载安装包路径: wget http://oss.metaparadigm.com/json-c/json-c-0.9.tar.gz 2.解压安装包 tar zxvf json-c-0.9.tar ...

  7. 《你不知道的JavaScript》第一部分：作用域和闭包

    第1章 作用域是什么 抛出问题:程序中的变量存储在哪里?程序需要时,如何找到它们? 设计 作用域 的目的:为了更好地存储和访问变量. 作用域:根据名称查找变量的一套规则,用于确定在何处以及如何查找变量 ...

  8. Mapnik 编译安装过程

    首先总结一下,Linux(windows上没有测试过)上Mapnik的编译与测试就是一部心酸血泪史呀,如果您没有做好思想准备,那就出门左转,看点有意思的去吧,编译这个太煎熬了. 安装PostgreSQ ...

  9. HDFS简介【全面讲解】

    http://www.cnblogs.com/chinacloud/archive/2010/12/03/1895369.html [一]HDFS简介HDFS的基本概念1.1.数据块(block)HD ...

  10. CI 框架隐藏index.php-ubuntu

    和朋友在做一个小网站,用到了CI框架,之前测试都是在windows上,隐藏index.php也相对比较简单.但服务器是ubuntu系统,需要配置一下,根据网上看到的一些教程,结合自己电脑的特点,记录步 ...