This is the classic game of Tetris written in pure HTML (No Canvas 2D Controls). It uses HTML Tables and jQuery for rendering, and is surprisingly pretty fast. I know there's a lot of these out on the web but I wanted to create something that looked minimalistic yet elegant with excellent controls and compatibility.
Wide browser support on both desktop and mobile devices. Includes keyboard, touch, and even Xbox Gamepad Support! It is fully responsive and on larger screens it displays more information like the next piece. I spent quite a bit of time tweaking the touch controls to make it feel smooth and responsive on any smartphone.
See demo here: https://www.neilb.net/tetrisjs/
The code references a few external libraries:
jQuery for DOM manipulation and rendering
Bootstrap for button styles and grid layout for desktop/mobile
Rivets for binding of data labels likes score, lines, etc..
RequireJS as the AMD module loader of the compiled TypeScript JS files
Font Awesome for directional icons
I used the following styles to extend the touch surface to the entire screen:
body, html {
height: 100%;
}The code is written in TypeScript, to run and compile it locally use the following commands:
npm install
tsc
Please send me any feedback or bugs you may find.
Thanks!
The multiplayer version of this repo is here