forked from rDrama/rDrama
rename marseko to cursormarsey
parent
aa5c4297e0
commit
e145c90f7f
|
@ -7309,22 +7309,22 @@ button, .btn {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#marseko {
|
#cursormarsey {
|
||||||
z-index: 1000000000000000;
|
z-index: 1000000000000000;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background-image: url('/i/marseko.webp?x=2');
|
background-image: url('/i/cursormarsey.webp?x=2');
|
||||||
image-rendering: pixelated;
|
image-rendering: pixelated;
|
||||||
background-position: -64px -32px;
|
background-position: -64px -32px;
|
||||||
}
|
}
|
||||||
#marseko-heart {
|
#cursormarsey-heart {
|
||||||
z-index: 1000000000000000;
|
z-index: 1000000000000000;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background-image: url('/i/marseko-heart.webp?x=2');
|
background-image: url('/i/cursormarsey-heart.webp?x=2');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
left: 24px;
|
left: 24px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
@ -7413,6 +7413,6 @@ button, .btn {
|
||||||
100% {transform: scale(0.8);}
|
100% {transform: scale(0.8);}
|
||||||
}
|
}
|
||||||
|
|
||||||
#marseko-heart {
|
#cursormarsey-heart {
|
||||||
animation: animateHeart 0.3s infinite;
|
animation: animateHeart 0.3s infinite;
|
||||||
}
|
}
|
||||||
|
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
@ -1,24 +1,24 @@
|
||||||
const marsekoEl = document.getElementById("marseko");
|
const cursormarseyEl = document.getElementById("cursormarsey");
|
||||||
const heartEl = document.getElementById("marseko-heart");
|
const heartEl = document.getElementById("cursormarsey-heart");
|
||||||
|
|
||||||
function getInitialPosition(max) {
|
function getInitialPosition(max) {
|
||||||
return Math.max(32, Math.floor(Math.random() * max));
|
return Math.max(32, Math.floor(Math.random() * max));
|
||||||
}
|
}
|
||||||
let marsekoPosX = getInitialPosition(screen.availWidth - 20);
|
let cursormarseyPosX = getInitialPosition(screen.availWidth - 20);
|
||||||
let marsekoPosY = getInitialPosition(screen.availHeight - 50);
|
let cursormarseyPosY = getInitialPosition(screen.availHeight - 50);
|
||||||
marsekoEl.style.left = `${marsekoPosX}px`;
|
cursormarseyEl.style.left = `${cursormarseyPosX}px`;
|
||||||
marsekoEl.style.top = `${marsekoPosY}px`;
|
cursormarseyEl.style.top = `${cursormarseyPosY}px`;
|
||||||
heartEl.style.left = `${marsekoPosX+16}px`;
|
heartEl.style.left = `${cursormarseyPosX+16}px`;
|
||||||
heartEl.style.top = `${marsekoPosY-16}px`;
|
heartEl.style.top = `${cursormarseyPosY-16}px`;
|
||||||
|
|
||||||
let mousePosX = marsekoPosX;
|
let mousePosX = cursormarseyPosX;
|
||||||
let mousePosY = marsekoPosY;
|
let mousePosY = cursormarseyPosY;
|
||||||
|
|
||||||
let frameCount = 0;
|
let frameCount = 0;
|
||||||
let idleTime = 0;
|
let idleTime = 0;
|
||||||
let idleAnimation = null;
|
let idleAnimation = null;
|
||||||
let idleAnimationFrame = 0;
|
let idleAnimationFrame = 0;
|
||||||
const marsekoSpeed = 10;
|
const cursormarseySpeed = 10;
|
||||||
const spriteSets = {
|
const spriteSets = {
|
||||||
idle: [[-3, -3]],
|
idle: [[-3, -3]],
|
||||||
alert: [[-7, -3]],
|
alert: [[-7, -3]],
|
||||||
|
@ -84,7 +84,7 @@ const spriteSets = {
|
||||||
|
|
||||||
function setSprite(name, frame) {
|
function setSprite(name, frame) {
|
||||||
const sprite = spriteSets[name][frame % spriteSets[name].length];
|
const sprite = spriteSets[name][frame % spriteSets[name].length];
|
||||||
marsekoEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`;
|
cursormarseyEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetIdleAnimation() {
|
function resetIdleAnimation() {
|
||||||
|
@ -98,16 +98,16 @@ function idle() {
|
||||||
// every ~ 20 seconds
|
// every ~ 20 seconds
|
||||||
if (idleTime > 10 && true && idleAnimation == null) {
|
if (idleTime > 10 && true && idleAnimation == null) {
|
||||||
let avalibleIdleAnimations = ["sleeping", "scratchSelf"];
|
let avalibleIdleAnimations = ["sleeping", "scratchSelf"];
|
||||||
if (marsekoPosX < 32) {
|
if (cursormarseyPosX < 32) {
|
||||||
avalibleIdleAnimations.push("scratchWallW");
|
avalibleIdleAnimations.push("scratchWallW");
|
||||||
}
|
}
|
||||||
if (marsekoPosY < 32) {
|
if (cursormarseyPosY < 32) {
|
||||||
avalibleIdleAnimations.push("scratchWallN");
|
avalibleIdleAnimations.push("scratchWallN");
|
||||||
}
|
}
|
||||||
if (marsekoPosX > window.innerWidth - 32) {
|
if (cursormarseyPosX > window.innerWidth - 32) {
|
||||||
avalibleIdleAnimations.push("scratchWallE");
|
avalibleIdleAnimations.push("scratchWallE");
|
||||||
}
|
}
|
||||||
if (marsekoPosY > window.innerHeight - 32) {
|
if (cursormarseyPosY > window.innerHeight - 32) {
|
||||||
avalibleIdleAnimations.push("scratchWallS");
|
avalibleIdleAnimations.push("scratchWallS");
|
||||||
}
|
}
|
||||||
idleAnimation =
|
idleAnimation =
|
||||||
|
@ -146,11 +146,11 @@ function idle() {
|
||||||
|
|
||||||
function frame() {
|
function frame() {
|
||||||
frameCount += 1;
|
frameCount += 1;
|
||||||
const diffX = marsekoPosX - mousePosX;
|
const diffX = cursormarseyPosX - mousePosX;
|
||||||
const diffY = marsekoPosY - mousePosY;
|
const diffY = cursormarseyPosY - mousePosY;
|
||||||
const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
|
const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
|
||||||
|
|
||||||
if (distance < marsekoSpeed || distance < 48) {
|
if (distance < cursormarseySpeed || distance < 48) {
|
||||||
idle();
|
idle();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -172,16 +172,16 @@ function frame() {
|
||||||
direction += diffX / distance < -0.5 ? "E" : "";
|
direction += diffX / distance < -0.5 ? "E" : "";
|
||||||
setSprite(direction, frameCount);
|
setSprite(direction, frameCount);
|
||||||
|
|
||||||
marsekoPosX -= (diffX / distance) * marsekoSpeed;
|
cursormarseyPosX -= (diffX / distance) * cursormarseySpeed;
|
||||||
marsekoPosY -= (diffY / distance) * marsekoSpeed;
|
cursormarseyPosY -= (diffY / distance) * cursormarseySpeed;
|
||||||
|
|
||||||
marsekoPosX = Math.min(Math.max(16, marsekoPosX), window.innerWidth - 16);
|
cursormarseyPosX = Math.min(Math.max(16, cursormarseyPosX), window.innerWidth - 16);
|
||||||
marsekoPosY = Math.min(Math.max(16, marsekoPosY), window.innerHeight - 16);
|
cursormarseyPosY = Math.min(Math.max(16, cursormarseyPosY), window.innerHeight - 16);
|
||||||
|
|
||||||
marsekoEl.style.left = `${marsekoPosX}px`;
|
cursormarseyEl.style.left = `${cursormarseyPosX}px`;
|
||||||
marsekoEl.style.top = `${marsekoPosY}px`;
|
cursormarseyEl.style.top = `${cursormarseyPosY}px`;
|
||||||
heartEl.style.left = `${marsekoPosX+16}px`;
|
heartEl.style.left = `${cursormarseyPosX+16}px`;
|
||||||
heartEl.style.top = `${marsekoPosY-16}px`;
|
heartEl.style.top = `${cursormarseyPosY-16}px`;
|
||||||
}
|
}
|
||||||
|
|
||||||
document.onmousemove = (event) => {
|
document.onmousemove = (event) => {
|
||||||
|
@ -191,13 +191,13 @@ document.onmousemove = (event) => {
|
||||||
window.marseykoInterval = setInterval(frame, 100);
|
window.marseykoInterval = setInterval(frame, 100);
|
||||||
|
|
||||||
document.addEventListener('click', (event) => {
|
document.addEventListener('click', (event) => {
|
||||||
marsekoEl.style.removeProperty("pointer-events");
|
cursormarseyEl.style.removeProperty("pointer-events");
|
||||||
let elementClicked = document.elementFromPoint(event.clientX,event.clientY);
|
let elementClicked = document.elementFromPoint(event.clientX,event.clientY);
|
||||||
if(elementClicked.id === marsekoEl.id) {
|
if(elementClicked.id === cursormarseyEl.id) {
|
||||||
heartEl.classList.remove("d-none");
|
heartEl.classList.remove("d-none");
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
heartEl.classList.add("d-none");
|
heartEl.classList.add("d-none");
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}
|
}
|
||||||
marsekoEl.style.pointerEvents = "none";
|
cursormarseyEl.style.pointerEvents = "none";
|
||||||
});
|
});
|
|
@ -45,9 +45,9 @@
|
||||||
<script defer src="{{'js/bottom.js' | asset}}"></script>
|
<script defer src="{{'js/bottom.js' | asset}}"></script>
|
||||||
|
|
||||||
{% if SITE_NAME == 'rDrama' %}
|
{% if SITE_NAME == 'rDrama' %}
|
||||||
<div id="marseko"></div>
|
<div id="cursormarsey"></div>
|
||||||
<div id="marseko-heart" class="d-none"></div>
|
<div id="cursormarsey-heart" class="d-none"></div>
|
||||||
<script defer src="{{'js/marseko.js' | asset}}"></script>
|
<script defer src="{{'js/cursormarsey.js' | asset}}"></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue