它不起作用，因为您用另一个容器遮盖了您的W容器，并且它不可单击
我更改了容器的顺序，因此W容器现在位于前一层，并且可以正常工作

var gameIsPlaying = true;

function game() {
  gameIsPlaying = true;
  const RandomLetterGUI = document.getElementById("RandomLetters")
  const TimerGUI = document.getElementById("Timer")
  const LivesGUI = document.getElementById("Lives")
  const ScoreGUI = document.getElementById("Score")
  const W = document.getElementById("W")
  const A = document.getElementById("A")
  const S = document.getElementById("S")
  const D = document.getElementById("D")
  W.style.backgroundColor = "white";
  W.innerHTML = 'W'
  A.style.backgroundColor = "white";
  A.innerHTML = 'A'
  S.style.backgroundColor = "white";
  S.innerHTML = 'S'
  D.style.backgroundColor = "white";
  D.innerHTML = 'D'
  const letters = [
    "W",
    "A",
    "S",
    "D"
  ]
  var seconds = 60;
  var lives = 3;
  var score = 0;
  var timerId = setInterval(countdown, 1000);

  function countdown() {
    if (seconds == -1) {
      gameOver()
    } else {
      if (seconds > 9) {
        TimerGUI.innerHTML = ':' + seconds;
      } else {
        TimerGUI.innerHTML = ':0' + seconds;
      }
      seconds--;
    }
  }
  countdown()
  const updateLives = setInterval(displayLives, 0)
  const ScoreUpdate = setInterval(updateScore, 0)

  function gameOver() {
    gameIsPlaying = false
    clearTimeout(timerId)
    clearTimeout(updateLives)
    clearTimeout(ScoreUpdate)
    W.style.backgroundColor = "red";
    W.innerHTML = ''
    A.style.backgroundColor = "red";
    A.innerHTML = ''
    S.style.backgroundColor = "red";
    S.innerHTML = ''
    D.style.backgroundColor = "red";
    D.innerHTML = ''
    RandomLetterGUI.innerHTML = ''
    TimerGUI.innerHTML = ''
    LivesGUI.innerHTML = ''
    ScoreGUI.innerHTML = ''
  }

  function updateScore() {
    ScoreGUI.innerHTML = "Score: " + score
  }

  function displayLives() {
    LivesGUI.innerHTML = "Remaining Lives: " + lives
    if (lives == 0) {
      gameOver()
    }
  }

  function letter() {
    var item = letters[Math.floor(Math.random() * letters.length)];
    RandomLetterGUI.innerHTML = "Next Letter: " + item
    var pickedLetterTime = Math.floor(Date.now() / 1000)
    document.onkeypress = function(e) {
      if (gameIsPlaying) {
        var key = e.key
        if (key.toUpperCase() != item) {
          lives -= 1;
          if (score >= 0) {
            score -= 50;
          }
        } else {
          var pressedKeyTime = Math.floor(Date.now() / 1000)
          var seconds = pressedKeyTime - pickedLetterTime
          if (seconds > 0 && seconds < 1.5) {
            score += 500
          }
          if (seconds >= 1.5 && seconds < 3) {
            score += 350
          }
          if (seconds >= 3 && seconds < 5) {
            score += 150
          }
        }
      }
    };
    document.onkeydown = function(e) {
      var key = e.key
      if (key == "w") {
        W.style.backgroundColor = "lime";
        W.innerHTML = ''
      }
      if (key == "a") {
        A.style.backgroundColor = "lime";
        A.innerHTML = ''
      }
      if (key == "s") {
        S.style.backgroundColor = "lime";
        S.innerHTML = ''
      }
      if (key == "d") {
        D.style.backgroundColor = "lime";
        D.innerHTML = ''
      }
    }
    document.onkeyup = function(e) {
      if (e.key == "w") {
        W.style.backgroundColor = "white";
        W.innerHTML = 'W'
      }
      if (e.key == "a") {
        A.style.backgroundColor = "white";
        A.innerHTML = 'A'
      }
      if (e.key == "s") {
        S.style.backgroundColor = "white";
        S.innerHTML = 'S'
      }
      if (e.key == "d") {
        D.style.backgroundColor = "white";
        D.innerHTML = 'D'
      }
    }
    // touchscreen compatibility
    W.onclick = function() {
      gameOver();
    }
  }
  letter()
}
game()

function resetGame() {
  if (gameIsPlaying == false) {
    document.onkeypress = function(e) {
      var key = e.key
      if (key == "Enter") {
        game()
      }
    }
  }
}
setInterval(resetGame, 0)

body {
  background-color: black;
}

p {
  font-family: Verdana;
  color: white;
  font-size: 20px;
}

.RandomLetters {
  float: left;
}

.Timer {
  float: right;
}

.Lives {
  position: absolute;
  left: auto;
}

.Score {
  position: absolute;
  right: 0;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 100px;
  left: 0;
  right: 0;
  margin: auto;
}

.center2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.W,
.A,
.S,
.D {
  height: 50px;
  width: 50px;
  font-family: Verdana;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Play WASD online</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <noscript>turn on javascript to play this game or noob :P</noscript>
  <p id="RandomLetters" class="RandomLetters">
  </p>
  <p id="Timer" class="Timer">
  </p>
  <br>
  <p id="Lives" class="Lives">
  </p>
  <p id="Score" class="Score">
  </p>
  <div class="center2">
    <div id="A" class="A">
    </div>
    <div id="S" class="S">
    </div>
    <div id="D" class="D">
    </div>
  </div>
  <div class="center">
    <div id="W" class="W">
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

var element= document.getElementById("IDName");
element.onclick = function () {
   gameOver();
}

可以使用click或Pointer Events

您可以使用touchstart事件执行此操作，请参见this mdn article

W.ontouchstart = function () {
  gameOver();
}