extend the script and fix the bug its making invisible blocks there and its messing me up please fix that 

// Create and apply advanced styles
const style = document.createElement('style');
style.textContent = `
  body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    overflow: hidden;
    background-color: #f0f4f8;
  }
  #splashScreen {
    background: linear-gradient(to right, #ff512f, #dd2476);
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 36px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    flex-direction: column;
  }
  #splashScreen button, #nextLevelButton {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 18px;
    background-color: #ffffff;
    color: #dd2476;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
  }
  #splashScreen button:hover, #nextLevelButton:hover {
    background-color: #ff512f;
    color: #ffffff;
  }
  #gameHeader {
    background: linear-gradient(to right, #3494e6, #ec6ead);
    padding: 12px;
    text-align: center;
    color: white;
    font-size: 20px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
  }
  #gameContainer {
    width: 800px;
    height: 200px;
    margin: 100px auto;
    border: 4px solid #4a4a4a;
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-radius: 15px;
  }
  .character {
    position: absolute;
    font-size: 34px;
    bottom: 0;
    left: 60px;
  }
  .mapElement {
    position: absolute;
    font-size: 34px;
    bottom: 0;
  }
  #message {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 16px;
    color: #333;
  }
  .button {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 8px 16px;
    background-color: #3494e6;
    color: white;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .button:hover {
    background-color: #ec6ead;
  }
`;
document.head.appendChild(style);

// Initial game elements and state setup
document.body.innerHTML = `
  <div id="splashScreen">
    Welcome to the Character Jump Game
    <button id="startButton">Start Game</button>
  </div>
  <div id="gameHeader">Character Jump Game - Use 'S' to Start and 'UP Arrow' to Jump!</div>
  <div id="gameContainer">
    <div id="toggleDrag" class="button">Toggle Drag</div>
    <div id="resize" class="button" style="top: 50px;">Resize Game</div>
  </div>
`;

let gameContainer = document.getElementById('gameContainer');
let playerElement = document.createElement('div');
playerElement.classList.add('character');
playerElement.textContent = "▗";
gameContainer.appendChild(playerElement);

let messageElement = document.createElement('div');
messageElement.id = 'message';
gameContainer.appendChild(messageElement);

let isDraggable = false;
let isResized = false;

gameContainer.addEventListener('mousedown', handleMouseDown);

document.getElementById('toggleDrag').onclick = () => {
  isDraggable = !isDraggable;
  document.getElementById('toggleDrag').textContent = isDraggable ? 'Disable Drag' : 'Enable Drag';
};

document.getElementById('resize').onclick = () => {
  isResized = !isResized;
  gameContainer.style.width = isResized ? '1000px' : '800px';
  gameContainer.style.height = isResized ? '300px' : '200px';
};

const CHARACTER = {
  BOTTOM: "▗",
  TOP: "▝",
  OVER: "▞",
  UNDER: "▚",
  CRASH: "⭒",
  PORTAL: "⍟",
  SPIKE: "▲",
};

const BOX = {
  BOTTOM: "▖",
  TOP: "▘",
  SPIKE: "🗡️",
};

const COLLISION = "collision";
const JUMP_TIMEOUT = -1;
const JUMP_LENGTH = 8;
const DELAY_LOOP = 100;
const MOVE_SPEED = 5;
const TILE_SIZE = 40;

const MAPS = {
  1: "                ▖      ▖    ▘       ▖   ▖    ▘    ▖       ⍟",
  2: "▖▖     ▘ ▘      ▲▖     ▘   ▲ ▖ ▘ ▖   ▖  ▘▲⍟",
};

let map, mapPos, jump, ticks, playing, win, mapElements;
resetGameVariables();

function resetGameVariables() {
  map = MAPS[1];
  mapPos = 0;
  jump = JUMP_TIMEOUT;
  ticks = 0;
  playing = false;
  win = true;
  mapElements = [];
}

function renderMap() {
  while (gameContainer.children.length > 3) {
    gameContainer.removeChild(gameContainer.lastChild);
  }

  mapElements = Array.from(map).map((tile, idx) => {
    const mapElement = document.createElement('span');
    mapElement.classList.add('mapElement');
    mapElement.style.left = `${idx * TILE_SIZE}px`;
    mapElement.textContent = tile;
    gameContainer.appendChild(mapElement);
    return mapElement;
  });
}

