make this a 2d in web version JavaScript please in the web 

const CHARACTER = {
  BOTTOM: "▗",
  TOP: "▝",
  OVER: "▞",
  UNDER: "▚",
  CRASH: "⭒",
};
const BOX = {
  BOTTOM: "▖",
  TOP: "▘",
};
const MISC = {
  FLAG_DARK: "⚑",
  FLAG_LIGHT: "⚐",
  PLAY: "▸",
  STAR_DARK: "★",
  STAR_LIGHT: "⭒",
};
const COLLISION = "collision";

const JUMP_TIMEOUT = -1;
const JUMP_LENGTH = 3;
const DELAY_LOOP = 210;
const DELAY_INITIAL = 1000;

const MAPS = {
  1: "                ▖     ▖        ▘     ▖   ▖    ▘    ▖      ⚑",
  2: "                 ▖     ▖    ▘     ▖    ▘     ▖   ▖    ▘    ▖     ▖     ▖        ▘     ▖   ▖    ▘    ▖  ⚑",
  3: "                 ▖    ▖    ▘    ▖   ▖   ▘   ▖    ▖    ▖   ▘    ▖   ▖   ▘   ▖     ⚑",
};

const GAME_URL = new URL(window.location.href);
const MAP =
  GAME_URL.searchParams.get("map") in MAPS
    ? GAME_URL.searchParams.get("map")
    : 1;
const DEBUG = !!GAME_URL.searchParams.get("debug") != undefined;

let map = loadMap(MAP);
let jump = JUMP_TIMEOUT;
let ticks = 0;
let playing = false;
let win = true;

const commands = {
  ArrowUp: () => {
    if (!playing) return commands.s();
    if (jump <= JUMP_TIMEOUT) jump = JUMP_LENGTH;
  },
  s: async () => {
    if (playing) return;

    faviconize("", 0);
    loopGame();
  },
  " ": () => commands.ArrowUp(),
  r: async () => {
    playing = false;
    await dotDotDot("Restarting");
    location.reload();
  },
  m: async () => {
    playing = false;
    clearStorage();
    await dotDotDot("Clearing");
    location.reload();
  },
};

document.addEventListener("keydown", (event) => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  log(event.key);
  if (event.key in commands) {
    event.preventDefault();
    return commands[event.key]();
  }
  if (event.key in MAPS) {
    event.preventDefault();
    return (location.href = `${location.origin}${location.pathname}?map=${event.key}`);
  }
});

// todo: add onblur message and favicon

// main
loopPreGame();

async function loopPreGame() {
  const welcomeMessage = MAP == 1 ? "Hit S to play!" : `MAP ${MAP}`;

  faviconize(MISC.PLAY, 102);

  await sleep(DELAY_INITIAL);
  while (!playing) {
    render(`${MISC.FLAG_DARK} ${welcomeMessage}`);
    await sleep(DELAY_LOOP);
    render(`${MISC.FLAG_LIGHT} ${welcomeMessage}`);
    await sleep(DELAY_LOOP);
  }
}

