Enhance Mario Day feature: adjust animation duration for Mario's running speed and refine coin positioning logic
This commit is contained in:
@@ -36,8 +36,12 @@ observer.observe(document.body, {
|
|||||||
|
|
||||||
|
|
||||||
function createMarioDay(container) {
|
function createMarioDay(container) {
|
||||||
|
// MARK: Mario's running speed across the screen
|
||||||
|
const marioSpeedSeconds = 18;
|
||||||
|
|
||||||
const wrapper = document.createElement('div');
|
const wrapper = document.createElement('div');
|
||||||
wrapper.className = 'mario-wrapper';
|
wrapper.className = 'mario-wrapper';
|
||||||
|
wrapper.style.animationDuration = `${marioSpeedSeconds}s`;
|
||||||
|
|
||||||
const mario = document.createElement('img');
|
const mario = document.createElement('img');
|
||||||
mario.className = 'mario-runner';
|
mario.className = 'mario-runner';
|
||||||
@@ -55,7 +59,7 @@ function createMarioDay(container) {
|
|||||||
// Grab Mario's current screen position to lock the coin's X coordinate
|
// Grab Mario's current screen position to lock the coin's X coordinate
|
||||||
const marioRect = wrapper.getBoundingClientRect();
|
const marioRect = wrapper.getBoundingClientRect();
|
||||||
coin.style.left = `${marioRect.left + 16}px`;
|
coin.style.left = `${marioRect.left + 16}px`;
|
||||||
coin.style.bottom = '35px'; // Adjust for wrapper's bottom offset
|
coin.style.bottom = '35px'; // bottom offset
|
||||||
|
|
||||||
container.appendChild(coin);
|
container.appendChild(coin);
|
||||||
setTimeout(() => coin.remove(), 2000);
|
setTimeout(() => coin.remove(), 2000);
|
||||||
|
|||||||
Reference in New Issue
Block a user