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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
Javascript实现单例模式
Jan 24 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
JS实现留言板功能
Jun 17 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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 cli 方式 在crotab中运行解决
2010/02/08 PHP
PHP实现搜索相似图片
2015/09/22 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
python在不同条件下的输入与输出
2020/02/13 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
SQL SERVER面试资料
2013/03/30 面试题
销售冠军获奖感言
2014/02/03 职场文书
服务口号大全
2014/06/11 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
八年级英语教学反思
2016/02/15 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
python flask开发的简单基金查询工具
2021/06/02 Python