async function loopGame() {
  playing = true;
  while (playing && map.length > 0) {
    const character = getCharacter(jump, map[0]);

    if (character == COLLISION) {
      faviconize(MISC.STAR_LIGHT, 101);
      render(CHARACTER.CRASH, map, `SCORE ${ticks}`);
      win = false;
      break;
    }

    map = map.slice(1, map.length);
    render(character, map);

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

  if (win) loopWin(ticks);
}

async function loopWin(score) {
  faviconize(MISC.FLAG_LIGHT, 104);

  while (playing) {
    document.title = `⭒ You win! ⭑ SCORE ${score}`;
    await sleep(DELAY_LOOP);
    document.title = `⭑ You win! ⭒ SCORE ${score}`;
    await sleep(DELAY_LOOP);
  }
}

function loadMap(map) {
  if (readStorage()) {
    return readStorage();
  }
  return MAPS[map];
}

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

async function dotDotDot(message) {
  render(`${message}.`);
  await sleep(DELAY_LOOP);
  render(`${message}..`);
  await sleep(DELAY_LOOP);
  render(`${message}...`);
  await sleep(DELAY_LOOP);
}

function readStorage() {
  try {
    return localStorage.getItem("map");
  } catch (error) {
    localStorageError(error);
    return false;
  }
}

function clearStorage() {
  try {
    localStorage.removeItem("map");
  } catch (error) {
    localStorageError(error);
  }
}

function localStorageError(error) {
  console.log("Maybe somebody is blocking localStorage...");
  console.error(error);
}

function render(character, map, comment) {
  if (!map) return (document.title = character);
  if (!comment) return (document.title = `${character}${map}`);
  document.title = `${character}${map.slice(0, 2)} ${comment}`;
}

function hasCollision(character, tile) {
  return (
    (character == CHARACTER.BOTTOM && tile == BOX.BOTTOM) ||
    (character == CHARACTER.TOP && tile == BOX.TOP)
  );
}

function faviconize(character, offset) {
  const canvas = document.createElement("canvas");
  canvas.height = 128;
  canvas.width = 128;

  const ctx = canvas.getContext("2d");
  const radius = 96;

  ctx.lineJoin = "round";
  ctx.lineWidth = radius;
  ctx.strokeRect(radius / 2, radius / 2, 128 - radius, 128 - radius);
  ctx.fillRect(radius / 2, radius / 2, 128 - radius, 128 - radius);
  ctx.stroke();
  ctx.fill();

  ctx.fillStyle = "white";
  ctx.font = "128px serif";
  ctx.textAlign = "center";
  ctx.fillText(character, 64, offset);

  const link =
    document.querySelector("link[rel*='icon']") ||
    document.createElement("link");

  link.rel = "icon";
  link.href = canvas.toDataURL();
  document.getElementsByTagName("head")[0].appendChild(link);
}

function log() {
  if (DEBUG) {
    console.log(...arguments);
  }
}

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



here's the insperation

// JavaScript code with enhanced game logic and UI

const CHARACTER = {
  BOTTOM: "▗",
  TOP: "▝",
  OVER: "▞",
  UNDER: "▚",
  CRASH: "⭒",
};
const BOX = {
  BOTTOM: "▖",
  TOP: "▘",
};
const MISC = {
  FLAG_DARK: "⚑",
  FLAG_LIGHT: "⚐",
  PLAY: "▸",
  STAR_DARK: "★",
  STAR_LIGHT: "⭒",
};
const COLLISION = "collision";

const JUMP_TIMEOUT = -1;
const JUMP_LENGTH = 3;
const DELAY_LOOP = 210;
const DELAY_INITIAL = 1000;

const MAPS = {
  1: "                ▖      ▖    ▘       ▖   ▖    ▘    ▖       ⚑",
  2: "                 ▖      ▖    ▘      ▖     ▖  ▘       ▖     ⚑",
  3: "                 ▖     ▖      ▘ ▖     ▖       ▘    ▖    ⚑",
};

const MAP = 1;
let map, mapPos, jump, ticks, playing, win;
resetGameVariables();

// CSS styling inside JavaScript
const style = document.createElement('style');
style.textContent = `
  body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f3f3f3;
    overflow: auto;
  }
  #gameHeader {
    background: linear-gradient(to right, #56ccf2, #2f80ed);
    padding: 10px;
    text-align: center;
    color: white;
    font-size: 18px;
    position: fixed;
    width: 100%;
    top: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
  }
  #gameContainer {
    width: 800px;
    height: 150px;
    margin: 80px auto 20px;
    border: 4px solid black;
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 5px;
  }
  .character {
    position: absolute;
    bottom: 0;
    font-size: 24px;
    transition: left 0.1s linear;
  }
  .mapElement {
    position: absolute;
    bottom: 0;
    font-size: 24px;
  }
  #message {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 16px;
    color: #333;
    transition: opacity 0.2s;
  }
`;
document.head.appendChild(style);

// Create the game header
const gameHeader = document.createElement('div');
gameHeader.id = 'gameHeader';
gameHeader.textContent = "Character Jump Game - Use 'S' to Start and 'UP Arrow' to Jump!";
document.body.appendChild(gameHeader);

// Create the game container and elements
const gameContainer = document.createElement('div');
gameContainer.id = 'gameContainer';
document.body.appendChild(gameContainer);

const playerElement = document.createElement('div');
playerElement.classList.add('character');
playerElement.style.left = '10px';
gameContainer.appendChild(playerElement);

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

// Initialize map rendering
let mapElements = [];
function resetGameVariables() {
  map = MAPS[MAP];
  mapPos = 0;
  jump = JUMP_TIMEOUT;
  ticks = 0;
  playing = false;
  win = true;
}

function renderMap() {
  mapElements.forEach(el => el.remove());
  mapElements = [];
  for (let i = 0; i < map.length; i++) {
    const mapElement = document.createElement('span');
    mapElement.classList.add('mapElement');
    mapElement.style.left = `${i * 20 + 60}px`;
    mapElement.textContent = map[i];
    gameContainer.appendChild(mapElement);
    mapElements.push(mapElement);
  }
}
renderMap();

// Handle input
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: () => {
    if (!playing) return commands.s();
    if (jump <= JUMP_TIMEOUT) jump = JUMP_LENGTH;
  },
  s: async () => {
    if (playing) return;
    resetGameVariables();
    renderMap();
    loopGame();
  },
  " ": () => commands.ArrowUp(),
  r: async () => {
    playing = false;
    resetGameVariables();
    renderMap();
  },
};

async function loopPreGame() {
  const welcomeMessage = MAP == 1 ? "Hit S to play!" : `MAP ${MAP}`;
  messageElement.textContent = `${MISC.FLAG_DARK} ${welcomeMessage}`;
  await sleep(DELAY_INITIAL);
  while (!playing) {
    messageElement.style.opacity = '0.5';
    await sleep(DELAY_LOOP);
    messageElement.style.opacity = '1';
    await sleep(DELAY_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);
    scrollScreen();

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

  if (win) loopWin(ticks);
}

async function loopWin(score) {
  while (playing) {
    renderToUI(`⭑ You win! ⭒ SCORE ${score}`);
    await sleep(DELAY_LOOP);
    renderToUI(`⭒ You win! ⭑ SCORE ${score}`);
    await sleep(DELAY_LOOP);
  }
}

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

function renderToUI(character, score = 0) {
  playerElement.textContent = character;
  playerElement.style.left = `${60 + mapPos * 20}px`;
  if (score > 0 || character == CHARACTER.CRASH) {
    messageElement.textContent = character == CHARACTER.CRASH ? `Crashed! Final SCORE: ${score}` : `SCORE: ${score}`;
    messageElement.style.opacity = '1';
  } else {
    messageElement.textContent = character;
  }
}

function scrollScreen() {
  gameContainer.scrollLeft = mapPos * 20 - 60; // Adjust scrolling to keep up with map position
}

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

// Start the pre-game loop
loopPreGame();