Please someone help me with my snake game, can't get a good answer

JavaScript
1

Hey guys I’m making a snake game in JS. The original problem i was working on was trying to get the game to stop running by using clearInterval(game); once the snake head makes contact with the edge of the canvas. Once I figured that out it created a new problem. You can’t ride the snake on the edge of the canvas. This is a problem because the food will generate on the edge sometimes. Any ideas, I’m stumped. Thanks:)

2

Immediate impulse:
if(headX <= 0 || headY <= 0 || headX >= (cvsW-unit) || headY >= (cvsH-unit)) {
Why are these <= and >= ? the edge of the canvas is 0, that’s a valid place to be.

3

original I didn’t have those but because of that the snake head would go 1 unit outside the canvas before the game would stop

4

So do the check before you draw the head’s movement - if the head would be drawn in a spot outside the canvas, stop. Otherwise, let it be drawn.

In terms of your code, move the check down to where you redefine headX and headY.

5

are you saying move it above the for loop at the start of the draw function? cause the drawRect() method is within this for loop. If so this doesn’t work either

6

I’m saying copy lines 51-54, and insert them at line 65, and then remove the ='s. (and then clean up the original 51-54.)

1 Like
7

Oh my god thank you, now those instructions I can follow. Can you explain to me in the same way you gave me those instructions, how this is working compared to my previous method?

8

The previous method did things in this order:

Check if Head Is Outside Canvas (Stop if yes)
Move Head
Draw Head
Wait 70 milliseconds
Repeat

The only change I did was make the order:

Move Head
Check if Head Is Outside Canvas (Stop if yes)
Draw Head
Wait 70 milliseconds
Repeat

1 Like
9

Oh ok. I never would have seen or understood that, how did you? did it just click for you? or did you have to debug it a few times? Also I got a new problem. I just wanted to change things up and have the snake go through the wall and appear on the opposite side. The problem however is that the snake can ride 1 unit pass the edge of the canvas. Test it out head to the left side and cut down as soon as you pass the edge.

p.s to expand on what i was originally saying. I don’t want to keep posting on forums whenever I run into a problem I’ve been doing this for almost 2 years now and feel like I need to be seeing this kind of stuff. Is debugging and understanding program flow something that takes years and years; running into countless problems over and over again before you start to think like a computer? Is tht what it takes? And thanks again for the help

10

Debugging code does take some practice. I put together the following post about An introduction to debugging code that takes you through some of the initial steps using an example of code that help was being sought for.

You might find some useful tips there.

11

So how does the game ever end?

if (headX < 0) headX = cvsW;
Are you sure that’s where you want the head to go? Look at line 62 again…

12

Hey Paul, thank you I’ll check it out:)

13

ok i definitely should’ve seen that one

14

Got another problem lol, sorry your just so much help. I put a for loop that checks to see if the snake hit itself. Didn’t really know where to put it now knowing that placement is kinda a big deal, but any way say the snakes going left. If you quickly and i mean very quickly hit the up key or the down key then hit the right key you can turn the snake in on itself. Ideas?

15

You’re describing a movement-based fail condition. So… put it with the other movement-based fail condition.

I’m uncertain what you’re asking for help about here.

16

now that i think about i don’t think there is a fix, but to try and explain better you now how in my condition that determines the direction of the snake if (e.keyCode == 37 && direction != 'right') direction = 'left'; sayying that if the snake is going left it can’t go right. You have to go up then right, otherwise you can turn the snake backwards. A problem I always run into is sometimes i need to make a sharp turn in the opposite direction, so if I’m heading left I would go up then right really fast to make that sharp turn. If I go up and right fast enough the snake will turn back in on itself. I don’t think it can be fixed though just cause I’m pressing it way too fast. Also Now I’m trying to figure out how to make it so the food doesn’t generate inside the snake, any hints?

17

The snake’s body is being stored (sofar as i can see) as an array. If the food would generate in a space currently in the array, regenerate it.

18

makes sense, do you think theres a fix for that first problem?

19

Also i put this

for(let i = 0; i < snake.length; i++) {
   if(food.x == snake[i].x && food.y == snake[i].y) {
      food = {
         x : Math.floor(Math.random()*((cvsW/unit)-1)+1)*unit,
         y : Math.floor(Math.random()*((cvsH/unit)-1)+1)*unit
      }
   }
}

after I add a new head to the body, also instead of adding 3 heads I’m adding like 20 and speeding up the game so we can see if the food will spawn in the snake a lot sooner. Which It does, what am I doing wrong?

20

Well the snake has a width, but is being tracked as a singularity.

the algorithm as written will prevent the food from spawning directly where the snake is, but not partially where the snake is. Consider how you can adjust the algorithm to account for any overlap in the snake.