Snake head/body doesnt appear

Issue

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>

Solution

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

Answered By – Faizal Hussain

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.