我用JavaScript和HTML创建了一个游戏。在游戏中，我们有一个表，并为每个单元格提供一个ID，以便使用onClick函数切换颜色。规则很简单如果一个单元格被点击，它周围的每个单元格，包括它自己，都应该改变它们的颜色（切换）。游戏继续进行，直到每个单元格都是红色。
现在，我想设置一些单元格（不是随机的）默认为红色。我该怎么做？顺便说一句，如果你有任何想法运行这个游戏与较短的代码，请让我知道。：）

window.onload = function() {

  document.getElementById("zero0").style.backgroundColor = "red";
  document.getElementById("one3").style.backgroundColor = "red";
  document.getElementById("three2").style.backgroundColor = "red";

}

function zero0() {

  var cell00 = document.getElementById("zero0");
  let cell01 = document.getElementById("zero1");
  let cell10 = document.getElementById("one0");

  if (cell00.style.backgroundColor == "red") {
    cell00.style.backgroundColor = "white"
  } else {
    cell00.classList.toggle('reed')
  }
  if (cell01.style.backgroundColor == "red") {
    cell01.style.backgroundColor = "white"
  } else {
    cell01.classList.toggle('reed')
  }
  if (cell10.style.backgroundColor == "red") {
    cell10.style.backgroundColor = "white"
  } else {
    cell10.classList.toggle('reed')
  }
}

function zero1() {
  var cell00 = document.getElementById("zero0");
  let cell01 = document.getElementById("zero1");
  let cell02 = document.getElementById("zero2");
  let cell11 = document.getElementById("one1");

  if (cell00.style.backgroundColor == "red") {
    cell00.style.backgroundColor = "white"
  } else {
    cell00.classList.toggle('reed')
  }
  if (cell01.style.backgroundColor == "red") {
    cell01.style.backgroundColor = "white"
  } else {
    cell01.classList.toggle('reed')
  }
  if (cell02.style.backgroundColor == "red") {
    cell02.style.backgroundColor = "white"
  } else {
    cell02.classList.toggle('reed')
  }
  if (cell11.style.backgroundColor == "red") {
    cell11.style.backgroundColor = "white"
  } else {
    cell11.classList.toggle('reed')
  }
}

function zero2() {
  let cell01 = document.getElementById("zero1");
  let cell02 = document.getElementById("zero2");
  let cell03 = document.getElementById("zero3");
  let cell12 = document.getElementById("one2");

  if (cell01.style.backgroundColor == "red") {
    cell01.style.backgroundColor = "white"
  } else {
    cell01.classList.toggle('reed')
  }
  if (cell02.style.backgroundColor == "red") {
    cell02.style.backgroundColor = "white"
  } else {
    cell02.classList.toggle('reed')
  }
  if (cell03.style.backgroundColor == "red") {
    cell03.style.backgroundColor = "white"
  } else {
    cell03.classList.toggle('reed')
  }
  if (cell12.style.backgroundColor == "red") {
    cell12.style.backgroundColor = "white"
  } else {
    cell12.classList.toggle('reed')
  }
}

function zero3() {
  let cell02 = document.getElementById("zero2");
  let cell03 = document.getElementById("zero3");
  let cell04 = document.getElementById("zero4");
  let cell13 = document.getElementById("one3");

  if (cell04.style.backgroundColor == "red") {
    cell04.style.backgroundColor = "white"
  } else {
    cell04.classList.toggle('reed')
  }
  if (cell02.style.backgroundColor == "red") {
    cell02.style.backgroundColor = "white"
  } else {
    cell02.classList.toggle('reed')
  }
  if (cell03.style.backgroundColor == "red") {
    cell03.style.backgroundColor = "white"
  } else {
    cell03.classList.toggle('reed')
  }
  if (cell13.style.backgroundColor == "red") {
    cell13.style.backgroundColor = "white"
  } else {
    cell13.classList.toggle('reed')
  }
}

