Tetris

This is a single page site that allows people to play yet another remake of the classic Tetris game. The site is targeted toward people who enjoy games, like Tetris. This site will be useful for people who are interested in having a taste of nostalgia or who have never played Tetris before and stumble across this version.

Note: Below image updated as of 9/5/22.

Design

Wireframes

To kickstart the project design process, a hand-drawn wireframe was created in order to visualise this project idea.

After discussing this idea during the Mentor Project Planning session, the wireframe for the chosen project idea was re-created digitally using Balsamiq.

Typography

Google Fonts and Fontspace were used to search for and select the following fonts for this game.

'VT323' (from Google Fonts) was used for the stats and preview areas and 'Tetris 2' (from Fontspace by Zombie Unicorn) was used for the game title and menu texts.

Colours

The site's colour scheme was chosen using Coolers colour scheme generator and searching for trending 'Tetris' colour palettes.

I chose the following colour palette because it was the brightest.

Planning and execution

As with the previous portfolio project, Agile practices were used and documented in Trello (planning/design board and dev board) and Github Projects.

Please note that more task details + resources are available in the Trello boards than in the Github Project page.

Each board is divided into 3 swimlanes/columns:

• 'To Do' - used to list tasks that are yet to be done
• 'In Progress' - used to list tasks that are currently being carried out
• 'Done' - used to list completed tasks

After defining the status divisions for a task, the indicators for time constraints were defined using 't-shirt sizes'.

‘T-shirt sizes’ were defined to provide an estimate for the perceived difficulty of a task and extra labels to further separate tasks by what part of the process they’re related to, i.e. Requirements, Design, Development, and Testing. The project area labels have been defined as follows:

• ‘Requirements’ - refers to things that are directly taken from or related to the project’s assessment criteria rather than actions derived from a requirements capture process
• 'Design' - refers to steps taken towards the appearance of the website
• 'Development' - refers to steps taken towards the implementation of the website
• 'Testing' - refers to steps taken towards validating the HTML and CSS as well as testing the responsiveness of the website

At this point, user stories were created in order to produce tasks while thinking from a user's perspective.

All other user stories follow the same kind of format except for where the user story is self-explanatory of the task.

Please note that some user stories for 'Development' were not made at the time that the work was done as they should have been but have been added after the fact, using the time of relevant commits to provide a rough duration estimate.

Features

Each feature listed below was chosen to ultimately meet the project goal of portfolio project 2 - '...build an interactive front-end site. The site should respond to the users' actions, allowing users to actively engage with data, alter the way the site displays the information to achieve their preferred goals'.

A simple game of Tetris meets these requirements as follows:

• Responds to the users' actions by way of game controls and menu options
• Allows users to actively engage with data, i.e. playing the game
• Alters the way the site displays information through shape rotation, stats (score and level), and moving blocks through the grid

Here are the specific game features.

Existing features (Images updated as of 9/5/22)

• Main menu

  • Users able to see a main menu before starting the game.

    

    From here, a user can start the game and view game controls, credits and the leaderboard.

    Previous main menu appearance can be found here.

• Game controls

  • Users are able to use the arrow keys to control the movement of the Tetris blocks via keyboard or touch input as follows:

    

    Previous game controls appearance can be found here

• Game credits

  • Users are able to see a small scrolling thank you note I included.

    

    Previous game credits appearance can be found here

• Current game score counter and level indicator - 'Stats' area

  • Users are able to see their current game score and level while playing a game.

    Initially, this area contains dots as a placeholder until a game has begun.

    

    Previous game stats area appearance can be found here

• Persisting highscore table/leaderboard

  • Users are able to view highscores that persist after closing the browser, or refreshing the webpage, and returning to the game.

    Ideally, this should've been implemented in a way where scores would persist between players on different computers but that would've gone beyong this scope of this project. Instead, scores are stored locally using localStorage.

    

    Did not update this image since the functionality and appearance is the same, minus the stats appearance as shown in the previous bullet point.

• Multiplier for consequtive row clearing

  • In order to stay true to Tetris, I googled 'Tetris scoring system' and chose to base my code on the description given for the 'Original Nintendo scoring system' provided by Wikipedia.

    

    Resulting code:

    let level = 0; // incremented elsewhere
    let currentScore = 0; // incremented elsewhere
    let baseScorePerLinesCleared = [40, 100, 300, 1200];
    
    function incrementScore(numOfLinesCleared) {
        let baseScore = baseScorePerLinesCleared[numOfLinesCleared - 1] || baseScorePerLinesCleared[4];
        currentScore += baseScore * (level + 1);
    }
    

    In my haste, I completely forgot to incorporate a leveling system so I quickly put the following logic together:

    • A user advances to the next level, everytime they clear x amount of lines

      let totalNumOfLinesCleared = 0; // gets incremented every time a line is cleared
      
      function meetsNextLevelCriteria() {
          return totalNumOfLinesCleared <= (level * 5 + 5);
      }
      

    • The game speed also increases...

      let baseGameSpeed = 1000; // in ms
      
      function getGameSpeedForCurrentLevel() {
          let newSpeed = baseGameSpeed - (level * 100);
      
          if (newSpeed < 0) {
              newSpeed = 0; // equivalent of sudden death (I image because I haven't actually managed to get that far!)
          }
      
          return newSpeed;
      }
      

