Video Tutorial: Tetris with HTML5 and JS

In this tutorial you will learn how to create a simple Tetris clone using HTML5 and Javascript. In addition to keyboard control, you will implement touch interaction so that the game can be played on mobile devices such as the iPhone and Android phones.

It's a doozy, so you may want to break it up into multiple viewing sessions or make sure you've got time to spare.

You can download the starter pack to follow along, or download the completed project.

Bookmark and Share

3 Responses to “Video Tutorial: Tetris with HTML5 and JS”

  1. Ramya says:

    Hi Rhuno,

    i saw your tetris tutorial as i’m trying to develop tetris too. its amazing.
    But i do not want to use the images and draw them on board. i want to directly draw the shapes using the fillRect function. i reused your code and tried to make those changes as i wanted. But unfortunately its not working. Have you anywhere tried implementing this logic or is there any way that you could help me as i’m new to programming and javascript.

  2. aparna says:

    Hi rhuno,

    I found your tetris code to very interesting. I saw the entire video and learned how you have implemented in HTML5. I am trying to add some text fields like Username,Score. I am not able to edit the text field when I try to give the Username. Please find the code from index.html below.

    Lines:

    Name:
    Score:

  3. Rhuno says:

    Ramya, I originally drawing the images using the fillRect and line functions; however, I would strongly recommend NOT doing it that way. It was incredibly slow and makes the game nearly unplayable. I only switched to images after seeing how slow it was.

    Aparna, you could do this several ways. You could add regular textfields below the game area and draw their contents to the game board (if desired) or you could listen for key strokes and draw the letters directly without additional textfields. You’d want to allow this at certain times so as not to capture the game input as part of the name.

Leave a Reply

Subscribe to RSS feed FGS5 Badge