Struggling with snake game

JavaScript
1

I am trying to figure out to how make the snake randomly appear somewhere inside the map, but I am struggling with the logic. Below is my code. I am new to html, javascript, and css so I apologize. For some reason suddenly the map is not showing with a green background. Any help is appreciated. Code: https://codepen.io/umalik1910/pen/NeEYVr

2

Your code is not displaying when I click the link.

3

My apologies. It should be viewable. I fixed the link now.

4

The green background is not showing because:

<script> </script>
are not needed on codepen.

var snake [x : Math.floor(Math.random()*400), y : Math.floor(Math.random()*400); ];
is invalid syntax

5

Did you mean this instead?

var snake = { 
    x : Math.floor(Math.random()*400), 
    y : Math.floor(Math.random()*400)
};
1 Like
6

I am creating a snake game in javascript. I have been placing the snake randomly every time and started moving the snake somehow. My first question is how should I approach moving the snake array automatically in a direction. And is how the function to move the snake around and how to improve it to allow the snake to keep moving in the key pressed unless a different key is pressed? Code: https://codepen.io/umalik1910/pen/NeEYVr

7

One way would be to use a timer interval that refreshes your canvas every x seconds, for instance this would move your snake in the positive x direction every second:

const startTimer = () =>{
  const intervalID = setInterval(()=>{
    snake.x += snake.moveAmount;
    drawMap();
    drawSnake();
  },1000)
}

and below your main function calls afte you initialize your map and snake you’d call the above function to start the timer with startTimer() , of course this is very crude and there are a host of things like boundaries, movement direction, clearing out timer IDs, etc that you’d have to account for and code but that’s the general direction.
Also, some people prefer window.requestAnimationFrame() to using setInterval(), there are some advantages if your program is going to be refresh intensive, in effect it is like using setInterval() with an interval of ~16ms but with some performance advantages, personally I would just start with setInterval() to make it simple and refactor later. You can read about window.requestAnimationFrame() here https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

8

I am trying to make a snake game and was trying to randomly place the food item on the canvas map. However, the snake’s food item is not being generated on the map for some reason and do not get why. How to fix?
Code: https://codepen.io/umalik1910/pen/oJJGZx

9

in createFood(), you’re trying to access snake[i], but snake isn’t an array. It’s an object.

also you declare food as a local variable inside of createFood(), but try to access it later on in another function but you can’t because it’s local to createFood()

1 Like
10

how would you suggest then to make sure to that the food item is on the same place as the snake?

11

I am making a snake game and trying to make sure that the the the food item does not have the same coordinates as the snake. As a result, I tried something inside createSnake() function. Am I doing it properly for this game? If not what should I do?
Code: https://codepen.io/umalik1910/pen/oJJGZx

12

@newbiecoder I have merged the 4 separate threads regarding your snake game project into your original/firstl thread, as you will get better answers if the threads are unified in one, please post any future questions / comments you have in regards to this topic to this thread.

Best Regards,
Dereje