2021-11-18 10:29:59 +00:00
|
|
|
// 总条数
|
|
|
|
var num = 0;
|
|
|
|
var timer = null;
|
|
|
|
var actionTimer = null;
|
2021-11-19 07:30:08 +00:00
|
|
|
var moveTimer = null;
|
2021-11-23 09:29:35 +00:00
|
|
|
|
2021-11-18 10:29:59 +00:00
|
|
|
// 动作
|
2021-11-19 15:57:11 +00:00
|
|
|
var actionArr = ['dancing-left','dancing-right','dancing-down','dancing-up','dancing-wobble','dancing-wobble-right'];
|
2021-11-19 07:30:08 +00:00
|
|
|
// 人物位移动画
|
|
|
|
var moveArr = ['run-right','run-left','run-right-top','run-left-top','run-right-bottom','run-left-bottom'];
|
2021-11-18 10:29:59 +00:00
|
|
|
var peopleId = 0;
|
2021-11-19 13:54:50 +00:00
|
|
|
// 窗体宽度
|
|
|
|
var winWidth = $(window).width();
|
|
|
|
// 窗体高度
|
|
|
|
var winheight = $(window).height();
|
|
|
|
//控制速度1px
|
|
|
|
var speed = 1;
|
2021-11-19 15:57:11 +00:00
|
|
|
var upTimer = null,downTimer = null,leftTimer = null,rightTimer = null;
|
|
|
|
var suiDanTimer = null;
|
|
|
|
var startIndex = 0;
|
2021-11-23 08:45:28 +00:00
|
|
|
// 集体舞ji
|
2021-11-19 15:57:11 +00:00
|
|
|
function allDancing(dangcing){
|
|
|
|
if(dangcing!=''){
|
2021-11-23 01:56:09 +00:00
|
|
|
// clearInterval(upTimer);
|
|
|
|
// clearInterval(downTimer);
|
|
|
|
// clearInterval(leftTimer);
|
|
|
|
// clearInterval(rightTimer);
|
2021-11-19 15:57:11 +00:00
|
|
|
actionArr.forEach((item,index)=>{
|
|
|
|
var haveDan = $(`.people-img`).is(`.${item}`);
|
|
|
|
if(haveDan){
|
|
|
|
$(`.people-img`).removeClass(item);
|
|
|
|
// $(`.people-img`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
|
|
|
|
$(`.people-img`).addClass(dangcing);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
setTimeout(()=>{
|
|
|
|
startIndex = 0;
|
|
|
|
var allPeople = $('.dance-floor').find('.people-img').length;
|
|
|
|
suiDanTimer = setInterval(()=>{
|
|
|
|
if(startIndex==allPeople){
|
|
|
|
clearInterval(suiDanTimer);
|
|
|
|
} else {
|
|
|
|
startIndex++;
|
|
|
|
$(`.data${startIndex} .people-img`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
|
|
|
|
}
|
|
|
|
},3000)
|
|
|
|
},3000)
|
|
|
|
}
|
2021-11-18 10:29:59 +00:00
|
|
|
}
|
|
|
|
// 随机舞
|
2021-11-18 11:11:00 +00:00
|
|
|
function randomDancing(id){
|
2021-11-23 06:10:39 +00:00
|
|
|
var actionTimer = setInterval(()=>{
|
2021-11-18 11:11:00 +00:00
|
|
|
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(actionArr[Math.floor(Math.random()*actionArr.length)]);
|
|
|
|
}
|
|
|
|
})
|
2021-11-18 10:29:59 +00:00
|
|
|
},3000)
|
|
|
|
}
|
2021-11-23 01:56:09 +00:00
|
|
|
// 个人动作舞
|
2021-11-23 06:10:39 +00:00
|
|
|
function peopleAction(id,aevent){
|
|
|
|
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(aevent);
|
|
|
|
}
|
|
|
|
})
|
2021-11-23 01:56:09 +00:00
|
|
|
}
|
2021-11-19 07:30:08 +00:00
|
|
|
// 随机位移
|
|
|
|
function moveEv(id){
|
2021-11-19 13:54:50 +00:00
|
|
|
var typeMove = Math.floor(Math.random()*4);
|
|
|
|
switch (typeMove){
|
|
|
|
case 0:
|
2021-11-23 01:56:09 +00:00
|
|
|
upMove(id);
|
2021-11-19 13:54:50 +00:00
|
|
|
break;
|
|
|
|
case 1:
|
2021-11-23 01:56:09 +00:00
|
|
|
downMove(id);
|
2021-11-19 13:54:50 +00:00
|
|
|
break;
|
|
|
|
case 2:
|
2021-11-23 01:56:09 +00:00
|
|
|
leftMove(id);
|
2021-11-19 13:54:50 +00:00
|
|
|
break;
|
|
|
|
case 3:
|
2021-11-23 01:56:09 +00:00
|
|
|
rightMove(id);
|
2021-11-19 13:54:50 +00:00
|
|
|
break;
|
2021-11-19 07:30:08 +00:00
|
|
|
}
|
2021-11-19 13:54:50 +00:00
|
|
|
|
|
|
|
}
|
|
|
|
// 上
|
2021-11-23 01:56:09 +00:00
|
|
|
function upMove(id){
|
|
|
|
var odivu = document.getElementById(`${id}`);
|
|
|
|
var upTimer = setInterval(()=>{
|
|
|
|
if(odivu.offsetTop ==0){
|
2021-11-19 13:54:50 +00:00
|
|
|
clearInterval(upTimer);
|
2021-11-23 01:56:09 +00:00
|
|
|
downMove(id);
|
2021-11-19 13:54:50 +00:00
|
|
|
} else {
|
2021-11-23 01:56:09 +00:00
|
|
|
odivu.style.top = odivu.offsetTop-speed+'px';
|
2021-11-19 13:54:50 +00:00
|
|
|
}
|
|
|
|
},10)
|
|
|
|
}
|
|
|
|
// 下
|
2021-11-23 01:56:09 +00:00
|
|
|
function downMove(id){
|
|
|
|
console.log();
|
|
|
|
var odivd = document.getElementById(`${id}`);
|
2021-11-19 15:57:11 +00:00
|
|
|
downTimer = setInterval(()=>{
|
2021-11-23 01:56:09 +00:00
|
|
|
if(odivd.offsetTop >500){
|
2021-11-19 13:54:50 +00:00
|
|
|
clearInterval(downTimer);
|
2021-11-23 01:56:09 +00:00
|
|
|
upMove(id);
|
2021-11-19 13:54:50 +00:00
|
|
|
} else {
|
2021-11-23 01:56:09 +00:00
|
|
|
odivd.style.top = odivd.offsetTop+speed+'px';
|
2021-11-19 13:54:50 +00:00
|
|
|
}
|
|
|
|
},10)
|
|
|
|
}
|
|
|
|
// 左
|
2021-11-23 01:56:09 +00:00
|
|
|
function leftMove(id){
|
|
|
|
var odivl = document.getElementById(`${id}`);
|
2021-11-19 15:57:11 +00:00
|
|
|
leftTimer = setInterval(()=>{
|
2021-11-23 01:56:09 +00:00
|
|
|
if(odivl.offsetLeft == 0){
|
2021-11-19 13:54:50 +00:00
|
|
|
clearInterval(leftTimer);
|
2021-11-23 01:56:09 +00:00
|
|
|
rightMove(id);
|
2021-11-19 13:54:50 +00:00
|
|
|
} else {
|
2021-11-23 01:56:09 +00:00
|
|
|
odivl.style.left = odivl.offsetLeft-speed+'px';
|
2021-11-19 13:54:50 +00:00
|
|
|
}
|
|
|
|
},10)
|
|
|
|
}
|
2021-11-22 03:18:54 +00:00
|
|
|
// 右
|
2021-11-23 01:56:09 +00:00
|
|
|
function rightMove(id){
|
|
|
|
var odivr = document.getElementById(`${id}`);
|
2021-11-19 15:57:11 +00:00
|
|
|
rightTimer = setInterval(()=>{
|
2021-11-23 01:56:09 +00:00
|
|
|
if(odivr.offsetLeft > 1600){
|
2021-11-19 13:54:50 +00:00
|
|
|
clearInterval(rightTimer);
|
2021-11-23 01:56:09 +00:00
|
|
|
leftMove(id);
|
2021-11-19 13:54:50 +00:00
|
|
|
} else {
|
2021-11-23 01:56:09 +00:00
|
|
|
odivr.style.left = odivr.offsetLeft+speed+'px';
|
2021-11-19 13:54:50 +00:00
|
|
|
}
|
|
|
|
},10)
|
2021-11-19 07:30:08 +00:00
|
|
|
}
|
2021-11-18 10:29:59 +00:00
|
|
|
// 关闭说话
|
|
|
|
function closeSay(index){
|
|
|
|
$(`.data${index} .speak`).addClass("dn");
|
|
|
|
}
|
|
|
|
// 开启说话
|
|
|
|
function sayIng(index){
|
|
|
|
$(`.data${index} .speak`).removeClass("dn");
|
|
|
|
setTimeout(()=>{
|
|
|
|
closeSay(index);
|
2021-11-19 07:30:08 +00:00
|
|
|
},6000)
|
2021-11-18 10:29:59 +00:00
|
|
|
}
|
2021-11-19 15:57:11 +00:00
|
|
|
// 退出广场
|
|
|
|
function exitEv(id){
|
|
|
|
$(`${id}`).remove();
|
|
|
|
}
|
|
|
|
// 进入广场
|
2021-11-23 01:56:09 +00:00
|
|
|
function peopleObj(name,uid,say,action){
|
2021-11-18 10:29:59 +00:00
|
|
|
// 开始说话
|
2021-11-23 06:10:39 +00:00
|
|
|
sayIng(peopleId);
|
|
|
|
// 随机舞
|
|
|
|
randomDancing(peopleId);
|
2021-11-18 10:29:59 +00:00
|
|
|
let yspHtml = '';
|
|
|
|
let yspData = [
|
|
|
|
{
|
|
|
|
id:peopleId++,
|
2021-11-23 01:56:09 +00:00
|
|
|
uid:uid,
|
2021-11-19 13:54:50 +00:00
|
|
|
top:`${Math.random()*500}px`,
|
|
|
|
left:`${Math.random()*1500}px`,
|
2021-11-18 10:29:59 +00:00
|
|
|
name:name,//用户名
|
|
|
|
say:say,//说话内容
|
|
|
|
peopleImg:`people-img0${Math.floor(Math.random()*6+1)}`,//人物图片
|
|
|
|
ying_guang:`stick-0${Math.floor(Math.random()*5+1)}`,//荧光棒
|
2021-11-19 07:30:08 +00:00
|
|
|
dancin:action,
|
2021-11-18 10:29:59 +00:00
|
|
|
}
|
|
|
|
]
|
|
|
|
$.each(yspData, function (commentIndex, comment) {
|
|
|
|
yspHtml += `
|
2021-11-23 06:44:56 +00:00
|
|
|
<div id="${comment.uid}" class="dance-people data${peopleId}" style="top: ${comment.top}; left: ${comment.left};">
|
2021-11-19 15:57:11 +00:00
|
|
|
<div class="speak ">${comment.say}</div>
|
2021-11-18 10:29:59 +00:00
|
|
|
<div class="people-img ${comment.peopleImg} ${comment.dancin}">
|
|
|
|
<div class="stick ${comment.ying_guang}"></div>
|
|
|
|
<div class="people-name ">${comment.name}</div>
|
|
|
|
</div>
|
|
|
|
</div>`
|
|
|
|
});
|
|
|
|
$('.dance-floor').prepend(yspHtml);
|
2021-11-23 01:56:09 +00:00
|
|
|
moveEv(uid);
|
2021-11-19 15:57:11 +00:00
|
|
|
// 执行退出事件
|
|
|
|
// exitEv(`#peopleId${peopleId-1}`)
|
2021-11-18 10:29:59 +00:00
|
|
|
}
|
|
|
|
$(function(){
|
2021-11-19 15:57:11 +00:00
|
|
|
// 领舞者随机动效
|
|
|
|
setInterval(()=>{
|
|
|
|
actionArr.forEach((item,index)=>{
|
|
|
|
var haveDan = $(`.leading-dancer`).is(`.${item}`);
|
|
|
|
if(haveDan){
|
|
|
|
$(`.leading-dancer`).removeClass(item);
|
|
|
|
$(`.leading-dancer`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},4000)
|
2021-11-23 08:21:20 +00:00
|
|
|
// 自动切歌
|
2021-11-23 08:45:28 +00:00
|
|
|
var audio=document.getElementById('music');
|
|
|
|
if(audio){
|
|
|
|
audio.loop = false;
|
|
|
|
audio.addEventListener('ended', function () {
|
2021-11-23 08:21:20 +00:00
|
|
|
changeMusic()
|
2021-11-23 08:45:28 +00:00
|
|
|
}, false);
|
|
|
|
}
|
2021-11-23 09:29:35 +00:00
|
|
|
|
2021-11-19 15:57:11 +00:00
|
|
|
|
2021-11-19 07:30:08 +00:00
|
|
|
})
|