JS实现躲避粒子小游戏


Posted in Javascript onJune 18, 2020

本文实例为大家分享了JS实现躲避粒子小游戏的具体代码,供大家参考,具体内容如下

小项目的实战操作可以帮助我们更好的掌握javascript

躲避例子游戏规则:拖拽红球躲避绿球碰撞,拖拽过程不能触碰容器内壁,以赢得游戏持久度

页面效果:

JS实现躲避粒子小游戏

实现过程

不积小流,无以成江海。
将页面效果的实现细分成小步实现:页面结构的构建,样式修饰,js中小绿球在容器顶部随机位置生成、小绿球非水平非垂直方向的运动、小绿球碰撞容器内壁后弹性运动、生成多个小绿球、拖拽红球、红球的边界判断、红球与绿球的碰撞检测、“坚持n秒”的定时器实现、清除定时器

结构搭建

创建文本、容器和红球,在此项目下小绿球是动态创建生成的;

JS实现躲避粒子小游戏

样式修饰

为创建的结构设置样式修饰

JS实现躲避粒子小游戏

动态行为Javascript

采用面向对象的编程思维

1.小绿球在容器顶部随机位置生成

用random函数生成 [0,1)内的随机小数再乘以小绿球在水平方向的运动范围,最后floor求整并将整数作为初始时小绿球与容器左壁的距离

2.小绿球非水平非垂直方向的运动

设置X方向的速度值和Y方向的速度值,与(1)相同,采用random函数乘以初始化XY方向的速度值就可以得到随机方向
创建定时器获取并更新小绿球与容器的左壁和上壁的距离以实现小球运动

3.小绿球碰撞容器内壁后弹性运动

小绿球的边界判断,碰撞左壁和右壁时X方向的速度 * -1;碰撞上壁和下壁时Y方向的速度 * -1

4.生成多个小绿球

通过定时器不断调用构造函数生成多个小绿球,并置于一个数组中

5.拖拽红球

为红球添加点击、拖动、松开事件。记住红球上一页面停留位置,与现在页面停留位置做差得到红球在XY方向的移动距离,分别加上上一停留位置红球与容器左壁和上壁的距离得到现在红球与容器左壁和上壁的距离,不断循环更新上次停留位置和现在停留位置即可

6.红球的边界判断

红球和绿球的移动范围都是容器的宽度高度减去自身球面的宽度和高度。触碰边界则重载页面,为了避免页面重载时出现持续触碰边界的情况加了锁

7.红球与绿球的碰撞检测

判断两圆心之间的距离是否小于两圆半径之和

8.“坚持n秒”的定时器实现

定时器计时并修改span标签的innerHTML

9.清除定时器

游戏结束时清除定时器

下面展示代码:

/* 
 1.随机生成小绿球在顶部 位置随机
 3.小绿球自己运动
 4.弹性运动
 2.生成多个

 5.红球拖拽
 6.红球边界判断
 7.红球和绿球碰撞检测

 8.定时器清除
 9.坚持了多久
 (但对象编程)
*/

