JS实现躲避粒子小游戏
时间：2020-12-04 04:34:35 | 栏目：JavaScript代码 | 点击：次
本文实例为大家分享了JS实现躲避粒子小游戏的具体代码，供大家参考，具体内容如下
小项目的实战操作可以帮助我们更好的掌握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的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();//入口函数
请各位大佬指正