then think which units to utilise correctly in dimensions.

 
///

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ASCII Overlay</title>
    <style>
        * {
            font-size: 20px !important; /* Global font size enforced */
            line-height: normal; /* Reset line-height to normal to avoid incoherence */
            margin: 0; /* Remove margins */
            padding: 0; /* Remove padding */
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: monospace; /* Ensure consistency */
            white-space: pre; /* Preserve whitespace */
        }

        svg {
            position: absolute;
            pointer-events: none; /* Prevent mouse events on SVG */
            width: 200px; /* Set the width to 200 */
            height: 200px; /* Set the height to 200 */
            display: none; /* Start hidden */
        }
    </style>
</head>
<body>

<pre id="game"></pre>
<svg id="overlay" width="200" height="200" viewBox="0 0 200 200">
    <text id="overlayO" x="100" y="100" text-anchor="middle" alignment-baseline="middle" fill="red">O</text>
    <text id="overlayCol" x="100" y="100" text-anchor="middle" alignment-baseline="middle" fill="black" opacity="0.5">:</text>
</svg>

<script>
    const game = document.getElementById('game');
    const overlay = document.getElementById('overlay');
    const overlayO = document.getElementById('overlayO');
    const overlayCol = document.getElementById('overlayCol');

    const roadHeight = 10; // Total number of rows for the game
    const roadWidth = 17; // Total width (17 indices)
    let playerX = 8; // Initial X position of the player ("O") at the center, slightly below ":"
    let playerY = 6; // Initial Y position of the player ("O") aligned downward from ":" (positioned at (8, 5))
    let obstacleX = 8; // X position of the obstacle
    let obstacleY = 5; // Y position of the obstacle
    let overlaying = false; // State of overlap

    function updateGame() {
        // Prepare the display output
        let grid = Array(roadHeight).fill('').map(() => Array(roadWidth).fill(' '));
        
        // Check for overlap
        if (playerX === obstacleX && playerY === obstacleY) {
            overlaying = true; // Set overlay state
            grid[playerY][playerX] = ' '; // Clear the position for overlay
        } else {
            overlaying = false; // Reset overlay state
            grid[obstacleY][obstacleX] = ':'; // Place regular obstacle
        }

        // Place the player or note if they're overlapped
        grid[playerY][playerX] = overlaying ? ' ' : 'O'; // If overlapping, clear space for ASCII O

        // Prepare display
        let display = '';
        for (let row of grid) {
            display += '|' + row.join('') + '|\n'; // Construct each row
        }

        // Update ASCII display
        game.innerHTML = display;
        
        // Update overlays based on the overlap state
        if (overlaying) {
            overlay.style.display = 'block'; // Show overlay SVG
            overlayO.setAttribute('x', playerX * 11.76 + 7); // Updating position for O
            overlayO.setAttribute('y', playerY * 20 + 15); // Adjusting vertical position for O
            overlayCol.setAttribute('x', playerX * 11.76 + 7); // Updating position for :
            overlayCol.setAttribute('y', playerY * 20 + 15); // Adjusting vertical position for :
        } else {
            overlay.style.display = 'none'; // Hide overlay when not overlapping
        }
    }

    window.addEventListener('keydown', (event) => {
        // Move left
        if (event.key === 'ArrowLeft') {
            playerX = Math.max(playerX - 1, 0); // Prevent moving out of bounds horizontally
        }
        // Move right
        else if (event.key === 'ArrowRight') {
            playerX = Math.min(playerX + 1, roadWidth - 1); // Prevent moving out of bounds horizontally
        }
        // Move up
        else if (event.key === 'ArrowUp') {
            playerY = Math.max(playerY - 1, 0); // Prevent moving out of bounds vertically
        }
        // Move down
        else if (event.key === 'ArrowDown') {
            playerY = Math.min(playerY + 1, roadHeight - 1); // Prevent moving out of bounds vertically
        }

        updateGame(); // Update the state of the game
    });

    // Initial game display update
    updateGame();
</script>

</body>
</html>

///