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 相关文章推荐
javascript实现日期格式转换
Dec 16 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
VUE长按事件需求详解
Oct 18 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 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
11个PHPer必须要了解的编程规范
2014/09/22 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
Jquery 绑定时间实现代码
2011/05/03 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
比驿:全球酒店比价网
2018/06/20 全球购物
交通安全演讲稿
2014/01/07 职场文书
植树节新闻稿
2015/07/17 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书