本文实例为大家分享了JS实现躲避粒子小游戏的具体代码，供大家参考，具体内容如下小项目的实战操作可以帮助我们更好的掌握javascript躲避例子游戏规则：拖拽红球躲避绿球碰撞，拖拽过程不能触碰容器内壁，以赢得游戏持久度页面效果：实现过程实现过程不积小流，无以成江海。
将页面效果的实现细分成小步实现：页面结构的构建，样式修饰，js中小绿球在容器顶部随机位置生成、小绿球非水平非垂直方向的运动、小绿球碰撞容器内壁后弹性运动、生成多个小绿球、拖拽红球、红球的边界判断、红球与绿球的碰撞检测、“坚持n秒”的定时器实现、清除定时器结构搭建结构搭建创建文本、容器和红球，在此项目下小绿球是动态创建生成的；样式修饰样式修饰为创建的结构设置样式修饰动态行为Javascript动态行为Javascript采用面向对象的编程思维1.小绿球在容器顶部随机位置生成1.小绿球在容器顶部随机位置生成1.小绿球在容器顶部随机位置生成用random函数生成 [0,1）内的随机小数再乘以小绿球在水平方向的运动范围，最后floor求整并将整数作为初始时小绿球与容器左壁的距离2.小绿球非水平非垂直方向的运动2.小绿球非水平非垂直方向的运动2.小绿球非水平非垂直方向的运动设置X方向的速度值和Y方向的速度值，与（1）相同，采用random函数乘以初始化XY方向的速度值就可以得到随机方向
创建定时器获取并更新小绿球与容器的左壁和上壁的距离以实现小球运动3.小绿球碰撞容器内壁后弹性运动3.小绿球碰撞容器内壁后弹性运动3.小绿球碰撞容器内壁后弹性运动小绿球的边界判断，碰撞左壁和右壁时X方向的速度 * -1；碰撞上壁和下壁时Y方向的速度 * -14.生成多个小绿球4.生成多个小绿球4.生成多个小绿球通过定时器不断调用构造函数生成多个小绿球，并置于一个数组中5.拖拽红球5.拖拽红球5.拖拽红球为红球添加点击、拖动、松开事件。记住红球上一页面停留位置，与现在页面停留位置做差得到红球在XY方向的移动距离，分别加上上一停留位置红球与容器左壁和上壁的距离得到现在红球与容器左壁和上壁的距离，不断循环更新上次停留位置和现在停留位置即可6.红球的边界判断6.红球的边界判断6.红球的边界判断红球和绿球的移动范围都是容器的宽度高度减去自身球面的宽度和高度。触碰边界则重载页面，为了避免页面重载时出现持续触碰边界的情况加了锁7.红球与绿球的碰撞检测7.红球与绿球的碰撞检测7.红球与绿球的碰撞检测判断两圆心之间的距离是否小于两圆半径之和8.“坚持n秒”的定时器实现8.“坚持n秒”的定时器实现8.“坚持n秒”的定时器实现定时器计时并修改span标签的innerHTML9.清除定时器9.清除定时器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();//入口函数
/*
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();//入口函数请各位大佬指正以上就是本文的全部内容，希望对大家的学习有所帮助。