squareDancing/js/custom.js

219 lines
5.3 KiB
JavaScript

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