编程 Javascript

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实现一个空中避难的小游戏

- Author -

塞上江南果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

一段效率很高的for循环语句使用方法

Aug 13 Javascript

jQuery选择器简明总结（含用法实例,一目了然）

Apr 25 Javascript

jquery移动节点实例

Jan 14 Javascript

JavaScript判断用户是否对表单进行了修改的方法

Mar 18 Javascript

有关jQuery中parent()和siblings()的小问题

Jun 01 Javascript

简单学习vue指令directive

Nov 03 Javascript

jQuery实现注册会员时密码强度提示信息功能示例

Sep 05 jQuery

vue 动态修改a标签的样式的方法

Jan 18 Javascript

vue-cli中的babel配置文件.babelrc实例详解

Feb 22 Javascript

详解微信小程序与内嵌网页交互实现支付功能

Oct 22 Javascript

javascript设计模式 ? 访问者模式原理与用法实例分析

Apr 26 Javascript

JS实现悬浮球只在一侧滑动并且是横屏状态下

Aug 19 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

手把手教你使用DedeCms V3的在线采集图文教程

2007/04/03 PHP

php目录管理函数小结

2008/09/10 PHP

php array的学习笔记

2012/05/16 PHP

关于PHPDocument 代码注释规范的总结

2013/06/25 PHP

php为字符串前后添加指定数量字符的方法

2015/05/04 PHP

thinkphp框架使用JWTtoken的方法详解

2019/10/10 PHP

jQuery示例收集

2010/11/05 Javascript

分享一个asp.net pager分页控件

2012/01/04 Javascript

用jquery存取照片的具体实现方法

2013/06/30 Javascript

JS中的数组的sort方法使用示例

2014/01/22 Javascript

JavaScript中跨域调用Flash的方法

2014/08/11 Javascript

JavaScript中数组去除重复的三种方法

2016/04/22 Javascript

JS输出空格的简单实现方法

2016/09/08 Javascript

javascript设计模式之Adapter模式【适配器模式】实现方法示例

2017/01/13 Javascript

JavaScript实现水平进度条拖拽效果

2017/01/18 Javascript

Bootstrap笔记—折叠实例代码

2017/03/13 Javascript

bootstrap+jquery项目引入文件报错的解决方法

2018/01/22 jQuery

详解VUE自定义组件中用.sync修饰符与v-model的区别

2018/06/26 Javascript

在Vue环境下利用worker运行interval计时器的步骤

2019/08/01 Javascript

Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)

2020/03/06 Javascript

[00:35]2016完美“圣”典风云人物：冷冷宣传片

2016/12/08 DOTA

Python中文件I/O高效操作处理的技巧分享

2017/02/04 Python

教你学会使用Python正则表达式

2017/09/07 Python

一条命令解决mac版本python IDLE不能输入中文问题

2018/05/15 Python

Python使用re模块正则提取字符串中括号内的内容示例

2018/06/01 Python

Python中Proxypool库的安装与配置

2018/10/19 Python

python直接获取API传递回来的参数方法

2018/12/17 Python

python开发准备工作之配置虚拟环境(非常重要)

2019/02/11 Python

python 解决Fatal error in launcher:错误问题

2020/05/21 Python

Python 制作查询商品历史价格的小工具

2020/10/20 Python

暑期实践思想汇报

2014/01/06 职场文书

银行员工职业规划范文

2014/01/21 职场文书

社区元宵节活动总结

2015/02/06 职场文书

环境卫生标语

2015/08/03 职场文书

解决Jenkins集成SonarQube遇到的报错问题

2021/07/15 Java/Android

分享CSS盒子模型隐藏的几种方式

2022/02/28 HTML / CSS