Skip to content
This is the classic game of Tetris written in pure HTML
TypeScript HTML
Branch: master
Clone or download
Latest commit 0064f09 Jul 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode testing CI build check Jan 12, 2019
.gitignore first checkin Dec 31, 2018
README.md added window resize support Jan 19, 2019
config.js display stats Jan 3, 2019
config.js.map
config.ts
favicon.ico added back scrolling touch controls Jan 12, 2019
github_logo.png added github logo Jul 25, 2019
index.html added github logo Jul 25, 2019
index.js removed win12 May 12, 2019
index.js.map removed win12 May 12, 2019
index.systemjs.js refactored with GAME_MODE, overhaul key/mouse input to avoid crash bugs Jan 11, 2019
index.ts removed win12 May 12, 2019
package-lock.json
package.json cleaned up package.json Jan 12, 2019
style.css first checkin Dec 31, 2018
tsconfig.json testing CI build check Jan 12, 2019

README.md

Tetris JS

Build status

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/

Architecture

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!

You can’t perform that action at this time.