 小项目的实战操作可以帮助我们更好的掌握javascript躲避例子游戏规则：拖拽红球躲避绿球碰撞，拖拽过程不能触碰容器内壁，以赢得游戏持久度

页面效果：

实现过程

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

结构搭建

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

样式修饰

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

动态行为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的thisthis.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();//入口函数

（请各位大佬指正）

原生JS实现躲避粒子小游戏相关推荐

原生JS实现的h5小游戏-植物大战僵尸
代码地址如下: http://www.demodashi.com/demo/12755.html 项目介绍本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解, ...
html flappybird小游戏代码,原生js实现Flappy Bird小游戏
这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习. html结构 css样式 #game { width: 800px; height: 600px; border: 1px s ...
原生js实现一个连连看小游戏（一）
前几天使用原生的js写了一个连连看小游戏,地址:连连看(js),基本功能都实现了,运行截图为: 根据游戏规则获取开发思路创建棋盘格生成随机不重复数字映射到棋盘格鼠标点击事件寻路,无通路,则到 ...
使用前端原生 js，贪吃蛇小游戏
好久好久,真的是好久好久没来写过了,因为最近有点小忙.不过即使是忙,也也还是写了两个小游戏,其中一个就是这个,贪吃蛇啦. 算是一个小练手了,这个是在有点太简单了,只是第一次写这种小游戏,还是零零星星花 ...
原生js实现贪食蛇小游戏
先不多说先上图下面是代码部分(这里你可以根据需要改变蛇头和身体还有食物的图片,然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈,请不要在意哈), ...
linux脚本石英钟,原生JS实现的简单小钟表功能示例
本文实例讲述了原生JS实现的简单小钟表功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整代码: www.jb51.net 钟表 body { background-color:#00A2 ...
php 设计五子棋游戏,基于js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下效果展示: 源码展示: 五子棋 * { margin: 0; padding: 0; } body { ma ...
利用js写的见缝插针小游戏
利用js写的见缝插针小游戏今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 游戏截图失败时代码如下 js代码 index.js 测试游 ...
JS实现简单农场小游戏
JS实现简单农场小游戏简介效果展示代码实现在线预览简介最近抽空写了一个简单的农场小游戏,比较简陋,目的只是为了练习js开发能力. 游戏界面顶部包含昵称.经验值.等级和金币信息展示.经验的获 ...

原生JS实现躲避粒子小游戏