# Snake Game in Processing
**URL:** https://discourse.processing.org/t/snake-game-in-processing/14921
**Category:** Coding Questions
**Tags:** homework
**Created:** [October 24, 2019, 11:34am UTC](https://discourse.processing.org/t/snake-game-in-processing/14921 "2019-10-24T11:34:57Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Ephilorex](https://discourse.processing.org/u/Ephilorex)
#### Post date: [October 24, 2019, 11:34am UTC](https://discourse.processing.org/t/snake-game-in-processing/14921/1 "2019-10-24T11:34:57Z")
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! 😃
My first step is making a grid. Here’s what I’ve done so far:
```auto
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.
---
### Author:  [@Waboqueox](https://discourse.processing.org/u/Waboqueox)
#### Post date: [October 24, 2019, 12:59pm UTC](https://discourse.processing.org/t/snake-game-in-processing/14921/2 "2019-10-24T12:59:21Z")
Hi @Ephilorex,
I recommend you to check the [reference](https://processing.org/reference/) or less boring, watch [Daniel Shiffman’s tutorials](https://www.youtube.com/watch?v=2VLaIr5Ckbs&list=PLRqwX-V7Uu6ZYJC7L-r6rX6utt6wwJCyi) 🥳🥳, after it you will find all much less complex.
Good luck 🍀
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [October 24, 2019, 1:05pm UTC](https://discourse.processing.org/t/snake-game-in-processing/14921/3 "2019-10-24T13:05:57Z")
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
* * *
---
### Author:  [@Ephilorex](https://discourse.processing.org/u/Ephilorex)
#### Post date: [October 24, 2019, 1:22pm UTC](https://discourse.processing.org/t/snake-game-in-processing/14921/4 "2019-10-24T13:22:05Z")
I have actually watched a lot of Mr. Shiffman’s videos, which has helped me a tremendous amount already. Thank you!
---
### Author:  [@Ephilorex](https://discourse.processing.org/u/Ephilorex)
#### Post date: [October 24, 2019, 1:22pm UTC](https://discourse.processing.org/t/snake-game-in-processing/14921/5 "2019-10-24T13:22:38Z")
Alright, I’ll see how I can specify my question more! Thank you!
---
### Author:  [@Waboqueox](https://discourse.processing.org/u/Waboqueox)
#### Post date: [October 25, 2019, 7:36am UTC](https://discourse.processing.org/t/snake-game-in-processing/14921/6 "2019-10-25T07:36:50Z")
> [@Ephilorex](#):
>
> 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.
Mmmm ¿can you put your whole code? That for loop just draw 2 rows with void squares between them
---
### Author:  [@Ephilorex](https://discourse.processing.org/u/Ephilorex)
#### Post date: [October 25, 2019, 8:44am UTC](https://discourse.processing.org/t/snake-game-in-processing/14921/7 "2019-10-25T08:44:49Z")
```auto
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.
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [October 25, 2019, 9:07am UTC](https://discourse.processing.org/t/snake-game-in-processing/14921/8 "2019-10-25T09:07:41Z")
it looks already good, but just to see other coding take a test/look here:
```auto
// 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
}
}
```
---
### Author:  [@Waboqueox](https://discourse.processing.org/u/Waboqueox)
#### Post date: [October 25, 2019, 9:33am UTC](https://discourse.processing.org/t/snake-game-in-processing/14921/9 "2019-10-25T09:33:30Z")
That grid from @kll is so pro 🤩, you can take it or continue with your own grid, in this whay, check this:
> [@Ephilorex](#):
>
> 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); } }
This for is incomplete and nearly unnecessary (for the whole grid), just draws the first two rows 🤔.
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:
```auto
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 👍.
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 😃
keep on it 😉
---
### Author:  [@Ephilorex](https://discourse.processing.org/u/Ephilorex)
#### Post date: [October 25, 2019, 2:09pm UTC](https://discourse.processing.org/t/snake-game-in-processing/14921/10 "2019-10-25T14:09:32Z")
> [@kll](#):
>
> int x = 10, y = x, w = 30, h = w, offset = 2;
Hi, could you please explain to me the variable “w” and “offset”?
> [@kll](#):
>
> println("x “+x+” y “+y+” w “+w+” h “+h+” offset “+offset+” grid “+grid+” many "+many);
Also what does this do?
> [@kll](#):
>
> rect(x+(i%grid)_(w+offset), y+(floor(i/grid))_(h+offset), w, h);
And how do the equations work? Could you please explain the code?
@Waboqueox could you also help me please? Thank you!
> [@kll](#):
>
> int grid = 13, many = grid\*grid;
Also what does “many” do?
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [October 25, 2019, 2:14pm UTC](https://discourse.processing.org/t/snake-game-in-processing/14921/11 "2019-10-25T14:14:30Z")
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/modulo.html)
[https://processing.org/reference/floor\_.html](https://processing.org/reference/floor_.html)