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 使用手册(四)
Sep 23 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
禁止js文件缓存的代码
Apr 09 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
ios中视频的最后一桢问题解决
May 14 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实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
基于node.js实现微信支付退款功能
2017/12/19 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
Python中is和==的区别详解
2018/11/15 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
医学检验专业个人求职信范文
2013/12/04 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
保护环境倡议书500字
2014/05/19 职场文书
开学典礼策划方案
2014/05/28 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
2014年教研组工作总结
2014/11/26 职场文书
通知的格式范文
2015/04/27 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书