How to make a temporary reverse of the control keys?

Question

css

Essence: 2D platformer with a side view. The player enters a trap, after which the control keys are swapped for N seconds. The functions of WASD (and arrows) are transferred to SDWA (and arrows, respectively).
How to implement it?

Answer 1

Sketched quickly, but I think you get the point.
https://codepen.io/AlexandrDev/pen/jXmXrd
If in words, then add a before pseudo-element to the columns with absolute positioning and a length of 100vw.

.column::before {
  content: '';
  display: block;
  background: green;
  width: 100vw;
  height: 20px;
  position: absolute;
  top: -20px;
  right: 15px;  /* для bootstrap (прибавляем padding) */
}

Answer 2

If you are talking about the top grass, then make it a picture, or rather a small pattern with bacground repeat-x.
If about the lines to the block on the left, then you can make a regular cap on the block, make it position relative, then style the before pseudo-class, make it block stretched and absolute and just press it to the edge of the cap

Answer 3

Well, there can be many options here, for example, a fairly simple crutch:

if(revers)
{
    ReversControl();
}
else
{
    NormalControl();
}