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 相关文章推荐
JS模拟多线程
Feb 07 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
浅析vue数据绑定
Jan 17 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
对Layer UI 模块化的用法详解
Sep 26 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
php简单smarty入门程序实例
2015/06/11 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
为什么要使用servlet
2016/01/17 面试题
促销活动总结报告
2014/04/26 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
大学教师个人总结
2015/02/10 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
表扬信格式模板
2015/05/05 职场文书
高三生物教学反思
2016/02/22 职场文书