The Idea
For my Midterm I had my take on the Tetris game which I’ve been a fan of for years. I want to maintain the arcade/video game feel to it so I kept that in mind while creating my game. It consists of various components including shapes, grids, timers, and user input handling. The game aims to control the falling tetrominoes, rotating and moving them to form complete horizontal lines to clear rows. Once 5 rows have been cleared, the game levels up and the tetrominoes fall faster giving the player less time to find a good fit to clear the rows.
How It Works and Highlights
The project leverages object-oriented programming principles to organize code into manageable classes such as Tetris, Timer, and T-Grid. This modular approach enhances code readability and maintainability. The game mechanics are well-implemented, with smooth tetromino movement, collision detection, and row-clearing functionality. The user interface is intuitive, providing clear visual feedback through colorful shapes and text. The inclusion of background music and sound effects enhances the overall gaming experience. I created the background image and the first-page using elements on Canva.
displayGrid(pg, x, y, w, h, pallette) {
var nx = this.tGrid.nx;
var ny = this.tGrid.ny;
var cw = w / nx;
var ch = h / ny;
// Render background
for (var gy = 0; gy < ny; gy++) {
for (var gx = 0; gx < nx; gx++) {
var cx = x + gx * cw;
var cy = y + gy * ch;
pg.stroke(210);
if ((gx & 1) == 1) {
pg.fill(250);
} else {
pg.fill(240);
}
pg.rect(cx, cy, cw, ch);
}
}
// Render foreground (tetrominoes)
for (var gy = 0; gy < ny; gy++) {
for (var gx = 0; gx < nx; gx++) {
var cx = x + gx * cw;
var cy = y + gy * ch;
var valGrid = this.tGrid.getGridVal(gx, gy);
if (valGrid > 0) {
pg.stroke(0);
var rgb = pallette[valGrid % pallette.length];
pg.fill(rgb[0], rgb[1], rgb[2]);
pg.rect(cx, cy, cw, ch);
}
}
}
// Render active tetromino shape
var ks = this.tGrid.shapeSize;
var kr = ceil(this.tGrid.shapeSize / 2.0);
for (var ky = 0; ky < ks; ky++) {
for (var kx = 0; kx < ks; kx++) {
var gx = this.tGrid.sx + kx - kr;
var gy = this.tGrid.sy + ky - kr;
var cx = x + gx * cw;
var cy = y + gy * ch;
var valShape = this.tGrid.getShapeVal(kx, ky);
if (valShape != 0) {
pg.stroke(0);
var rgb = pallette[valShape % pallette.length];
pg.fill(rgb[0], rgb[1], rgb[2]);
pg.rect(cx, cy, cw, ch);
}
}
}
}
One really cool part of the code is how it draws the game grid. It splits the screen into smaller squares to represent each cell of the grid. Then, it fills these squares with colors to show the background, the falling shapes, and the shapes that have already landed. It does this by going through each cell of the grid and deciding what color it should be based on the game’s state. This method makes sure everything looks neat and organized on the screen, giving players a clear view of the game.
Areas for Improvement and Challenges
One area for improvement could be enhancing the visual appeal of the game by adding animations for tetromino movements and row clearing. Additionally, implementing more advanced gameplay features such as different game modes, power-ups, or multiplayer functionality could increase player engagement. Some challenges were adding a sound effect once every tetromino lands but I had several issues with it, also I was not able to get the tetromino count to stop once the game was over.
Design Inspiration
I took inspiration from EA’s Tetris mobile app game, here’s how it looks:
And here’s mine:
Credits
Sound Track: https://www.youtube.com/watch?v=NmCCQxVBfyM
Main Menu page: https://www.canva.com/
Code :https://www.youtube.com/@easywebsify
Additional Code Assistance: Chat GPT.
Final Sketch