Browser Games - Tetron

Project Overview

Tetron is a learning project that allows a user to play tetris in their browser. This project was an assignment from the Learner's Guild and the specs are derived from the assignment.

The original specs can be found below in this document. My goal was to learn about:

JavaScript object oriented programming
Canvas

Installation Instructions

git clone https://github.com/teqnickels/tetris.git
npm install
npm start

How To Play

In your terminal:

- In your browser go to: http://127.0.0.1:4321/tetris.html
- Use the <- & -> arrow keys to move pieces from left to right
- The up arrow rotates the pieces
- Typing 'p' will pause/unpause the game. Clicking Pause/Resume Game buttons will pause/unpause/'x' game.

File List

tetris
  ├── package.json
  └── public
      ├── css
      │   └── tetris.css
      ├── images
      │   ├── neon-background.jpg
      │   └── tetron.png
      ├── js
      │   ├── tetris.js
      │   └── tetrominoes.js
      └── tetris.html

Licensing

MIT License

Known Bugs

In early levels of the game, user's can slow the dropping of pieces by holding down the up arrow.
Preview of next piece is slightly distorted.

Changelog

April 15th 2018 - Added keyboard pause feature. Users can type 'p' to pause game April 19th 2018 - Added pause modal

News

Coming Soon

Original Specs from Assignment:

General

Artifact produced is a fork of the browser-games repo.
Variables, functions, files, etc. have appropriate and meaningful names.
HTML, CSS, and JS files are well formatted with proper spacing and indentation.
There is a clear separation of game logic code from view/rendering code.
All major features are added via pull requests with a clear description and concise commit messages.
The artifact produced is properly licensed, preferably with the MIT license.

Tetris

User stories and features for the game are added as issues to your repo with the label feature or user-story
You’ll have to define these yourself by looking at the rules of the game and coming up with the right user stories & features
jQuery is used for DOM manipulation code
Tetris game can be found at public/tetris.html
Tetris game is playable
Players have a score
Game page is linked from public/index.html

Stretch

Players can configure the key mapping (e.g. change the “drop” key to the space bar)
Game follows object-oriented patterns using ES6 classes

Resources

jQuery Learning Center #jquery Code School: Try jQuery #jquery #js #dom CSS Tricks: Learn jQuery from Scratch #jquery #js #dom Tetris Tutorial https://github.com/jonhoo/tetris-tutorial/ Video series on building tetris: part 1, part 2, part 3, and part 4