JSFiddle - React, Tailwind, and code Playground

HTML

<pre id='out'>press enter to start the game</pre>

JavaScript

const render = (s) => out.textContent = s;
const LENGTH = 27;

const game = () => {
	let state = new Array(LENGTH).fill('_');
  state[0] = '.';
  
  const gameListener = ({key}) => {
  	if (key == 'ArrowUp') {
    	state[0] = "'";
    } else if (key == 'ArrowDown') {
    	state[0] = '.';
    }
    render(state.join(''));
  }
  
  window.addEventListener('keydown', gameListener);
  
  const intervalId = setInterval(
  	() => {
    	if (state[0] == state[1]) {
      	clearInterval(intervalId);
        window.removeEventListener(
        	'keydown',gameListener
        );
        window.addEventListener(
        	'keydown', menuListener
        );
        render('loserfaggot');
      } else {
      	const moving = state.slice(2);
      	state.splice(1, moving.length, ...moving);
        const lastElement = state[state.length - 2];
        let pool;
        if (lastElement == '_') {
        	pool = ['_', '\'', '.'];
        } else if (lastElement == '.') {
        	pool = ['_', '.'];
        } else {
        	pool = ['_', '\''];
        }
        state[state.length - 1] = pool[
        	Math.floor(Math.random() * pool.length)
        ];
        render(state.join(''));
      }
    },
  	400 - SPEED * 20
  )
};

let SPEED = 1;
render(SPEED);

const menuListener = ({key}) => {
	if (key == 'Enter') {
  	game();
    window.removeEventListener('keydown', menuListener);
  } else if (key == 'ArrowUp') {
  	if (SPEED < 15) {
    	SPEED += 1;
    }
  } else if (key == 'ArrowDown') {
  	if (SPEED > 1) {
    	SPEED -= 1;
    }
  }
  render(SPEED);
}

window.addEventListener('keydown', menuListener);