function renderToUI(character, score = 0) {
  playerElement.textContent = character;
  playerElement.style.bottom = jump > JUMP_TIMEOUT ? '20px' : '0px';
  messageElement.textContent = character === CHARACTER.CRASH ? `Crashed! Final SCORE: ${score}` : `SCORE: ${score}`;
}

document.addEventListener("keydown", (event) => {
  if (event.isComposing || event.keyCode === 229) return;
  if (event.key in commands) {
    event.preventDefault();
    return commands[event.key]();
  }
});

const commands = {
  ArrowUp: () => jumpHandler(),
  s: () => startGame(),
  " ": () => jumpHandler(),
  z: () => goToNextLevel(),
};

function jumpHandler() {
  if (!playing) return startGame();
  if (jump <= JUMP_TIMEOUT) jump = JUMP_LENGTH;
}

function startGame() {
  if (playing) return;
  resetGameVariables();
  renderMap();
  loopGame();
}

function showSplashScreen(){
  document.getElementById('startButton').onclick = () => {
    document.getElementById('splashScreen').style.display = 'none';
    loopPreGame();
  };
}

async function loopPreGame() {
  const welcomeMessage = "Hit S to play!";
  messageElement.textContent = welcomeMessage;
  
  while (!playing) {
    messageElement.style.opacity = '0.5';
    await sleep(DELAY_LOOP);
    messageElement.style.opacity = '1';
    await sleep(DELAY_LOOP);
  }
}

// Main game loop
async function loopGame() {
  playing = true;

  while (playing && mapPos < map.length) {
    const currentTile = map[mapPos];
    const character = getCharacter(jump, currentTile);

    if (character === COLLISION) {
      renderToUI(CHARACTER.CRASH, ticks);
      win = false;
      break;
    }

    renderToUI(character, ticks);

    // Move elements to simulate player movement
    mapElements.forEach((element, idx) => {
      let currentLeft = parseFloat(element.style.left);
      element.style.left = `${currentLeft - MOVE_SPEED}px`;

      if (currentLeft <= -TILE_SIZE) {
        element.style.display = 'none'; // Hide passed elements
      }
    });

    if (currentTile === CHARACTER.PORTAL) {
      showWinScreen();
      break;
    }

    incrementMapPosition();

    if (jump > JUMP_TIMEOUT) jump--;
    ticks++;
    await sleep(DELAY_LOOP);
  }

  if (win) showWinScreen();
}

function incrementMapPosition() {
  if (mapPos < map.length) mapPos++;
}

// Handle win screen
function showWinScreen() {
  playing = false;
  const winScreen = document.createElement('div');
  winScreen.id = 'splashScreen';
  winScreen.innerHTML = `
    <div>Congratulations! You Win! SCORE: ${ticks}</div>
    <button id="nextLevelButton">Press Z to go to the next level</button>
  `;
  document.body.appendChild(winScreen);
  document.getElementById('nextLevelButton').onclick = goToNextLevel;
}

// Transition to the next level
function goToNextLevel() {
  document.getElementById('splashScreen').remove();
  map = MAPS[2];
  startGame();
}

function getCharacter(jump, tile) {
  if (jump > 0) {
    if (tile === BOX.TOP || tile === BOX.SPIKE) return COLLISION;
    return tile === BOX.BOTTOM ? CHARACTER.OVER : CHARACTER.TOP;
  }
  return tile === BOX.BOTTOM || tile === BOX.SPIKE ? COLLISION : (tile === BOX.TOP ? CHARACTER.UNDER : CHARACTER.BOTTOM);
}

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function handleMouseDown(e) {
  if (!isDraggable) return;
  startPos.x = e.clientX - offset.x;
  startPos.y = e.clientY - offset.y;
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', handleMouseUp);
}

function handleMouseMove(e) {
  if (!isDraggable) return;
  offset.x = e.clientX - startPos.x;
  offset.y = e.clientY - startPos.y;
  gameContainer.style.transform = `translate3d(${offset.x}px, ${offset.y}px, 0)`;
}

function handleMouseUp() {
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', handleMouseUp);
}

// Show the splash screen
showSplashScreen();