• Next shape preview

  • Like in classic Tetris, there is an area where users can preview the next shape to fall which gives them a chance to strategise while playing the game.

    

    Previous game stats area appearance can be found here

• Shape rotation

  • Lastly, users are able to rotate falling shapes. Tetris simply wouldn't be Tetris without it.

    To achieve this, I found and used code from a YouTube tutorial called 'Tetris, Block Movement and Rotation'. Alternatively, I could have stored all of the versions of the tetris block rotation states and achieved the same behaviour but I wanted to learn a smarter way to do it.

    I made use of and sectioned the referenced code toward the bottom of my block.js file and modified as appropriate.

    

    Did not update this image since the functionality and appearance are the same.

Future features

• Programmable controls

  • This would enable users to control which keys would do what in the game. E.g. users could use W, A, S, D instead of the arrow keys for block movement.

• Ability to choose themes

  • This would enable users to select from a preset list of themes, or maybe even define their own, in order to change the colour scheme of the game.

    I would have used the other trending tetris palettes from Coolors.co.

• Difficulty modes

  • To set this game apart from the classic Tetris in some way, I would've used the usual difficulty (speed increase) coupled with something else such as, an ever-increasing or decreasing grid, the random appearance of unclearable blocks in the game, or some kind of sudden death type occurrence.

  I made an attempt at this, as mentioned in 'Multiplier for consequtive row clearing' bullet point above but it needs work.

• Stats for fallen pieces

  • When searching for design ideas for my Tetris game using Google Images, one retro design caught my eye:

    

    I thought the in-game display of statistics for fallen pieces was really cool and would've been easy enough to implement but I decided to leave it out of this version.

• Ability to floor/fast drop a Tetris block to the bottom of the grid

  • This is a tetris classic! I left it for last, to be the cherry on top of the cake, but I didn't leave enough time for testing so this will have to be a future feature.

Languages and technologies used

• Languages

  • HTML5 - used to create and structure webpages using semantic (meaningful) markup
  • CSS3 - used Cascading Style Sheets to style HTML
    • Flexbox - used instead of float property for responsive web design
  • JavaScript - used to make webpages interactive

• Technologies

  • Autoprefixer - used to automatically add vendor prefixes for browser compatibility

  • cloudconvert - used to convert .png file for game icon into .ico file format

  • Coolors - used to provide colour scheme for Tetris blocks

  • EZGIF - used to create GIFS for this README

  • Trello - used to document planning/design and development project progress and steps

  • Git - used for version control

  • GitHub - used for internet hosting and version control through use of Git

  • Gitpod - used as online IDE for software development

    • The terminal was used to create branchs to work on before merging into the main branch. These branches have been preserved for the sake of the assessment, otherwise they would have been deleted after use.

    

    Updated to show resubmission-fixes branch as of 9/5/22.

Testing

Evidence for this section has been placed in its own .md file which can be found here.

Deployment

The site was deployed to GitHub pages using the steps listed below:

• In the GitHub repository, navigate to the Settings tab
• From the source section drop-down menu, select the 'main' branch
• Once the 'main' branch has been selected, the page will be automatically refreshed and indicate the state of deployment (which should eventually show as successful)

The live site can be found here - https://debzdk.github.io/tetris

Local deployment

Since my work is in a publicly-accesible repository, it can be copied in 3 different ways:

1. Cloning the repository

   git clone https://github.com/DebzDK/tetris.git

2. Forking the repository

   

3. Using Gitpod to create a new workspace for the repository with this button:

Credits

Content

The code used to rotate Tetris blocks is sourced from a YouTube video called 'Tetris, Block Movement and Rotation'. It details, step-by-step, how to create a Tetris game using React. The only steps followed and used in this project were the steps to achieve rotation in my block.js file.

The rest of the code is based on my prior attempt at a Tetris game that I completed as a 2nd year assignment in university which was built using Java's JApplet.

Media

Purpose	Credit	Source
Favicon	Vitaly Gorbachev	Flat icon
Tetris music	Downloads Khinsider	Tetris Gameboy 2 music
Tetris gameover sound effect	101 Soundboards	Game Over sound effect

Seeing as Tetris is a huge game, I had to do my due diligence and check copyright regarding use of the music.

The theme song 'Korobeiniki' is a Russian folk song and is free-to-use but recordings of it are, in fact, copyrighted and therefore cannot be commercially used. Thankfully, this game is non-commercial and simply an ode to my childhood in the form of a project.

Acknowledgements

Thanks to my brothers for introducing me to the world of games and thanks again to my mentor Tim Nelson for his encouragement and constructive feedback!