chen
/
squareDancing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

随机位移

master
chen 2021-11-23 09:56:09 +08:00
parent 40231a05c3
commit 9b3a9f9070
2 changed files with 73 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
js/custom.js
View File

@ -24,10 +24,10 @@ var startIndex = 0;
// 集体舞 // 集体舞
function allDancing(dangcing){ function allDancing(dangcing){
if(dangcing!=''){ if(dangcing!=''){
clearInterval(upTimer); // clearInterval(upTimer);
clearInterval(downTimer); // clearInterval(downTimer);
clearInterval(leftTimer); // clearInterval(leftTimer);
clearInterval(rightTimer); // clearInterval(rightTimer);
actionArr.forEach((item,index)=>{ actionArr.forEach((item,index)=>{
var haveDan = $(`.people-img`).is(`.${item}`); var haveDan = $(`.people-img`).is(`.${item}`);
if(haveDan){ if(haveDan){
@ -37,7 +37,6 @@ function allDancing(dangcing){
} }
}) })
setTimeout(()=>{ setTimeout(()=>{
console.log('关闭集体舞');
clearInterval(actionTimer); clearInterval(actionTimer);
startIndex = 0; startIndex = 0;
var allPeople = $('.dance-floor').find('.people-img').length; var allPeople = $('.dance-floor').find('.people-img').length;
@ -65,67 +64,87 @@ function randomDancing(id){
}) })
},3000) },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){ 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); var typeMove = Math.floor(Math.random()*4);
console.log(typeMove,'typeMove');
switch (typeMove){ switch (typeMove){
case 0: case 0:
upMove(odiv); upMove(id);
break; break;
case 1: case 1:
downMove(odiv); downMove(id);
break; break;
case 2: case 2:
leftMove(odiv); leftMove(id);
break; break;
case 3: case 3:
rightMove(odiv); rightMove(id);
break; break;
} }
} }
// 上 // 上
function upMove(obj){ function upMove(id){
upTimer = setInterval(()=>{ var odivu = document.getElementById(`${id}`);
if(obj.offsetTop < 100){ var upTimer = setInterval(()=>{
if(odivu.offsetTop ==0){
clearInterval(upTimer); clearInterval(upTimer);
downMove(obj); downMove(id);
} else { } else {
obj.style.top = obj.offsetTop-speed+'px'; odivu.style.top = odivu.offsetTop-speed+'px';
} }
},10) },10)
} }
// 下 // 下
function downMove(obj){ function downMove(id){
console.log();
var odivd = document.getElementById(`${id}`);
downTimer = setInterval(()=>{ downTimer = setInterval(()=>{
if(obj.offsetTop > 500){ if(odivd.offsetTop >500){
clearInterval(downTimer); clearInterval(downTimer);
upMove(obj); upMove(id);
} else { } else {
obj.style.top = obj.offsetTop+speed+'px'; odivd.style.top = odivd.offsetTop+speed+'px';
} }
},10) },10)
} }
// 左 // 左
function leftMove(obj){ function leftMove(id){
var odivl = document.getElementById(`${id}`);
leftTimer = setInterval(()=>{ leftTimer = setInterval(()=>{
if(obj.offsetLeft > 1500){ if(odivl.offsetLeft == 0){
clearInterval(leftTimer); clearInterval(leftTimer);
rightMove(obj); rightMove(id);
} else { } else {
obj.style.left = obj.offsetLeft+speed+'px'; odivl.style.left = odivl.offsetLeft-speed+'px';
} }
},10) },10)
} }
// 右 // 右
function rightMove(obj){ function rightMove(id){
var odivr = document.getElementById(`${id}`);
rightTimer = setInterval(()=>{ rightTimer = setInterval(()=>{
if(obj.offsetLeft < 500){ if(odivr.offsetLeft > 1600){
clearInterval(rightTimer); clearInterval(rightTimer);
leftMove(obj); leftMove(id);
} else { } else {
obj.style.left = obj.offsetLeft-speed+'px'; odivr.style.left = odivr.offsetLeft+speed+'px';
} }
},10) },10)
} }
@ -145,14 +164,15 @@ function exitEv(id){
$(`${id}`).remove(); $(`${id}`).remove();
} }
// 进入广场 // 进入广场
function peopleObj(name,say,action,move){ function peopleObj(name,uid,say,action){
// 开始说话 // 开始说话
sayIng(peopleId); sayIng(uid);
randomDancing(peopleId); randomDancing(uid);
let yspHtml = ''; let yspHtml = '';
let yspData = [ let yspData = [
{ {
id:peopleId++, id:peopleId++,
uid:uid,
top:`${Math.random()*500}px`, top:`${Math.random()*500}px`,
left:`${Math.random()*1500}px`, left:`${Math.random()*1500}px`,
name:name,//用户名 name:name,//用户名
@ -160,12 +180,11 @@ function peopleObj(name,say,action,move){
peopleImg:`people-img0${Math.floor(Math.random()*6+1)}`,//人物图片 peopleImg:`people-img0${Math.floor(Math.random()*6+1)}`,//人物图片
ying_guang:`stick-0${Math.floor(Math.random()*5+1)}`,//荧光棒 ying_guang:`stick-0${Math.floor(Math.random()*5+1)}`,//荧光棒
dancin:action, dancin:action,
peopleMove:move
} }
] ]
$.each(yspData, function (commentIndex, comment) { $.each(yspData, function (commentIndex, comment) {
yspHtml += ` 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="speak ">${comment.say}</div>
<div class="people-img ${comment.peopleImg} ${comment.dancin}"> <div class="people-img ${comment.peopleImg} ${comment.dancin}">
<div class="stick ${comment.ying_guang}"></div> <div class="stick ${comment.ying_guang}"></div>
@ -174,7 +193,7 @@ function peopleObj(name,say,action,move){
</div>` </div>`
}); });
$('.dance-floor').prepend(yspHtml); $('.dance-floor').prepend(yspHtml);
moveEv(peopleId-1); moveEv(uid);
// 执行退出事件 // 执行退出事件
// exitEv(`#peopleId${peopleId-1}`) // exitEv(`#peopleId${peopleId-1}`)
} }

31
js/handle.js
View File

@ -110,12 +110,13 @@ function receiveMessage(event)
// uid是否存在 不存在则存入uidObj // uid是否存在 不存在则存入uidObj
let isNew = 0 let isNew = 0
// console.log(uidObj[data.uid],'uidObj[data.uid]');
if (!uidObj[data.uid]) { if (!uidObj[data.uid]) {
isNew = 1 isNew = 1
uidObj[data.uid] = data.uname uidObj[data.uid] = data.uname
} }
console.log(isNew, data.uname + ' 是否存在') // console.log(isNew, data.uname + ' 是否存在')
// custom.js中 每条弹幕的处理 放到了此处 // custom.js中 每条弹幕的处理 放到了此处
// -------------------- 每条弹幕处理 begin ----------------------- // -------------------- 每条弹幕处理 begin -----------------------
@ -127,7 +128,7 @@ function receiveMessage(event)
let isLeader = data.uname == leaderInfo ? 1 : 0 let isLeader = data.uname == leaderInfo ? 1 : 0
// 给弹幕加上随机事件 // 给弹幕加上随机事件
let mathIndex = Math.floor(Math.random()*15) let mathIndex = Math.floor(Math.random()*15)
console.log(mathIndex, '随机因子') // console.log(mathIndex, '随机因子')
let randomEvent = eventTextList[mathIndex] ? eventTextList[mathIndex] : '' let randomEvent = eventTextList[mathIndex] ? eventTextList[mathIndex] : ''
// TODO 测试后 删除弹幕随机附加事件 // TODO 测试后 删除弹幕随机附加事件
let dm = {text: data.danmaku, uid: data.uid, uname: data.uname, let dm = {text: data.danmaku, uid: data.uid, uname: data.uname,
@ -145,15 +146,25 @@ function receiveMessage(event)
leader.event = dm.event leader.event = dm.event
} }
console.log(dm, '弹幕') // console.log(dm, '弹幕')
console.log(leader, '当前领舞') // console.log(leader, '当前领舞')
console.log(leaderRandomEvent, '领舞随机事件') // console.log(leaderRandomEvent, '领舞随机事件')
let actionIndex = Math.floor(Math.random()*actionArr.length); let actionIndex = Math.floor(Math.random()*actionArr.length);
let moveIndex = Math.floor(Math.random()*moveArr.length); let moveIndex = Math.floor(Math.random()*moveArr.length);
if(dm.is_new==0){ if(dm.is_new==1){
peopleObj(dm.uname,dm.text,actionArr[actionIndex],moveArr[moveIndex]); 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++; num++;
@ -162,7 +173,7 @@ function receiveMessage(event)
$('.ground-bg').addClass(leader.event); $('.ground-bg').addClass(leader.event);
} else { } else {
setTimeout(()=>{ setTimeout(()=>{
console.log(leader.event); // console.log(leader.event);
// 显示领舞说话 // 显示领舞说话
if (leader.text.length>0) { if (leader.text.length>0) {
$('.speak-pink').text(leader.text); $('.speak-pink').text(leader.text);