随机位移
parent
40231a05c3
commit
9b3a9f9070
85
js/custom.js
85
js/custom.js
|
|
@ -24,10 +24,10 @@ var startIndex = 0;
|
|||
// 集体舞
|
||||
function allDancing(dangcing){
|
||||
if(dangcing!=''){
|
||||
clearInterval(upTimer);
|
||||
clearInterval(downTimer);
|
||||
clearInterval(leftTimer);
|
||||
clearInterval(rightTimer);
|
||||
// clearInterval(upTimer);
|
||||
// clearInterval(downTimer);
|
||||
// clearInterval(leftTimer);
|
||||
// clearInterval(rightTimer);
|
||||
actionArr.forEach((item,index)=>{
|
||||
var haveDan = $(`.people-img`).is(`.${item}`);
|
||||
if(haveDan){
|
||||
|
|
@ -37,7 +37,6 @@ function allDancing(dangcing){
|
|||
}
|
||||
})
|
||||
setTimeout(()=>{
|
||||
console.log('关闭集体舞');
|
||||
clearInterval(actionTimer);
|
||||
startIndex = 0;
|
||||
var allPeople = $('.dance-floor').find('.people-img').length;
|
||||
|
|
@ -65,67 +64,87 @@ function randomDancing(id){
|
|||
})
|
||||
},3000)
|
||||
}
|
||||
// 个人动作舞
|
||||
function peopleAction(id,actionVal){
|
||||
actionTimer = setInterval(()=>{
|
||||
actionArr.forEach((item,index)=>{
|
||||
// var chooseIdex = Math.floor(Math.random()*num);
|
||||
var haveDan = $(`.data${id} .people-img`).is(`.${item}`);
|
||||
if(haveDan){
|
||||
$(`.data${id} .people-img`).removeClass(item);
|
||||
$(`.data${id} .people-img`).addClass(actionVal);
|
||||
}
|
||||
})
|
||||
},3000)
|
||||
}
|
||||
// 随机位移
|
||||
function moveEv(id){
|
||||
var odiv = document.getElementById(`peopleId${id}`);
|
||||
console.log(id,'9999999');
|
||||
// var odiv = document.getElementById(`${id}`);
|
||||
var typeMove = Math.floor(Math.random()*4);
|
||||
console.log(typeMove,'typeMove');
|
||||
switch (typeMove){
|
||||
case 0:
|
||||
upMove(odiv);
|
||||
upMove(id);
|
||||
break;
|
||||
case 1:
|
||||
downMove(odiv);
|
||||
downMove(id);
|
||||
break;
|
||||
case 2:
|
||||
leftMove(odiv);
|
||||
leftMove(id);
|
||||
break;
|
||||
case 3:
|
||||
rightMove(odiv);
|
||||
rightMove(id);
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
// 上
|
||||
function upMove(obj){
|
||||
upTimer = setInterval(()=>{
|
||||
if(obj.offsetTop < 100){
|
||||
function upMove(id){
|
||||
var odivu = document.getElementById(`${id}`);
|
||||
var upTimer = setInterval(()=>{
|
||||
if(odivu.offsetTop ==0){
|
||||
clearInterval(upTimer);
|
||||
downMove(obj);
|
||||
downMove(id);
|
||||
} else {
|
||||
obj.style.top = obj.offsetTop-speed+'px';
|
||||
odivu.style.top = odivu.offsetTop-speed+'px';
|
||||
}
|
||||
},10)
|
||||
}
|
||||
// 下
|
||||
function downMove(obj){
|
||||
function downMove(id){
|
||||
console.log();
|
||||
var odivd = document.getElementById(`${id}`);
|
||||
downTimer = setInterval(()=>{
|
||||
if(obj.offsetTop > 500){
|
||||
if(odivd.offsetTop >500){
|
||||
clearInterval(downTimer);
|
||||
upMove(obj);
|
||||
upMove(id);
|
||||
} else {
|
||||
obj.style.top = obj.offsetTop+speed+'px';
|
||||
odivd.style.top = odivd.offsetTop+speed+'px';
|
||||
}
|
||||
},10)
|
||||
}
|
||||
// 左
|
||||
function leftMove(obj){
|
||||
function leftMove(id){
|
||||
var odivl = document.getElementById(`${id}`);
|
||||
leftTimer = setInterval(()=>{
|
||||
if(obj.offsetLeft > 1500){
|
||||
if(odivl.offsetLeft == 0){
|
||||
clearInterval(leftTimer);
|
||||
rightMove(obj);
|
||||
rightMove(id);
|
||||
} else {
|
||||
obj.style.left = obj.offsetLeft+speed+'px';
|
||||
odivl.style.left = odivl.offsetLeft-speed+'px';
|
||||
}
|
||||
},10)
|
||||
}
|
||||
// 右
|
||||
function rightMove(obj){
|
||||
function rightMove(id){
|
||||
var odivr = document.getElementById(`${id}`);
|
||||
rightTimer = setInterval(()=>{
|
||||
if(obj.offsetLeft < 500){
|
||||
if(odivr.offsetLeft > 1600){
|
||||
clearInterval(rightTimer);
|
||||
leftMove(obj);
|
||||
leftMove(id);
|
||||
} else {
|
||||
obj.style.left = obj.offsetLeft-speed+'px';
|
||||
odivr.style.left = odivr.offsetLeft+speed+'px';
|
||||
}
|
||||
},10)
|
||||
}
|
||||
|
|
@ -145,14 +164,15 @@ function exitEv(id){
|
|||
$(`${id}`).remove();
|
||||
}
|
||||
// 进入广场
|
||||
function peopleObj(name,say,action,move){
|
||||
function peopleObj(name,uid,say,action){
|
||||
// 开始说话
|
||||
sayIng(peopleId);
|
||||
randomDancing(peopleId);
|
||||
sayIng(uid);
|
||||
randomDancing(uid);
|
||||
let yspHtml = '';
|
||||
let yspData = [
|
||||
{
|
||||
id:peopleId++,
|
||||
uid:uid,
|
||||
top:`${Math.random()*500}px`,
|
||||
left:`${Math.random()*1500}px`,
|
||||
name:name,//用户名
|
||||
|
|
@ -160,12 +180,11 @@ function peopleObj(name,say,action,move){
|
|||
peopleImg:`people-img0${Math.floor(Math.random()*6+1)}`,//人物图片
|
||||
ying_guang:`stick-0${Math.floor(Math.random()*5+1)}`,//荧光棒
|
||||
dancin:action,
|
||||
peopleMove:move
|
||||
}
|
||||
]
|
||||
$.each(yspData, function (commentIndex, comment) {
|
||||
yspHtml += `
|
||||
<div id="peopleId${comment.id}" class="dance-people data${comment.id} " style="top: ${comment.top}; left: ${comment.left};">
|
||||
<div id="${comment.uid}" class="dance-people data${comment.uid}" style="top: ${comment.top}; left: ${comment.left};">
|
||||
<div class="speak ">${comment.say}</div>
|
||||
<div class="people-img ${comment.peopleImg} ${comment.dancin}">
|
||||
<div class="stick ${comment.ying_guang}"></div>
|
||||
|
|
@ -174,7 +193,7 @@ function peopleObj(name,say,action,move){
|
|||
</div>`
|
||||
});
|
||||
$('.dance-floor').prepend(yspHtml);
|
||||
moveEv(peopleId-1);
|
||||
moveEv(uid);
|
||||
// 执行退出事件
|
||||
// exitEv(`#peopleId${peopleId-1}`)
|
||||
}
|
||||
|
|
|
|||
31
js/handle.js
31
js/handle.js
|
|
@ -110,12 +110,13 @@ function receiveMessage(event)
|
|||
|
||||
// uid是否存在 不存在则存入uidObj
|
||||
let isNew = 0
|
||||
// console.log(uidObj[data.uid],'uidObj[data.uid]');
|
||||
if (!uidObj[data.uid]) {
|
||||
isNew = 1
|
||||
uidObj[data.uid] = data.uname
|
||||
}
|
||||
|
||||
console.log(isNew, data.uname + ' 是否存在')
|
||||
// console.log(isNew, data.uname + ' 是否存在')
|
||||
|
||||
// custom.js中 每条弹幕的处理 放到了此处
|
||||
// -------------------- 每条弹幕处理 begin -----------------------
|
||||
|
|
@ -127,7 +128,7 @@ function receiveMessage(event)
|
|||
let isLeader = data.uname == leaderInfo ? 1 : 0
|
||||
// 给弹幕加上随机事件
|
||||
let mathIndex = Math.floor(Math.random()*15)
|
||||
console.log(mathIndex, '随机因子')
|
||||
// console.log(mathIndex, '随机因子')
|
||||
let randomEvent = eventTextList[mathIndex] ? eventTextList[mathIndex] : ''
|
||||
// TODO 测试后 删除弹幕随机附加事件
|
||||
let dm = {text: data.danmaku, uid: data.uid, uname: data.uname,
|
||||
|
|
@ -145,15 +146,25 @@ function receiveMessage(event)
|
|||
leader.event = dm.event
|
||||
}
|
||||
|
||||
console.log(dm, '弹幕')
|
||||
console.log(leader, '当前领舞')
|
||||
console.log(leaderRandomEvent, '领舞随机事件')
|
||||
|
||||
|
||||
// console.log(dm, '弹幕')
|
||||
// console.log(leader, '当前领舞')
|
||||
// console.log(leaderRandomEvent, '领舞随机事件')
|
||||
let actionIndex = Math.floor(Math.random()*actionArr.length);
|
||||
let moveIndex = Math.floor(Math.random()*moveArr.length);
|
||||
if(dm.is_new==0){
|
||||
peopleObj(dm.uname,dm.text,actionArr[actionIndex],moveArr[moveIndex]);
|
||||
if(dm.is_new==1){
|
||||
peopleObj(dm.uname,dm.uid,dm.text,actionArr[actionIndex]);
|
||||
} else {
|
||||
var userId = $('.dance-people').attr('id');
|
||||
if(dm.uid==userId){
|
||||
$(`#${userId} .speak`).html(dm.text);
|
||||
$(`#${userId} .speak`).removeClass("dn");
|
||||
setTimeout(()=>{
|
||||
$(`#${userId} .speak`).addClass("dn");
|
||||
},3000)
|
||||
peopleAction(`${userId}`,dm.event);
|
||||
// upMove();//上移
|
||||
// downMove();//下移
|
||||
}
|
||||
}
|
||||
num++;
|
||||
|
||||
|
|
@ -162,7 +173,7 @@ function receiveMessage(event)
|
|||
$('.ground-bg').addClass(leader.event);
|
||||
} else {
|
||||
setTimeout(()=>{
|
||||
console.log(leader.event);
|
||||
// console.log(leader.event);
|
||||
// 显示领舞说话
|
||||
if (leader.text.length>0) {
|
||||
$('.speak-pink').text(leader.text);
|
||||
|
|
|
|||
Loading…
Reference in New Issue