function zero4() {
  let cell03 = document.getElementById("zero3");
  let cell04 = document.getElementById("zero4");
  let cell14 = document.getElementById("one4");

  if (cell03.style.backgroundColor == "red") {
    cell03.style.backgroundColor = "white"
  } else {
    cell03.classList.toggle('reed')
  }
  if (cell04.style.backgroundColor == "red") {
    cell04.style.backgroundColor = "white"
  } else {
    cell04.classList.toggle('reed')
  }
  if (cell14.style.backgroundColor == "red") {
    cell14.style.backgroundColor = "white"
  } else {
    cell14.classList.toggle('reed')
  }
}

function one0() {
  var cell00 = document.getElementById("zero0");
  let cell10 = document.getElementById("one0");
  let cell11 = document.getElementById("one1");
  let cell20 = document.getElementById("two0");

  if (cell00.style.backgroundColor == "red") {
    cell00.style.backgroundColor = "white"
  } else {
    cell00.classList.toggle('reed')
  }
  if (cell10.style.backgroundColor == "red") {
    cell10.style.backgroundColor = "white"
  } else {
    cell10.classList.toggle('reed')
  }
  if (cell11.style.backgroundColor == "red") {
    cell11.style.backgroundColor = "white"
  } else {
    cell11.classList.toggle('reed')
  }
  if (cell20.style.backgroundColor == "red") {
    cell20.style.backgroundColor = "white"
  } else {
    cell20.classList.toggle('reed')
  }
}

function one1() {
  let cell01 = document.getElementById("zero1");
  let cell10 = document.getElementById("one0");
  let cell11 = document.getElementById("one1");
  let cell12 = document.getElementById("one2");
  let cell21 = document.getElementById("two1");

  if (cell01.style.backgroundColor == "red") {
    cell01.style.backgroundColor = "white"
  } else {
    cell01.classList.toggle('reed')
  }
  if (cell10.style.backgroundColor == "red") {
    cell10.style.backgroundColor = "white"
  } else {
    cell10.classList.toggle('reed')
  }
  if (cell11.style.backgroundColor == "red") {
    cell11.style.backgroundColor = "white"
  } else {
    cell11.classList.toggle('reed')
  }
  if (cell12.style.backgroundColor == "red") {
    cell12.style.backgroundColor = "white"
  } else {
    cell12.classList.toggle('reed')
  }
  if (cell21.style.backgroundColor == "red") {
    cell21.style.backgroundColor = "white"
  } else {
    cell21.classList.toggle('reed')
  }
}

function one2() {
  let cell02 = document.getElementById("zero2");
  let cell11 = document.getElementById("one1");
  let cell12 = document.getElementById("one2");
  let cell13 = document.getElementById("one3");
  let cell22 = document.getElementById("two2");

  if (cell02.style.backgroundColor == "red") {
    cell02.style.backgroundColor = "white"
  } else {
    cell02.classList.toggle('reed')
  }
  if (cell11.style.backgroundColor == "red") {
    cell11.style.backgroundColor = "white"
  } else {
    cell11.classList.toggle('reed')
  }
  if (cell12.style.backgroundColor == "red") {
    cell12.style.backgroundColor = "white"
  } else {
    cell12.classList.toggle('reed')
  }
  if (cell13.style.backgroundColor == "red") {
    cell13.style.backgroundColor = "white"
  } else {
    cell13.classList.toggle('reed')
  }
  if (cell22.style.backgroundColor == "red") {
    cell22.style.backgroundColor = "white"
  } else {
    cell22.classList.toggle('reed')
  }
}

function one3() {
  let cell03 = document.getElementById("zero3");
  let cell12 = document.getElementById("one2");
  let cell13 = document.getElementById("one3");
  let cell14 = document.getElementById("one4");
  let cell23 = document.getElementById("two3");

  if (cell03.style.backgroundColor == "red") {
    cell03.style.backgroundColor = "white"
  } else {
    cell03.classList.toggle('reed')
  }
  if (cell12.style.backgroundColor == "red") {
    cell12.style.backgroundColor = "white"
  } else {
    cell12.classList.toggle('reed')
  }
  if (cell13.style.backgroundColor == "red") {
    cell13.style.backgroundColor = "white"
  } else {
    cell13.classList.toggle('reed')
  }
  if (cell14.style.backgroundColor == "red") {
    cell14.style.backgroundColor = "white"
  } else {
    cell14.classList.toggle('reed')
  }
  if (cell23.style.backgroundColor == "red") {
    cell23.style.backgroundColor = "white"
  } else {
    cell23.classList.toggle('reed')
  }
}

