JavaScript实现一个空中避难的小游戏


Posted in Javascript onJune 06, 2017

前言

最近在看js中的事件,之前也一直有用到事件,用到最多的就是onclick单击事件,还有填写表单信息时的用到的onfocus聚焦时间,和onblur事件,最近看到了onmousemove鼠标移动事件,觉得很神奇,就突然很想写一个小游戏,用到了setInterval函数。游戏的功能也很简单,就是天上掉纸片,小人儿要不停的躲,一旦纸片和小人儿相撞,就会game over!

代码如下:

<!DOCTYPE html>

<html>

<head>

<style>
 .move
 {
  margin-top: 0px;
  width:40px;
  height: 50px;
  background: #ff0;
  position:absolute;
  z-index: 999;
 }


 .self
 {
  width:40px;
  height: 50px;
  background: #f0f;
  position:absolute;
  margin-top: 600px;
  margin-left: 643px;
  z-index: 999;
 }

 .self img
 {
  width:40px;
  height: 50px;
  border-radius: 20px;
 }

</style>

<title>图图up up</title> 

</head>

<body onload="moveDiv()">
 <!--12个div就是空中的小纸片-->
 <div class="move" style="margin-left:100px">

 </div>

 <div class="move" style="margin-left:200px">

 </div>
 <div class="move" style="margin-left:300px">

 </div>
 <div class="move" style="margin-left:400px">

 </div>

 <div class="move" style="margin-left:500px">

 </div>
 <div class="move" style="margin-left:600px">

 </div>
 <div class="move" style="margin-left:700px">

 </div>
 <div class="move" style="margin-left:800px">

 </div>

 <div class="move" style="margin-left:900px">

 </div>
 <div class="move" style="margin-left:1000px">

 </div>
 <div class="move" style="margin-left:1100px">

 </div>
 <div class="move" style="margin-left:1200px">

 </div>

 <!--小人儿用一张图片代替-->
 <div id="self" class="self">
  <img src="images/tutu.jpg">
 </div>

</body>

<script type="text/javascript">

 var alldiv = document.querySelectorAll('.move');
 var selfdiv = document.getElementById("self");
 var timer, flag;
 function moveItem()
 {
  //用随机数决定哪一张纸片掉落
  for (var j = 0; j < Math.round(Math.random()*11); j++) 
  {

   var i = Math.round(Math.random()*11);
   alldiv[i].style.top = alldiv[i].offsetTop + 20 +"px";

   //掉落过程中改变纸片的颜色
   var rgb='rgb('+Math.floor(Math.random()*255)+','
      +Math.floor(Math.random()*255)+','
      +Math.floor(Math.random()*255)+')';
   alldiv[i].style.backgroundColor = rgb;

   if (alldiv[i].offsetTop >= 600)
   {
    alldiv[i].style.top = "50px"; //当纸片落到底部,又重新回到起点
   }
  }

 }

 function moveDiv()
 {
  timer = setInterval(moveItem,20); //每隔20ms掉落
  flag = setInterval(meeting,1); //间隔1ms判断是否相撞
 }

 var selfdiv = document.getElementById("self");
 selfdiv.onmousedown = function(e) //鼠标点击小人儿开始移动
 {
  document.onmousemove = function(e) //小人儿跟着鼠标移动
  {
   if (e.clientY > 600)
   {
    selfdiv.style.marginTop = "600px"; //如果到达屏幕底部就不再往下
   }
   else if(e.clientX > 1300)
   {
    selfdiv.style.marginLeft = "1300px"; //到达最右部就回到不再往右
   }
   else
   {
    //小人儿的位置始终等于鼠标的位置
    selfdiv.style.marginTop = e.clientY + "px";
    selfdiv.style.marginLeft = e.clientX + "px";
   }
  }
 }

 function meeting()
 {
  for (var i = 0; i < alldiv.length; i++)
  {
   //判断是否相撞
   if (Math.abs(alldiv[i].offsetTop-selfdiv.offsetTop) <= 50 && 
    Math.abs(alldiv[i].offsetLeft-selfdiv.offsetLeft) <= 40)
   {
    clearInterval(flag);
    clearInterval(timer);
    alert("一不小心撞到了!!!游戏结束");
   }
  }
 }

</script>

</html>

效果如图:

JavaScript实现一个空中避难的小游戏

全部的代码就这些,动图做的效果不是很好,第一次做动图,发现有很多在线网站都可以,做起来很简单,还是免费的,开心!!!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
Openlayers实现地图全屏显示
Sep 28 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 #Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 #Javascript
JavaScript实现移动端轮播效果
Jun 06 #Javascript
js评分组件使用详解
Jun 06 #Javascript
javascript中mouseenter与mouseover的异同
Jun 06 #Javascript
jquery仿京东商品放大浏览页面
Jun 06 #jQuery
Node.js连接mongodb实例代码
Jun 06 #Javascript
You might like
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
jquery时间下拉框小例子
2013/04/15 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
python利用正则表达式提取字符串
2016/12/08 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
师范生的个人求职信范文
2014/01/04 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
八一建军节感言
2014/02/28 职场文书
高中班主任评语大全
2014/04/25 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
先进工作者事迹材料
2014/12/23 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
小学语文教学随笔
2015/08/14 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL