Snake head/body doesnt appear-CodePudding

I am trying to learn HTML/JS/CSS programming and tried to follow a tutorial making the game "snake". I am at a stage where I want to draw the head of the snake and have written the code but it doesn't seem to appear. I have sat for the last 30min trying to find why my code doesn't work. I need help to find the mistake so I can draw the "head" on the board

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>

CodePudding user response：

The first issue is that you're trying to access const body = [{x: 11, y:11}] before initializing, next you're calling draw() without any parameters, here is how you can fix the issue

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);
}

CodePudding user response：

I am not quite sure what your code is supposed to be doing. But here's the sample without errors. All the issues I explained in the comment section all rectified.

Issues Fixed:

Function calls main() and draw(), both functions require parameters and you did not provide them in your code.
Lexical issue with your variables and where they are used. body was declared after it was used. It must be declared before and then used. So, I moved it up.

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

function main(time)
{
  window.requestAnimationFrame(main);
  if ((time - render) < 1/speed) return; //"return" works here as "break" in python
  render = time;
  update();
  draw(board); //board is required as param when calling draw()
}

//snake
main(10); // time as param is required when calling main()

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>