蛇head/body没有出现

Snake head/body doesnt appear

我正在尝试学习 HTML/JS/CSS 编程,并尝试按照教程制作游戏“贪吃蛇”。 我正处于想画蛇头的阶段,已经写了代码,但是好像没有出现。我已经坐了最后 30 分钟,试图找出我的代码为何不起作用的原因。我需要帮助找出错误,这样我才能在黑板上画出“头”

let speed = 2
let render = 0
const board = document.getElementById("board")

function main(time){
  window.requestAnimationFrame(main)
  if ((time - render) < 1/speed) return //"return" works here as "break" in python

  render = time

  update()
  draw()
}
main();


//snake

const body = [{x: 11, y:11}]

function sUpdate(){

}


function sDraw(board){
  body.forEach(part => {
    // basically puts it on the board using x,y
    const sElement  = document.createElement("div")
    sElement.style.gridRowStart = part.x
    sElement.style.gridColumnStart = part.y
    sElement.classList.add("snake") //adds the css
    board.append(sElement)
  })
}

function update() {

}

function draw(board) {
  sDraw(board);
}
/* board */ 
body {
  height: 100vh;
  width: 100vw;
  
  /* all things get the same size (flex) and location (justify-content for row and align itmes for colomn) */
  display: flex;
  justify-content: center;
  align-items: center;
  margin:0;
}

#board {
  background-color: #000;
  
  /* rezises so it is always a square */
  width: 90vmin;
  height: 90vmin;

  display: grid;
  grid-template-rows: repeat(21,1fr);
  grid-template-columns: repeat(21,1fr);
}

.snake{
  background-color: #fff;
  border:  .25vmin solid black;
}

.food{
  background-color: #ff0000;
  border:  .25vmin solid black;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Snake</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div id="board"></div>
    <script src="script.js"></script>
  </body>
</html>

第一个问题是您在初始化之前尝试访问 const body = [{x: 11, y:11}],接下来您在调用 draw() 时不带任何参数,这是解决问题的方法

let speed = 2
let render = 0
const board = document.getElementById("board");
const body = [{x: 11, y:11}]

function main(time){
  window.requestAnimationFrame(main)
  if ((time - render) < 1/speed) return //"return" works here as "break" in python

  render = time

  update()
  draw(board)
}
main();


//snake



function sUpdate(){

}


function sDraw(board){
  body.forEach(part => {
    // basically puts it on the board using x,y
    const sElement  = document.createElement("div")
    sElement.style.gridRowStart = part.x
    sElement.style.gridColumnStart = part.y
    sElement.classList.add("snake") //adds the css
    board.append(sElement)
  })
}

function update() {

}

function draw(board) {
  sDraw(board);
}