function one4() {
  let cell04 = document.getElementById("zero4");
  let cell13 = document.getElementById("one3");
  let cell14 = document.getElementById("one4");
  let cell24 = document.getElementById("two4");

  if (cell04.style.backgroundColor == "red") {
    cell04.style.backgroundColor = "white"
  } else {
    cell04.classList.toggle('reed')
  }
  if (cell13.style.backgroundColor == "red") {
    cell13.style.backgroundColor = "white"
  } else {
    cell13.classList.toggle('reed')
  }
  if (cell14.style.backgroundColor == "red") {
    cell14.style.backgroundColor = "white"
  } else {
    cell14.classList.toggle('reed')
  }
  if (cell24.style.backgroundColor == "red") {
    cell24.style.backgroundColor = "white"
  } else {
    cell24.classList.toggle('reed')
  }
}

function two0() {
  let cell10 = document.getElementById("one0");
  let cell20 = document.getElementById("two0");
  let cell21 = document.getElementById("two1");
  let cell30 = document.getElementById("three0");

  if (cell10.style.backgroundColor == "red") {
    cell10.style.backgroundColor = "white"
  } else {
    cell10.classList.toggle('reed')
  }
  if (cell20.style.backgroundColor == "red") {
    cell20.style.backgroundColor = "white"
  } else {
    cell20.classList.toggle('reed')
  }
  if (cell21.style.backgroundColor == "red") {
    cell21.style.backgroundColor = "white"
  } else {
    cell21.classList.toggle('reed')
  }
  if (cell30.style.backgroundColor == "red") {
    cell30.style.backgroundColor = "white"
  } else {
    cell30.classList.toggle('reed')
  }
}

function two1() {
  let cell11 = document.getElementById("one1");
  let cell20 = document.getElementById("two0");
  let cell21 = document.getElementById("two1");
  let cell22 = document.getElementById("two2");
  let cell31 = document.getElementById("three1");

  if (cell11.style.backgroundColor == "red") {
    cell11.style.backgroundColor = "white"
  } else {
    cell11.classList.toggle('reed')
  }
  if (cell20.style.backgroundColor == "red") {
    cell20.style.backgroundColor = "white"
  } else {
    cell20.classList.toggle('reed')
  }
  if (cell21.style.backgroundColor == "red") {
    cell21.style.backgroundColor = "white"
  } else {
    cell21.classList.toggle('reed')
  }
  if (cell22.style.backgroundColor == "red") {
    cell22.style.backgroundColor = "white"
  } else {
    cell22.classList.toggle('reed')
  }
  if (cell31.style.backgroundColor == "red") {
    cell31.style.backgroundColor = "white"
  } else {
    cell31.classList.toggle('reed')
  }
}

function two2() {
  let cell12 = document.getElementById("one2");
  let cell21 = document.getElementById("two1");
  let cell22 = document.getElementById("two2");
  let cell23 = document.getElementById("two3");
  let cell32 = document.getElementById("three2");

  if (cell12.style.backgroundColor == "red") {
    cell12.style.backgroundColor = "white"
  } else {
    cell12.classList.toggle('reed')
  }
  if (cell21.style.backgroundColor == "red") {
    cell21.style.backgroundColor = "white"
  } else {
    cell21.classList.toggle('reed')
  }
  if (cell22.style.backgroundColor == "red") {
    cell22.style.backgroundColor = "white"
  } else {
    cell22.classList.toggle('reed')
  }
  if (cell23.style.backgroundColor == "red") {
    cell23.style.backgroundColor = "white"
  } else {
    cell23.classList.toggle('reed')
  }
  if (cell32.style.backgroundColor == "red") {
    cell32.style.backgroundColor = "white"
  } else {
    cell32.classList.toggle('reed')
  }
}

