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 相关文章推荐
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
jquery radio 操作代码
Mar 16 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
vue实现数据控制视图的原理解析
Jan 07 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
PHP最常用的正则表达式
2017/02/13 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
python将ip地址转换成整数的方法
2015/03/17 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
体育教师自我鉴定
2014/02/12 职场文书
党风廉设责任书
2014/04/16 职场文书
安全责任书范文
2014/08/25 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
优秀教师推荐材料
2014/12/16 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
工作简历的自我评价
2019/05/16 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
Linux中各个目录的作用与内容
2022/06/28 Servers
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android