Code Tetris: JavaScript Tutorial for Beginners



Learn the basics of JavaScript by coding a Tetris game from scratch.

This is a great course for people who have never touched code before or people who want to review the fundamentals.

In this course, you will learn how to set up a project from scratch using the Atom code editor and your command prompt tool, as well as gain a fundamental understanding of JavaScript by building your very own version of Tetris.

🎥 Course from Ania Kubow. Check out her channel: https://www.youtube.com/channel/UC5DNytAJ6_FISueUfzZCVsw

💻 Code: https://github.com/kubowania/Tetris-Basic

⭐️ Course Contents ⭐️
⌨️ (0:00) Introduction
⌨️ (1:44) Setting up the project
⌨️ (7:47) HTML Basics
⌨️ (14:38) CSS Basics
⌨️ (17:46) Explaining Variables
⌨️ (23:04) Working with Arrays
⌨️ (27:42) What exactly is a function?
⌨️ (31:56) Arrow Functions and forEach()
⌨️ (35:04) Drawing Tetrominoes using classList.add()
⌨️ (45:32) Times and intervals
⌨️ (51:37) Using Modulus to define our place on the grid
⌨️ (55:48) Keycodes and events
⌨️ (1:00:02) Choosing items from Arrays
⌨️ (1:05:38) Displaying the ‘Next Up’ Tetromino
⌨️ (1:14:49) Adding a start and pause game function.
⌨️ (1:18:04) Splice()
⌨️ (1:21:07) Splice(), concat() and appendChild()
⌨️ (1:29:26) Game over using some() and innerHTML
⌨️ (1:31:58) Assigning colors to our Tetrominos

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

And subscribe so you don’t miss any tutorials: https://youtube.com/subscription_center?add_user=freecodecamp

48 thoughts on “Code Tetris: JavaScript Tutorial for Beginners

  1. I hope you enjoy my Tetris walkthrough! It was such a pleasure to make this for FreeCodeCamp – a community that helps me SO much on a daily basis! if you would like to make more games I have a few more on my channel with plenty more to come 🙂 Just click my YouTube profile

  2. Thank you so much for the video. I was modifying the game and added 3 levels of difficulty. When you selected a harder difficulty, the block would fall faster. However, when I implemented this, there's a bug when you lose. The program keeps putting a new tetrimino in the mini-grid and then proceeds to keep putting a new one in the game, but gets stuck in the original starting position. How could I fix this? Is there a way to stop the program/freeze the screen once the gameover function is called? Thanks!

  3. Also if you don't want to see the upcoming tetromino being "too low" and freeze in air on your screen when you did a tetris you should put addScore() function above any other in freeze() function. So it looks like this:
    function freeze() {

    .
    .
    .
    .
    —–> addScore()
    <—–

    draw()

    displayShape()

    gameOver()

    }

    }

    Also thanks to Ania for great tutorial!

  4. Just let people know, this is not for beginners who has zero coding experience so don’t feel bad if you find it super hard, I’m a 4th year CS student come here to learn JS, and It is really difficult for me as well.

  5. current.forEach(index => squares[currentPosition + index].classList.add('taken'))

    Why add class 'taken'' make tetromino stop. Help me pls

  6. How am I suppose to learn anything with this beautiful Valkyrie gazing into my soul, with her crystal blue eyes, whispering her sweet honied syntax into my ears?

  7. Business Opportunity in Ruvol

    I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”

    It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”

    The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.

    HOW IS RUVOL PLAYED and HOW YOU CAN MONETIZE IT?

    I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0

    BIG MONEY POTENTIAL IN RUVOL!

    It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.

    You may contact me at: rodolfovitangcol@gmail.com.

    Thanks and God bless!

    RODOLFO MARTIN VITANGCOL
    The Ruvol Inventor

  8. Hi,

    I am confused on this
    current.some(index => squares[currentPosition + index + width].classList.contains('taken'))

    there is no index passed to this function.

    Thanks

  9. If anyone is interested in rotations that more closely resemble normal Tetris rotations here are mine.
    const lTetrominoe = [

    [width, width+1, width+2, 2],

    [1, width+1, width*2+1, width*2+2],

    [width*2, width, width+1, width+2],

    [0, 1, width+1, width*2+1],

    ];

    const zTetrominoe = [

    [width, width+1, 1, 2],

    [1, width+1, width+2, width*2+2],

    [width*2, width*2+1, width+1, width+2],

    [0, width, width+1, width*2+1]

    ];

    const tTetrominoe = [

    [width, width+1, 1, width + 2],

    [1, width+1, width*2+1, width+2],

    [width, width+1, width+2, width*2+1],

    [1, width+1, width*2+1, width]

    ];

    const oTetrominoe = [

    [1, width+1, 2, width+2],

    [1, width+1, 2, width+2],

    [1, width+1, 2, width+2],

    [1, width+1, 2, width+2],

    ];

    const iTetramino = [

    [width, width+1, width+2, width+3],

    [2, width+2, width*2+2, width*3+2],

    [width*2, width*2+1, width*2+2, width*2+3],

    [1, width+1, width*2+1, width*3+1],

    ];

  10. Great well presented tutorial! This was my first attempt at JavaScript and although it was challenging and I needed to look some things up for further explanation, I thoroughly enjoyed all of it and feel as though I have learned a lot. It took me about 12 hours to get to the end and I am now looking forward to doing more. Many Thanks!

  11. Took me like 15 minutes to figure out what she was doing with width and drawing the tetrominoes. I am not new to coding but she did not explain how this worked and it was super confusing. It's pretty simple once you understand it but she did not even try to break it down. 5 min could have save a lot of people some headache.

  12. I've discovered 2 bugs, tetrominoes can rotated into other tetrominoes and if a tetromino is rotated on the edge of the screen it will move into the other side of the screen, anyone know how to fix these?

  13. I voted this down because:

    1. i think the explanation of the concepts was terrible
    2. the project has still multiple bugs at the end (e.g. you can still do stuff, moving down for example when paused)
    3. some bad coding habbits are introduced here (e.g. using index in every forEach…)

  14. 1:27:19

    getting
    Uncaught TypeError: scoreDisplay is null
    addScore file:///Users/r2d2/Desktop/basic_tetris/app.js:196
    freeze file:///Users/r2d2/Desktop/basic_tetris/app.js:106
    moveDown file:///Users/r2d2/Desktop/basic_tetris/app.js:92
    setInterval handler* file:///Users/r2d2/Desktop/basic_tetris/app.js:183
    EventListener.handleEvent* file:///Users/r2d2/Desktop/basic_tetris/app.js:177
    EventListener.handleEvent* file:///Users/r2d2/Desktop/basic_tetris/app.js:1

    my code is the same as the tutorial. even tried copying the code from the github. still get this error

  15. Here are some MISTAKES in this tutorial that caused me to get stuck:

    3:53 – the " atom . " command will not open Atom until you Install Shell Commands which come aa minute later in the tutorial.
    14:02 – right click "Open In Browser" seems to be an atom plugin she had pre-installed: apm install open-in-browser if you want it.

  16. are you serious pick yellow as bg and blue as foreground…..omg, dont do this ! my eyes…..they so enjoying to watch and listen so beautiful colors and pictures…. and then yellow and blue.. like a sickle in a…

  17. Really enjoyed this course, but it's definitely not for beginners. If you are thinking of giving it up, keep going. I found answers for every question I had in the comments here. It's a steep curve, but it's absolutely doable. You can do it!

Leave a Reply

Your email address will not be published. Required fields are marked *