Estoy tratando de aprender programación HTML/JS/CSS y traté de seguir un tutorial haciendo que el juego sea "serpiente". Estoy en una etapa en la que quiero dibujar la cabeza de la serpiente y he escrito el código, pero parece que no aparece. Me he sentado durante los últimos 30 minutos tratando de encontrar por qué mi código no funciona. Necesito ayuda para encontrar el error y poder dibujar la "cabeza" en la pizarra
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>El primer problema es que está intentando acceder a const body = [{x: 11, y:11}] antes de inicializar, luego está llamando a draw() sin ningún parámetro, así es como puede solucionar el problema
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); }