function two3() {
  let cell13 = document.getElementById("one3");
  let cell22 = document.getElementById("two2");
  let cell23 = document.getElementById("two3");
  let cell24 = document.getElementById("two4");
  let cell33 = document.getElementById("three3");

  if (cell13.style.backgroundColor == "red") {
    cell13.style.backgroundColor = "white"
  } else {
    cell13.classList.toggle('reed')
  }
  if (cell22.style.backgroundColor == "red") {
    cell22.style.backgroundColor = "white"
  } else {
    cell22.classList.toggle('reed')
  }
  if (cell23.style.backgroundColor == "red") {
    cell23.style.backgroundColor = "white"
  } else {
    cell23.classList.toggle('reed')
  }
  if (cell24.style.backgroundColor == "red") {
    cell24.style.backgroundColor = "white"
  } else {
    cell24.classList.toggle('reed')
  }
  if (cell33.style.backgroundColor == "red") {
    cell33.style.backgroundColor = "white"
  } else {
    cell33.classList.toggle('reed')
  }
}

function two4() {
  let cell14 = document.getElementById("one4");
  let cell23 = document.getElementById("two3");
  let cell24 = document.getElementById("two4");
  let cell34 = document.getElementById("three4");

  if (cell14.style.backgroundColor == "red") {
    cell14.style.backgroundColor = "white"
  } else {
    cell14.classList.toggle('reed')
  }
  if (cell23.style.backgroundColor == "red") {
    cell23.style.backgroundColor = "white"
  } else {
    cell23.classList.toggle('reed')
  }
  if (cell24.style.backgroundColor == "red") {
    cell24.style.backgroundColor = "white"
  } else {
    cell24.classList.toggle('reed')
  }
  if (cell34.style.backgroundColor == "red") {
    cell34.style.backgroundColor = "white"
  } else {
    cell34.classList.toggle('reed')
  }
}

function three0() {
  let cell20 = document.getElementById("two0");
  let cell30 = document.getElementById("three0");
  let cell31 = document.getElementById("three1");
  let cell40 = document.getElementById("four0");

  if (cell20.style.backgroundColor == "red") {
    cell20.style.backgroundColor = "white"
  } else {
    cell20.classList.toggle('reed')
  }
  if (cell30.style.backgroundColor == "red") {
    cell30.style.backgroundColor = "white"
  } else {
    cell30.classList.toggle('reed')
  }
  if (cell31.style.backgroundColor == "red") {
    cell31.style.backgroundColor = "white"
  } else {
    cell31.classList.toggle('reed')
  }
  if (cell40.style.backgroundColor == "red") {
    cell40.style.backgroundColor = "white"
  } else {
    cell40.classList.toggle('reed')
  }
}

function three1() {
  let cell21 = document.getElementById("two1");
  let cell30 = document.getElementById("three0");
  let cell31 = document.getElementById("three1");
  let cell32 = document.getElementById("three2");
  let cell41 = document.getElementById("four1");

  if (cell21.style.backgroundColor == "red") {
    cell21.style.backgroundColor = "white"
  } else {
    cell21.classList.toggle('reed')
  }
  if (cell30.style.backgroundColor == "red") {
    cell30.style.backgroundColor = "white"
  } else {
    cell30.classList.toggle('reed')
  }
  if (cell31.style.backgroundColor == "red") {
    cell31.style.backgroundColor = "white"
  } else {
    cell31.classList.toggle('reed')
  }
  if (cell32.style.backgroundColor == "red") {
    cell32.style.backgroundColor = "white"
  } else {
    cell32.classList.toggle('reed')
  }
  if (cell41.style.backgroundColor == "red") {
    cell41.style.backgroundColor = "white"
  } else {
    cell41.classList.toggle('reed')
  }
}

