Basic Tetris HTML Game

Skip to content All gists Back to GitHub Sign in Sign up Instantly share code, notes, and snippets. @straker straker/README.md Last active Dec 14, 2022 30 11 Code Revisions 22 Stars 30 Forks 11 Basic Tetris HTML and JavaScript Game README.md Basic Tetris HTML and JavaScript Game This is a basic implementation of the game Tetris, but it's missing a few things intentionally and they're left as further exploration for the reader. Further Exploration Score When a line is cleared, the score should increase based on the number of lines cleared at once. See https://tetris.fandom.com/wiki/Scoring Display a high score using localSorage Next Piece Preview Show the next piece (or pieces) that will enter the playfield. See https://tetris.fandom.com/wiki/Next Hard Drop When the Space key is pressed, the piece should be placed as far down as possible. See https://tetris.fandom.com/wiki/Hard_Drop Mobile and touchscreen support Allow the game to be scaled down to a phone size. See https://codepen.io/straker/pen/VazMaL Support touch controls Important note: I will answer questions about the code but will not add more features or answer questions about adding more features. This series is meant to give a basic outline of the game but nothing more. License (CC0 1.0 Universal) You're free to use this game and code in any project, personal or commercial. There's no need to ask permission before using these. Giving attribution is not required, but appreciated. Other Basic Games Snake Pong Breakout Bomberman Frogger Missile Command Sokoban Doodle Jump Puzzle Bobble Helicopter Support Basic HTML Games are made possible by users like you. When you become a Patron, you get access to behind the scenes development logs, the ability to vote on which games I work on next, and early access to the next Basic HTML Game. Top Patrons Karar Al-Remahy UnbrandedTech tetris.html Basic Tetris HTML Game

@kazutokirigiya1 kazutokirigiya1 commented Dec 13, 2019 image @kazutokirigiya1 kazutokirigiya1 commented Dec 13, 2019 I increased the height and width by 100 and it didn't help anything, I may be that there is too many pixels in the space and so it clips out to coup with the lack of pixels. @straker Author straker commented Dec 13, 2019 @kazutokirigiya1 I'm not sure what the image is showing. What is clipping out in the image? The green tetis piece looks centered to the box. @ChristianCrousser ChristianCrousser commented Dec 17, 2019 Ive ran into a problem when trying to run this. From what I gather whenever a line clears it lowers the top of the grid. After about 3 tetris line clears or when you clear enough lines, the game will end like it is hitting the top of the screen even if close to the bottom. I cant seem to think of a fix for this. I can link a screenshot if you are curious. Thank you @ChristianCrousser ChristianCrousser commented Dec 17, 2019 Screen Shot 2019-12-17 at 11 57 49 AM @straker Author straker commented Dec 17, 2019 @ChristianCrousser I saw that bug like once when making it and could never reproduce it. I've looked over the code a ton but could never figure out how this happens... @kazutokirigiya1 kazutokirigiya1 commented Dec 18, 2019 yeah i don't see how that happened … @ChristianCrousser ChristianCrousser commented Dec 18, 2019 This doesnt happen for you? The only solution I can think of at this time is a function that adds rows to the top of the grid depending on how many rows were deleted. Say if you get a tetris then you add four rows and so on. @straker Author straker commented Dec 18, 2019 • Wait, I think I finally figured it out! So the problem is when I clear a line, I make the row equal to the row above it (setting the two rows to the same array): // drop every row above this one for (let r = row; r >= 0; r--) { playfield[r] = playfield[r-1]; } So after a couple of line clears, every row is now the same array, which means adding 1 cell to it adds 1 cell to every row. Instead the line clear should change the columns 1 by 1 to avoid this problem. for (let r = row; r >= 0; r--) { for (let c = col; c < playfield[r].length; c++) { playfield[r][c] = playfield[r-1][c]; } } @ChristianCrousser ChristianCrousser commented Dec 18, 2019 I think this is on the right track for sure. Your description of the problem makes a lot more sense than what I was thinking. I replaced that line of code with the new one and got a very strange result. The lines will not clear and shapes will no longer fall as well. Screen Shot 2019-12-18 at 4 01 55 PM @straker Author straker commented Dec 18, 2019 Dang. I'll work on this some more later tonight and try to get an update out. Thanks for the help. @straker Author straker commented Dec 19, 2019 It helps if I start c at 0 instead of a non existent col. for (let r = row; r >= 0; r--) { for (let c = 0; c < playfield[r].length; c++) { playfield[r][c] = playfield[r-1][c]; } } @madbandit00 madbandit00 commented Dec 19, 2019 Hi, can I have you guys twitter handle? I'm thinking of using this code for my website and would like to credit you guys :) @ChristianCrousser ChristianCrousser commented Dec 19, 2019 It works! Thank you Steven! Im sorry that I had to bother you so much with this. I know that whenever I have a problem with my stuff it bothers me like no other until it is fixed. Keep up the good work! And @madbandit00 it was all him. I only saw a small problem @straker Author straker commented Dec 19, 2019 You're welcome! I don't enjoy having code with bugs in it posted for others. Thanks for finding it so others don't experience it. @madbandit00 here's my twitter @dragonmax2016 dragonmax2016 commented Feb 14, 2020 can i add a delay to the locking so that you can do a classic tetris move @Pro496951 Pro496951 commented Apr 9, 2020 evryone see this:https://gist.github.com/Pro496951/a7537d2f313fbc6ebad1f74b83f84244 @Rajdabade2112 Rajdabade2112 commented May 30, 2020 How to restart this game?? ghost commented Jun 9, 2020 refresh the page @hoo-svg hoo-svg commented Oct 26, 2020 How do you make it clip out by the right side? I want mine to do that. @hoo-svg hoo-svg commented Oct 26, 2020 • This is the code: