353 lines
9.9 KiB
JavaScript
353 lines
9.9 KiB
JavaScript
const { to, set } = gsap;
|
|
|
|
document.querySelectorAll('.loading').forEach(loading => {
|
|
loading.count = 0
|
|
let lines = to(loading, {
|
|
keyframes: [{
|
|
'--line-top-x': '-100%',
|
|
'--line-bottom-x': '-200%',
|
|
onComplete() {
|
|
set(loading, {
|
|
'--line-top-x': '200%',
|
|
'--line-bottom-x': '100%',
|
|
})
|
|
}
|
|
}, {
|
|
'--line-top-x': '0%',
|
|
'--line-bottom-x': '0%'
|
|
}],
|
|
duration: 1,
|
|
repeat: -1
|
|
})
|
|
|
|
const keyboard = document.querySelector('#keyboard')
|
|
const arrowUp = keyboard.querySelector('.up')
|
|
const arrowLeft = keyboard.querySelector('.left')
|
|
const arrowRight = keyboard.querySelector('.right')
|
|
const arrowDown = keyboard.querySelector('.down')
|
|
const spanHidden = keyboard.querySelector('span')
|
|
|
|
document.body.onkeyup = e => {
|
|
if(e.keyCode == 32 || e.keyCode == 38) {
|
|
jump(loading, lines)
|
|
arrowUp.classList.add('pressed')
|
|
setTimeout(() => arrowUp.classList.remove('pressed'), 400)
|
|
}
|
|
if(e.keyCode == 40 || e.keyCode == 39 || e.keyCode == 37) {
|
|
if(!loading.ouch) {
|
|
reset(loading, lines)
|
|
}
|
|
keyboard.querySelector('.pressed').classList.remove('pressed')
|
|
}
|
|
if(loading.ouch && (e.keyCode == 32 || e.keyCode == 38)) {
|
|
loading.ouch = false
|
|
reset(loading, lines)
|
|
}
|
|
}
|
|
|
|
document.body.onkeydown = e => {
|
|
if(e.keyCode == 39){
|
|
fast(loading, lines)
|
|
arrowRight.classList.add('pressed')
|
|
}
|
|
if(e.keyCode == 40){
|
|
down(loading, lines)
|
|
arrowDown.classList.add('pressed')
|
|
}
|
|
if(e.keyCode == 37) {
|
|
slow(loading, lines)
|
|
arrowLeft.classList.add('pressed')
|
|
}
|
|
if(e.keyCode == 67) {
|
|
fall(loading, lines)
|
|
spanHidden.classList.add('pressed')
|
|
setTimeout(() => spanHidden.classList.remove('pressed'), 400)
|
|
}
|
|
}
|
|
|
|
if(('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)) {
|
|
spanHidden.innerHTML = "Please don't click here"
|
|
}
|
|
|
|
arrowUp.addEventListener('click', e => {
|
|
if(loading.ouch) {
|
|
loading.ouch = false
|
|
reset(loading, lines)
|
|
}
|
|
jump(loading, lines)
|
|
})
|
|
arrowLeft.addEventListener('pointerdown', e => slow(loading, lines))
|
|
arrowRight.addEventListener('pointerdown', e => fast(loading, lines))
|
|
arrowDown.addEventListener('pointerdown', e => down(loading, lines))
|
|
spanHidden.addEventListener('click', e => fall(loading, lines))
|
|
|
|
arrowLeft.addEventListener('pointerup', e => !loading.ouch && reset(loading, lines))
|
|
arrowRight.addEventListener('pointerup', e => !loading.ouch && reset(loading, lines))
|
|
arrowDown.addEventListener('pointerup', e => !loading.ouch && reset(loading, lines))
|
|
})
|
|
|
|
const jump = (loading, lines) => {
|
|
if(loading.active) {
|
|
return
|
|
}
|
|
loading.active = true
|
|
loading.count += 1
|
|
if(loading.count > 3) {
|
|
document.querySelector('#keyboard span').classList.remove('hide')
|
|
}
|
|
lines.timeScale(2)
|
|
to(loading, {
|
|
keyframes: [{
|
|
'--skate-x': '-12px',
|
|
duration: .3
|
|
}, {
|
|
'--skate-x': '12px',
|
|
duration: .5
|
|
}, {
|
|
'--skate-x': '0px',
|
|
duration: .5
|
|
}]
|
|
})
|
|
to(loading, {
|
|
keyframes: [{
|
|
'--skate-y': '-32px',
|
|
duration: .4,
|
|
delay: .2
|
|
}, {
|
|
'--skate-y': '0px',
|
|
duration: .2
|
|
}]
|
|
})
|
|
to(loading, {
|
|
keyframes: [{
|
|
duration: .2,
|
|
delay: .2,
|
|
'--arm-front': '40deg',
|
|
'--arm-front-end': '-12deg',
|
|
'--arm-back': '172deg',
|
|
'--arm-back-end': '38deg',
|
|
'--leg-front': '-8deg',
|
|
'--leg-front-end': '102deg',
|
|
'--leg-back': '103deg',
|
|
'--leg-back-end': '-16deg',
|
|
'--board-r': '-40deg',
|
|
'--body-r': '7deg',
|
|
'--body-y': '-90%',
|
|
'--body-x': '-160%',
|
|
}, {
|
|
duration: .2,
|
|
'--arm-front': '24deg',
|
|
'--arm-front-end': '-48deg',
|
|
'--arm-back': '172deg',
|
|
'--arm-back-end': '15deg',
|
|
'--leg-front': '22deg',
|
|
'--leg-front-end': '55deg',
|
|
'--leg-back': '142deg',
|
|
'--leg-back-end': '-58deg',
|
|
'--board-r': '3deg',
|
|
'--body-r': '12deg',
|
|
'--body-y': '-56%',
|
|
'--body-x': '-60%',
|
|
}, {
|
|
duration: .2,
|
|
'--arm-front': '24deg',
|
|
'--arm-front-end': '-48deg',
|
|
'--arm-back': '164deg',
|
|
'--arm-back-end': '-36deg',
|
|
'--leg-front': '-4deg',
|
|
'--leg-front-end': '66deg',
|
|
'--leg-back': '111deg',
|
|
'--leg-back-end': '-36deg',
|
|
'--board-r': '0deg',
|
|
'--body-r': '34deg',
|
|
'--body-y': '-53%',
|
|
'--body-x': '-28%',
|
|
}, {
|
|
'--arm-front': '24deg',
|
|
'--arm-front-end': '-48deg',
|
|
'--arm-back': '164deg',
|
|
'--arm-back-end': '-50deg',
|
|
'--leg-front': '40deg',
|
|
'--leg-front-end': '30deg',
|
|
'--leg-back': '120deg',
|
|
'--leg-back-end': '-36deg',
|
|
'--board-r': '0deg',
|
|
'--body-r': '12deg',
|
|
'--body-y': '-65%',
|
|
'--body-x': '-85%',
|
|
duration: .4,
|
|
onComplete() {
|
|
loading.active = false
|
|
lines.timeScale(1)
|
|
}
|
|
}]
|
|
})
|
|
}
|
|
|
|
const fast = (loading, lines) => {
|
|
if(loading.active) {
|
|
return
|
|
}
|
|
loading.active = true
|
|
loading.count += 1
|
|
if(loading.count > 3) {
|
|
document.querySelector('#keyboard span').classList.remove('hide')
|
|
}
|
|
lines.timeScale(2.5)
|
|
to(loading, {
|
|
'--skate-x': '12px',
|
|
duration: .3
|
|
})
|
|
to(loading, {
|
|
duration: .2,
|
|
'--arm-front': '24deg',
|
|
'--arm-front-end': '-48deg',
|
|
'--arm-back': '164deg',
|
|
'--arm-back-end': '-36deg',
|
|
'--leg-front': '-4deg',
|
|
'--leg-front-end': '66deg',
|
|
'--leg-back': '111deg',
|
|
'--leg-back-end': '-36deg',
|
|
'--board-r': '0deg',
|
|
'--body-r': '34deg',
|
|
'--body-y': '-53%',
|
|
'--body-x': '-28%',
|
|
})
|
|
}
|
|
|
|
const reset = (loading, lines) => {
|
|
if(!loading.active) {
|
|
return
|
|
}
|
|
to(loading, {
|
|
'--skate-x': '0px',
|
|
duration: .3
|
|
})
|
|
to(loading, {
|
|
duration: .2,
|
|
'--arm-front': '24deg',
|
|
'--arm-front-end': '-48deg',
|
|
'--arm-back': '164deg',
|
|
'--arm-back-end': '-50deg',
|
|
'--leg-front': '40deg',
|
|
'--leg-front-end': '30deg',
|
|
'--leg-back': '120deg',
|
|
'--leg-back-end': '-36deg',
|
|
'--board-r': '0deg',
|
|
'--board-x': '0px',
|
|
'--body-r': '12deg',
|
|
'--body-y': '-65%',
|
|
'--body-x': '-85%',
|
|
onComplete() {
|
|
loading.active = false
|
|
lines.play()
|
|
lines.timeScale(1)
|
|
}
|
|
})
|
|
}
|
|
|
|
const slow = (loading, lines) => {
|
|
if(loading.active) {
|
|
return
|
|
}
|
|
loading.active = true
|
|
loading.count += 1
|
|
if(loading.count > 3) {
|
|
document.querySelector('#keyboard span').classList.remove('hide')
|
|
}
|
|
lines.timeScale(.5)
|
|
to(loading, {
|
|
'--skate-x': '-12px',
|
|
duration: .3
|
|
})
|
|
to(loading, {
|
|
duration: .2,
|
|
'--arm-front': '32deg',
|
|
'--arm-front-end': '20deg',
|
|
'--arm-back': '156deg',
|
|
'--arm-back-end': '-22deg',
|
|
'--leg-front': '19deg',
|
|
'--leg-front-end': '74deg',
|
|
'--leg-back': '134deg',
|
|
'--leg-back-end': '-29deg',
|
|
'--board-r': '-15deg',
|
|
'--body-r': '-8deg',
|
|
'--body-y': '-65%',
|
|
'--body-x': '-110%',
|
|
})
|
|
}
|
|
|
|
const down = (loading, lines) => {
|
|
if(loading.active) {
|
|
return
|
|
}
|
|
loading.active = true
|
|
loading.count += 1
|
|
if(loading.count > 3) {
|
|
document.querySelector('#keyboard span').classList.remove('hide')
|
|
}
|
|
to(loading, {
|
|
duration: .2,
|
|
'--arm-front': '-26deg',
|
|
'--arm-front-end': '-58deg',
|
|
'--arm-back': '204deg',
|
|
'--arm-back-end': '60deg',
|
|
'--leg-front': '40deg',
|
|
'--leg-front-end': '80deg',
|
|
'--leg-back': '150deg',
|
|
'--leg-back-end': '-96deg',
|
|
'--body-r': '180deg',
|
|
'--body-y': '-100%',
|
|
})
|
|
}
|
|
|
|
const fall = (loading, lines) => {
|
|
if(loading.active) {
|
|
return
|
|
}
|
|
loading.active = true
|
|
loading.ouch = true
|
|
lines.pause()
|
|
to(loading, {
|
|
duration: .5,
|
|
'--board-x': '60px'
|
|
})
|
|
to(loading, {
|
|
keyframes: [{
|
|
'--board-r': '-40deg',
|
|
duration: .15
|
|
}, {
|
|
'--board-r': '0deg',
|
|
duration: .3
|
|
}]
|
|
})
|
|
to(loading, {
|
|
keyframes: [{
|
|
'--line-top-x': '-100%',
|
|
'--line-bottom-x': '-200%',
|
|
'--body-r': '-8deg',
|
|
'--leg-back-end': '24deg',
|
|
'--leg-back': '60deg',
|
|
'--leg-front-end': '30deg',
|
|
'--leg-front': '10deg',
|
|
'--arm-back-end': '-40deg',
|
|
'--arm-back': '54deg',
|
|
'--arm-front-end': '-28deg',
|
|
'--arm-front': '24deg',
|
|
duration: .2
|
|
}, {
|
|
'--body-x': '-85%',
|
|
'--body-y': '36%',
|
|
'--body-r': '-26deg',
|
|
'--leg-back-end': '24deg',
|
|
'--leg-back': '20deg',
|
|
'--leg-front-end': '30deg',
|
|
'--leg-front': '-10deg',
|
|
'--arm-back-end': '-40deg',
|
|
'--arm-back': '164deg',
|
|
'--arm-front-end': '-28deg',
|
|
'--arm-front': '24deg',
|
|
duration: .2
|
|
}]
|
|
})
|
|
} |