function three2() {
  let cell22 = document.getElementById("two2");
  let cell31 = document.getElementById("three1");
  let cell32 = document.getElementById("three2");
  let cell33 = document.getElementById("three3");
  let cell42 = document.getElementById("four2");

  if (cell22.style.backgroundColor == "red") {
    cell22.style.backgroundColor = "white"
  } else {
    cell22.classList.toggle('reed')
  }
  if (cell31.style.backgroundColor == "red") {
    cell31.style.backgroundColor = "white"
  } else {
    cell31.classList.toggle('reed')
  }
  if (cell32.style.backgroundColor == "red") {
    cell32.style.backgroundColor = "white"
  } else {
    cell32.classList.toggle('reed')
  }
  if (cell33.style.backgroundColor == "red") {
    cell33.style.backgroundColor = "white"
  } else {
    cell33.classList.toggle('reed')
  }
  if (cell42.style.backgroundColor == "red") {
    cell42.style.backgroundColor = "white"
  } else {
    cell42.classList.toggle('reed')
  }
}

function three3() {
  let cell23 = document.getElementById("two3");
  let cell32 = document.getElementById("three2");
  let cell33 = document.getElementById("three3");
  let cell34 = document.getElementById("three4");
  let cell43 = document.getElementById("four3");

  if (cell23.style.backgroundColor == "red") {
    cell23.style.backgroundColor = "white"
  } else {
    cell23.classList.toggle('reed')
  }
  if (cell33.style.backgroundColor == "red") {
    cell32.style.backgroundColor = "white"
  } else {
    cell32.classList.toggle('reed')
  }
  if (cell33.style.backgroundColor == "red") {
    cell33.style.backgroundColor = "white"
  } else {
    cell33.classList.toggle('reed')
  }
  if (cell34.style.backgroundColor == "red") {
    cell34.style.backgroundColor = "white"
  } else {
    cell34.classList.toggle('reed')
  }
  if (cell43.style.backgroundColor == "red") {
    cell43.style.backgroundColor = "white"
  } else {
    cell43.classList.toggle('reed')
  }
}

function three4() {
  let cell24 = document.getElementById("two4");
  let cell33 = document.getElementById("three3");
  let cell34 = document.getElementById("three4");
  let cell44 = document.getElementById("four4");

  if (cell24.style.backgroundColor == "red") {
    cell24.style.backgroundColor = "white"
  } else {
    cell24.classList.toggle('reed')
  }
  if (cell33.style.backgroundColor == "red") {
    cell33.style.backgroundColor = "white"
  } else {
    cell33.classList.toggle('reed')
  }
  if (cell34.style.backgroundColor == "red") {
    cell34.style.backgroundColor = "white"
  } else {
    cell34.classList.toggle('reed')
  }
  if (cell44.style.backgroundColor == "red") {
    cell44.style.backgroundColor = "white"
  } else {
    cell44.classList.toggle('reed')
  }
}

function four0() {
  let cell30 = document.getElementById("three0");
  let cell40 = document.getElementById("four0");
  let cell41 = document.getElementById("four1");

  if (cell30.style.backgroundColor == "red") {
    cell30.style.backgroundColor = "white"
  } else {
    cell30.classList.toggle('reed')
  }
  if (cell41.style.backgroundColor == "red") {
    cell41.style.backgroundColor = "white"
  } else {
    cell41.classList.toggle('reed')
  }
  if (cell40.style.backgroundColor == "red") {
    cell40.style.backgroundColor = "white"
  } else {
    cell40.classList.toggle('reed')
  }
}

function four1() {
  let cell31 = document.getElementById("three1");
  let cell40 = document.getElementById("four0");
  let cell41 = document.getElementById("four1");
  let cell42 = document.getElementById("four2");

  if (cell31.style.backgroundColor == "red") {
    cell31.style.backgroundColor = "white"
  } else {
    cell31.classList.toggle('reed')
  }
  if (cell40.style.backgroundColor == "red") {
    cell40.style.backgroundColor = "white"
  } else {
    cell40.classList.toggle('reed')
  }
  if (cell41.style.backgroundColor == "red") {
    cell41.style.backgroundColor = "white"
  } else {
    cell41.classList.toggle('reed')
  }
  if (cell42.style.backgroundColor == "red") {
    cell42.style.backgroundColor = "white"
  } else {
    cell42.classList.toggle('reed')
  }
}

