forked from rDrama/rDrama
1
0
Fork 0

rename marseko to cursormarsey

master
Aevann 2023-05-04 18:30:12 +03:00
parent aa5c4297e0
commit e145c90f7f
5 changed files with 38 additions and 38 deletions

View File

@ -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;
} }

View File

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -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";
}); });

View File

@ -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>