var game = {
 name:'游戏开始',
 redBall:document.getElementsByClassName('red')[0],
 RunTime:document.getElementsByTagName('span')[0],
 num:0,
 greenArr:[],
 flag:true,
 movePlus:{
 outer:document.getElementsByClassName('outer')[0],
 iWidth:document.getElementsByClassName('outer')[0].offsetWidth,
 iHeight:document.getElementsByClassName('outer')[0].offsetHeight,
 ispeedY:10,//小绿球的速度
 ispeedX:10
 },

 init:function(){
 console.log(this.name);
 // console.log(this.movePlus.iHeight);
 this.createBall(this.movePlus);
 this.dragRedBall(this.movePlus);
 this.runTime();
 },
 runTime:function(){
 var self = this;
 this.Timer = setInterval(function(){
  self.num++;
  self.RunTime.innerHTML = '坚持了' + self.num + '秒';
 },1000);
 },
 createBall:function(obj){
 var self = this;
 var plus = obj;

 function Green(plus){
  this.ball = document.createElement('div');
  this.ball.className = 'green';
  plus.outer.appendChild(this.ball);
  this.subWidth = Math.floor(Math.random()*(plus.iWidth - this.ball.offsetWidth));
  this.ball.style.left = this.subWidth + 'px';
  // this.subHeight = Math.floor(Math.random()*(plus.iHeight - this.ball.offsetHeight));
  // this.ball.style.top = this.subHeight + 'px';
  this.ispeedX = Math.floor(Math.random()*plus.ispeedX) + 1;
  this.ispeedY = Math.floor(Math.random()*plus.ispeedY) + 1;

  // 自定义属性
  this.iWidth = plus.iWidth;
  this.iHeight = plus.iHeight;
 }
 //先生出一个
 var greenBall = new Green(plus);
 this.greenArr.push(greenBall);

  this.creatTimer = setInterval(function(){
  var greenBall = new Green(plus);
  self.greenArr.push(greenBall)
 }, 2000);

 this.moveBall();
 },
 moveBall:function(){
 //创建定时器
 var self = this;
 // 保存window的this
 this.goTimer = setInterval(function(){

  for(var i = 0;i < self.greenArr.length;i ++){
  self.crashCheck(self.greenArr[i]);
  var newLeft = self.greenArr[i].ball.offsetLeft + self.greenArr[i].ispeedX ;
  var newTop = self.greenArr[i].ball.offsetTop + self.greenArr[i].ispeedY ;
  if(newLeft<0){
   self.greenArr[i].ispeedX *= -1;
  }
  else if(newLeft > (self.greenArr[i].iWidth - self.greenArr[i].ball.offsetWidth)){
   self.greenArr[i].ispeedX *= -1;
  }
  else if(newTop<0){
   self.greenArr[i].ispeedY *= -1;
   // self.greenArr[i].ispeedX *= -1;
  }
  else if(newTop > (self.greenArr[i].iHeight - self.greenArr[i].ball.offsetHeight)){
   self.greenArr[i].ispeedY *= -1;
   // self.greenArr[i].ispeedX *= -1;
  }
  // console.log((self.greenArr[i].iWidth - self.greenArr[i].ball.offsetWidth),(greenBall.iHeight - greenBall.ball.offsetHeight),greenBall.ispeedX,greenBall.ispeedY);
  self.greenArr[i].ball.style.left = newLeft + 'px';
  self.greenArr[i].ball.style.top = newTop + 'px';

  }
  
 },50)
 },

 dragRedBall:function(obj){
 var self = this;
 this.redBall.onmousedown = function(e){
  var lastX = e.pageX,
  lastY = e.pageY;
  // self.redBall.style.left = lastX;
  // self.redBall.style.top = lastY;
  document.onmousemove = function(e){
  var newX = e.pageX,
   newY = e.pageY;
  self.redBall.style.left = (newX - lastX) + self.redBall.offsetLeft + 'px';
  self.redBall.style.top = (newY - lastY) + self.redBall.offsetTop + 'px';
  // this.redBall.style.top = newY;
  lastX = newX;
  lastY = newY;

  //判断边界

  if(self.redBall.offsetLeft<0 && self.flag){
   alert("坚持了" + self.num + '秒' + "\n" + "游戏结束");
   self.flag = false;//加锁
   self.clearTimer();
   window.location.reload();
  }else if(self.redBall.offsetLeft>(obj.iWidth-self.redBall.offsetWidth) && self.flag){
   alert("坚持了" + self.num + '秒' + "\n" + "游戏结束");
   self.flag = false;
   self.clearTimer();
   window.location.reload();//刷新页面 游戏重开
  }else if(self.redBall.offsetTop<0 && self.flag){
   alert("坚持了" + self.num + '秒' + "\n" + "游戏结束");
   self.flag = false;
   self.clearTimer();
   window.location.reload();
  }else if(self.redBall.offsetTop>(obj.iHeight-self.redBall.offsetHeight ) && self.flag){
   alert("坚持了" + self.num + '秒' + "\n" + "游戏结束");
   self.flag = false;
   self.clearTimer();
   window.location.reload();
  }
  }

  this.onmouseup = function(){
  document.onmousemove = null;
  }
 }
 },

 crashCheck:function(greenBall){
 // var self = this;
 //效率球的圆心
 var greenX1 = greenBall.ball.offsetLeft + Math.floor(greenBall.ball.offsetWidth / 2),
  greenY1 = greenBall.ball.offsetTop + Math.floor(greenBall.ball.offsetHeight / 2),
 //小红求的圆心
  redX1 = this.redBall.offsetLeft + Math.floor(this.redBall.offsetWidth / 2),
  redY1 = this.redBall.offsetTop + Math.floor(this.redBall.offsetHeight / 2);
 // console.log(greenX1,greenY1,redX1,redY1);
 // debug成功
 //x1 - x2,y1 - y2 的绝对值
 var dx = Math.abs(greenX1 - redX1),
  dy = Math.abs(greenY1 - redY1);
 // console.log(dx,dy);
 var dis = Math.floor(Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2)));
 // console.log(dis);
 var R = greenBall.ball.offsetWidth/2 + this.redBall.offsetWidth/2;

 if(dis < R && this.flag){
  alert("坚持了" + this.num + '秒' + "\n" + "游戏结束");
  this.flag = false;
  this.clearTimer();
  window.location.reload();
 }

 }, 

 clearTimer:function(){
 clearInterval(this.goTimer);
 clearInterval(this.creatTimer);
 clearInterval(this.Timer);
 }
}

game.init();//入口函数

请各位大佬指正

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
深入研究React中setState源码
Nov 17 Javascript
Angular简单验证功能示例
Dec 22 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 #Javascript
vue实现购物车结算功能
Jun 18 #Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 #Javascript
javascript实现文字跑马灯效果
Jun 18 #Javascript
node.js +mongdb实现登录功能
Jun 18 #Javascript
VSCode launch.json配置详细教程
Jun 18 #Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 #Javascript
You might like
php header()函数使用说明
2008/07/10 PHP
php横向重复区域显示二法
2008/09/25 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
python求斐波那契数列示例分享
2014/02/14 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
浅析使用Python搭建http服务器
2019/10/27 Python
python实现字典嵌套列表取值
2019/12/16 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
P/Invoke是什么
2015/07/31 面试题
幼师自荐信
2013/10/26 职场文书
简历中个人求职的自我评价模板
2013/11/29 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
一份文言文检讨书
2014/09/13 职场文书
党员思想汇报材料
2014/12/19 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
小程序自定义轮播图圆点组件
2022/06/25 Javascript