extend this script. and also the movement is broken fix bugs

// 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;
  }
  #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;
    transition: transform 0.3s ease-in-out;
    cursor: grab;
  }
  .character, .mapElement {
    position: absolute;
    bottom: 0;
    font-size: 34px;
    transition: left 0.1s linear, bottom 0.1s linear;
  }
  #message {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 16px;
    color: #333;
    transition: opacity 0.2s;
  }
  .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.style.left = '10px';
playerElement.style.bottom = '0px';
gameContainer.appendChild(playerElement);

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

let isDraggable = false;
let isResized = false;

// Functionality to enable drag around the game container
let startPos = { x: 0, y: 0 };
let offset = { x: 0, y: 0 };

const 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);
};

const 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)`;
};

const handleMouseUp = () => {
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', handleMouseUp);
};

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;
  if (isResized) {
    gameContainer.style.width = '1000px';
    gameContainer.style.height = '300px';
  } else {
    gameContainer.style.width = '800px';
    gameContainer.style.height = '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 = 50;
const MOVE_SPEED = 5;

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

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

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

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

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

function renderToUI(character, score = 0) {
  playerElement.textContent = character;
  playerElement.style.left = `${60 + cameraOffset}px`;
  playerElement.style.bottom = jump > JUMP_TIMEOUT ? '50px' : '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 camera and check for win
    cameraOffset -= MOVE_SPEED;
    mapPos++;
    if (currentTile === CHARACTER.PORTAL) {
      showWinScreen();
      break;
    }

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

  if (win) loopWin(ticks);
}

// 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));
}

// Show the splash screen
showSplashScreen();