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