56 lines
1.6 KiB
JavaScript
56 lines
1.6 KiB
JavaScript
const slapImage = document.getElementById('slap-image');
|
|
const hand = document.getElementById('hand');
|
|
const fist = document.getElementById('fist');
|
|
const slapSound = document.getElementById('slap-sound');
|
|
|
|
const initialHandRight = 20;
|
|
const initialFistRight = 20;
|
|
|
|
hand.style.right = `${initialHandRight}px`;
|
|
fist.style.right = `${initialFistRight}px`;
|
|
|
|
|
|
slapImage.addEventListener('click', (event) => {
|
|
const x = event.clientX;
|
|
const y = event.clientY;
|
|
|
|
/* Slap the shit out of Ryan. */
|
|
hand.style.right = 'auto'; /* Unset right property. */
|
|
hand.style.left = `${x - hand.offsetWidth / 2}px`;
|
|
hand.style.top = `${y - hand.offsetHeight / 2}px`;
|
|
|
|
slapSound.currentTime = 0;
|
|
slapSound.play();
|
|
|
|
/* Move the hand back to a ready position, awaiting the next slap to
|
|
* Ryan's stoopid face!
|
|
*/
|
|
setTimeout(() => {
|
|
hand.style.left = 'auto'; /* Unset left property. */
|
|
hand.style.right = `${initialHandRight}px`;
|
|
hand.style.top = '50%';
|
|
}, 500);
|
|
});
|
|
|
|
slapImage.addEventListener('contextmenu', (event) => {
|
|
event.preventDefault(); /* Prevent the default context menu. */
|
|
|
|
const x = event.clientX;
|
|
const y = event.clientY;
|
|
|
|
/* Punch the f.ck out of him. */
|
|
fist.style.right = 'auto'; // Unset right property
|
|
fist.style.left = `${x - fist.offsetWidth / 2}px`;
|
|
fist.style.top = `${y - fist.offsetHeight / 2}px`;
|
|
|
|
slapSound.currentTime = 0;
|
|
slapSound.play();
|
|
|
|
/* Move back, ready to go again! */
|
|
setTimeout(() => {
|
|
fist.style.left = 'auto'; // Unset left property
|
|
fist.style.right = '20px';
|
|
fist.style.top = 'calc(50% + 150px)';
|
|
}, 500);
|
|
});
|