Home > other >  Snake head/body doesnt appear
Snake head/body doesnt appear

Time:05-26

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>

  • Related