Snake Game in Processing

Processing Coding Questions
1

Hello! I’m a complete beginner with Processing. For my assignment, I want to make a snake game in Processing. Here is what I want to do;

  • Draw background
  • Create apple system; spawn one in on the grid when another is eaten
  • Death system; check if snake head has hit sides or itself
  • Controls
  • Restart
  • Growing; if snake eats apple, grow by one unit
  • Make the snake

Would someone be willing to guide me in the process? It would be much appreciated! :smiley:

My first step is making a grid. Here’s what I’ve done so far:

for(int grassA = 10; grassA < width - 10; grassA = grassA + 60){
    for(int grassB = 40; grassB < width - 10; grassB = grassB + 60){
      rect(grassB, 40, 30, 30);
      rect(grassA, 10, 30, 30);
    }
  }

It makes a 13x13 grid with 30px squares. The first two rows have alternating colors of dark green and green. I want to make it repeat so it keeps going down until I have a checkerboard pattern on the game board. Do I need more variables? Thanks in advance.

1 Like
2

Hi @Ephilorex,

I recommend you to check the reference or less boring, watch Daniel Shiffman’s tutorials :partying_face::partying_face:, after it you will find all much less complex.

Good luck :four_leaf_clover:

1 Like
3

but once you have some code ( and problems / questions )
you are welcome to ask here,
++ with good error description
++ pasting full ( running ) ( reduced to the problem ) code
here using the </> Preformatted text button.

i like you break down your ?homework? into

  • steps + +

already

1 Like
4

I have actually watched a lot of Mr. Shiffman’s videos, which has helped me a tremendous amount already. Thank you!

5

Alright, I’ll see how I can specify my question more! Thank you!

6

Mmmm ¿can you put your whole code? That for loop just draw 2 rows with void squares between them
gridTry

1 Like
7 
void setup(){
  size(440,440);
}

void draw(){
  drawGrid();
}


void drawGrid(){
  for(int grassX = 10; grassX < width - 10; grassX = grassX + 30){
    for(int grassY = 10; grassY < height - 10; grassY = grassY + 30){
      fill(62, 219, 59);
      rect(grassX,grassY,30,30);
    }
  }

  
  
  for(int grassA = 10; grassA < width - 10; grassA = grassA + 60){
    for(int grassB = 40; grassB < width - 10; grassB = grassB + 60){
      fill(33,181,72);
      rect(grassB,40,30,30);
      rect(grassA,10,30,30);
    }
  }
}

Sorry I was not being clear in the edit.

2 Likes
8

it looks already good, but just to see other coding take a test/look here:

// grid of rectangles,
int x = 10, y = x, w = 30, h = w, offset = 2;
int grid = 13, many = grid*grid;

color col1 = color(62, 219, 59);
color col2 = color(33, 181, 72);
boolean switchcol = true;

void setup() {
  size(440, 440);
  println("x "+x+" y "+y+" w "+w+" h "+h+" offset "+offset+" grid "+grid+" many "+many);
}

void draw() {
  drawGrid();
}

void selcol() {
  if ( switchcol ) fill(col1);
  else fill(col2);
  switchcol = ! switchcol;
}

void drawGrid() {
  switchcol = true;
  for (int i = 0; i < many; i++) {
    selcol();
    rect(x+(i%grid)*(w+offset), y+(floor(i/grid))*(h+offset), w, h);   // or any other shape/text on that position
  }
}
1 Like
9

That grid from @kll is so pro :star_struck:, you can take it or continue with your own grid, in this whay, check this:

This for is incomplete and nearly unnecessary (for the whole grid), just draws the first two rows :thinking:.

Think about your other for loop, it draws the whole grid. What about toggle the color with an if statement and a flag (like the variable “switchcol” by @kll)?

Watch the for loop:

  for(int grassX = 10; grassX < width - 10; grassX = grassX + 30){
    for(int grassY = 10; grassY < height - 10; grassY = grassY + 30){
      fill(62, 219, 59);
      rect(grassX,grassY,30,30);
    }
  }

You go over the x axis and for each col, you fill each row with squares, that’s nice :+1:.

Now try to toggle the color every time you draw a square (once you have done that, try to figure out how to toggle every column ) and when you have that solved, the grid will be done and we can continue with the next step :smiley:

keep on it :wink:

10

Hi, could you please explain to me the variable “w” and “offset”?

Also what does this do?

And how do the equations work? Could you please explain the code?

@Waboqueox could you also help me please? Thank you!

Also what does “many” do?

11

we talk about a grid of rectangles,
one rectangle has
x,y,w,h aka xpos,ypos,wide,height of the rectangle

also there can be a gap between them: offset

and a println(""); does a print to console, so you see the settings.

grid means how many to the right. 13 rects ( as you ordered )
if many = grid*grid its a symmetric setup, the total amount of rectangles.
but also you can say grid = 2, many = 8 and you get
1 2
3 4
5 6
7 8

and for the math…
https://processing.org/reference/modulo.html
https://processing.org/reference/floor_.html

1 Like