function four2() {
  let cell32 = document.getElementById("three2");
  let cell41 = document.getElementById("four1");
  let cell42 = document.getElementById("four2");
  let cell43 = document.getElementById("four3");

  if (cell32.style.backgroundColor == "red") {
    cell32.style.backgroundColor = "white"
  } else {
    cell32.classList.toggle('reed')
  }
  if (cell41.style.backgroundColor == "red") {
    cell41.style.backgroundColor = "white"
  } else {
    cell41.classList.toggle('reed')
  }
  if (cell42.style.backgroundColor == "red") {
    cell42.style.backgroundColor = "white"
  } else {
    cell42.classList.toggle('reed')
  }
  if (cell43.style.backgroundColor == "red") {
    cell43.style.backgroundColor = "white"
  } else {
    cell43.classList.toggle('reed')
  }
}

function four3() {
  let cell33 = document.getElementById("three3");
  let cell42 = document.getElementById("four2");
  let cell43 = document.getElementById("four3");
  let cell44 = document.getElementById("four4");

  if (cell33.style.backgroundColor == "red") {
    cell33.style.backgroundColor = "white"
  } else {
    cell33.classList.toggle('reed')
  }
  if (cell42.style.backgroundColor == "red") {
    cell42.style.backgroundColor = "white"
  } else {
    cell42.classList.toggle('reed')
  }
  if (cell43.style.backgroundColor == "red") {
    cell43.style.backgroundColor = "white"
  } else {
    cell43.classList.toggle('reed')
  }
  if (cell44.style.backgroundColor == "red") {
    cell44.style.backgroundColor = "white"
  } else {
    cell44.classList.toggle('reed')
  }
}

function four4() {
  let cell34 = document.getElementById("three4");
  let cell43 = document.getElementById("four3");
  let cell44 = document.getElementById("four4");

  if (cell34.style.backgroundColor == "red") {
    cell34.style.backgroundColor = "white"
  } else {
    cell34.classList.toggle('reed')
  }
  if (cell43.style.backgroundColor == "red") {
    cell43.style.backgroundColor = "white"
  } else {
    cell43.classList.toggle('reed')
  }
  if (cell44.style.backgroundColor == "red") {
    cell44.style.backgroundColor = "white"
  } else {
    cell44.classList.toggle('reed')
  }
}

body {
  text-align: center;
  display: flex;
  justify-content: center;
}

table {
  /*border-radius: 10px;*/
  margin-top: 60px;
  border: 1px solid;
  background-color: lightcyan;
  box-shadow: 5px 5px 40px royalblue;
}

td {
  border: 1px solid;
  width: 40px;
  height: 40px;
}

p {
  font-weight: bold;
  font-size: 17px;
}

td {
  background-color: white;
}

.reed {
  background-color: red;
}

<div class="container">
  <h2>Table game</h2>
  <p>Try to color all of the cells to <b>red</b></p>
  <table>
    <tr>
      <td id="zero0" onclick="zero0()"></td>
      <td id="zero1" onclick="zero1()"></td>
      <td id="zero2" onclick="zero2()"></td>
      <td id="zero3" onclick="zero3()"></td>
      <td id="zero4" onclick="zero4()"></td>
    </tr>
    <tr>
      <td id="one0" onclick="one0()"></td>
      <td id="one1" onclick="one1()"></td>
      <td id="one2" onclick="one2()"></td>
      <td id="one3" onclick="one3()"></td>
      <td id="one4" onclick="one4()"></td>
    </tr>
    <tr>
      <td id="two0" onclick="two0()"></td>
      <td id="two1" onclick="two1()"></td>
      <td id="two2" onclick="two2()"></td>
      <td id="two3" onclick="two3()"></td>
      <td id="two4" onclick="two4()"></td>
    </tr>
    <tr>
      <td id="three0" onclick="three0()"></td>
      <td id="three1" onclick="three1()"></td>
      <td id="three2" onclick="three2()"></td>
      <td id="three3" onclick="three3()"></td>
      <td id="three4" onclick="three4()"></td>
    </tr>
    <tr>
      <td id="four0" onclick="four0()"></td>
      <td id="four1" onclick="four1()"></td>
      <td id="four2" onclick="four2()"></td>
      <td id="four3" onclick="four3()"></td>
      <td id="four4" onclick="four4()"></td>
    </tr>
  </table>
</div>