Building the Grid

In this section, we will discuss how to build the grid for our Tetris game using p5.js. The grid is a crucial component of the game as it is where the Tetris blocks will be placed and moved around.

We will be using a 2D array to represent our grid. Each cell in the array will represent a cell in the Tetris grid. We will initialize all cells to be empty at the start of the game.

We will also need to create a function to draw the grid on the screen. This function will loop through each cell in our 2D array and draw a square at the corresponding location on the screen.

Finally, we will need to create a function to update the grid. This function will be called whenever a Tetris block is moved or rotated. It will update the 2D array to reflect the new state of the grid.

Rows:

Columns:

Reset

Prompt Output:

Click on the prompt to copy it to clipboard

📋 Copy Prompt

Section 2. Tetrominos

In this section, we will discuss how to create the Tetrominos for our Tetris game using p5.js. The Tetrominos are the shapes that will be falling from the top of the screen. There are seven different Tetrominos in total: I, J, L, O, S, T, and Z.

We will be using a 2D array to represent each Tetromino. Each cell in the array will represent a cell in the Tetromino. We will initialize all cells to be empty at the start of the game.

We will also need to create a function to draw the Tetromino on the screen. This function will loop through each cell in our 2D array and draw a square at the corresponding location on the screen.

Finally, we will need to create a function to update the Tetromino. This function will be called whenever a Tetromino is moved or rotated. It will update the 2D array to reflect the new state of the Tetromino.

Prompt Output:

Click on the prompt to copy it to clipboard

📋 Copy Prompt

1. Define Tetrominos: Create 2D arrays for each of the seven Tetromino shapes (I, J, L, O, S, T, and Z). Each cell in these arrays represents a block in the Tetromino.

   const I = [[1, 1, 1, 1]], J = [[1, 0, 0], [1, 1, 1]], L = [[0, 0, 1], [1, 1, 1]], O = [[1, 1], [1, 1]], S = [[0, 1, 1], [1, 1, 0]], T = [[0, 1, 0], [1, 1, 1]], Z = [[1, 1, 0], [0, 1, 1]];

2. Drawing Tetrominos: Develop a function to draw a Tetromino on the screen. This function should loop through each cell in the Tetromino's 2D array and draw a square at the corresponding location.

   function drawTetromino(tetromino, x, y, size) {
               for (let i = 0; i < tetromino.length; i++) {
               for (let j = 0; j < tetromino[i].length; j++) {
                   if (tetromino[i][j] === 1) {
                   rect(x + j * size, y + i * size, size, size);
                   }
               }
               }
           }
           

3. Updating Tetrominos: Implement a function to update the position and rotation of a Tetromino. This function should modify the Tetromino's 2D array to reflect its new state after movement or rotation.

   function updateTetromino(tetromino, direction) {
               // Rotate or move the tetromino based on the direction
               // This is a placeholder and needs to be implemented based on the game's logic
           }
           

Tetrominos are a great usecase for "Scenario Outlines" in Gherkin BDD. We can easily define a map of valid rotations, for example, and loop through them all, reusing the same logic to validate all 7 * 4 possibilities;

ChatGPT Says: Don't Forget...

Remember to always test your game thoroughly. Make sure all Tetromino rotations and movements work as expected and the game ends when it should.

Game Loop

In this section, we will discuss how to create the game loop for our Tetris game using p5.js. The game loop is responsible for updating the state of the game and drawing it on the screen.

We will need to create a function to update the state of the game. This function will be called every frame and will be responsible for updating the position of the Tetromino and checking if it has collided with any other Tetrominos.

We will also need to create a function to draw the state of the game on the screen. This function will be called every frame and will be responsible for drawing the Tetromino and the grid.

Finally, we will need to create a function to handle user input. This function will be called whenever the user presses a key on the keyboard. It will be responsible for moving the Tetromino and rotating it.

Controls

In this section, we will discuss how to create the controls for our Tetris game using p5.js. The controls are responsible for moving the Tetromino and rotating it.

We will need to create a function to handle user input. This function will be called whenever the user presses a key on the keyboard. It will be responsible for moving the Tetromino and rotating it.

We will also need to create a function to check if the Tetromino has collided with any other Tetrominos. This function will be called whenever the Tetromino is moved or rotated. It will be responsible for checking if the Tetromino has collided with any other Tetrominos.

Finally, we will need to create a function to update the state of the game. This function will be called every frame and will be responsible for updating the position of the Tetromino and checking if it has collided with any other Tetrominos.

Mobile Considerations

In this section, we will discuss how to make our Tetris game touch responsive using p5.js. The game will be playable on both desktop and mobile devices.

We will need to create a function to handle user input. This function will be called whenever the user presses a key on the keyboard or touches the screen. It will be responsible for moving the Tetromino and rotating it.

We will also need to create a function to check if the Tetromino has collided with any other Tetrominos. This function will be called whenever the Tetromino is moved or rotated. It will be responsible for checking if the Tetromino has collided with any other Tetrominos.

Finally, we will need to create a function to update the state of the game. This function will be called every frame and will be responsible for updating the position of the Tetromino and checking if it has collided with any other Tetrominos.

View Final Results

In this section, you can view the final results of your Tetris game. You can see how the game looks and behaves after implementing all the features discussed in the tutorial.

You can interact with the game, play it, and test its features. This will give you a better understanding of how the different parts of the game work together.

Enjoy playing your Tetris game!

Future Work

In this section, we will discuss some ideas for future work on our Tetris game using p5.js. The game is currently playable on both desktop and mobile devices.

We could add more Tetrominos to the game. There are seven different Tetrominos in total: I, J, L, O, S, T, and Z.

We could also add more levels to the game. Currently, there is only one level.

We could also add a high score system to the game. Currently, there is no way to keep track of the player's score.

We could also consider adding a multiplayer mode to the game. This would allow players to compete against each other in real-time, adding a new level of challenge and excitement to the game.

We could also consider adding custom themes to the game. This would allow players to personalize their gaming experience and make the game more visually appealing.

Rubik's Cube Version

Coming soon...

🎉 Vote for the Next Tutorial!

We value your opinion! Please vote for the next game you'd like to see in our series:

Space Invaders with p5.js and ChatGPT
Pacman with p5.js and ChatGPT
Snake with p5.js and ChatGPT