Code Monkey home page Code Monkey logo

tetris's Introduction

Tetris

Tetris is a classic puzzle game where the player arranges blocks with different shapes in real-time as they fall from the top of the playing area. The goal is to create horizontal lines without gaps, which, when created, disappear, giving the player points. The game ends when the stack of blocks reaches the top of the playing area.

This version is a web-based game created as an educational project to practice the fundamentals of game development, client-side MVC architectural patterns, and Object-Oriented Programming in JavaScript while following the Airbnb JavaScript Style Guide.

Technologies Used

  • JavaScript: The core logic for game functions, including block movements, rotation, scoring, and collision detection.
  • HTML: Used for structuring the game's viewport, next block preview, score display, and drawing graphics with the <canvas> element.
  • CSS: Styles the game, including the positioning of the game area, interface elements, and overall look and feel.
  • MVC Architecture: (Model-View-Controller) pattern is implemented here to separate concerns within the game. The model handles the game's state, the view renders the game on the browser, and the controller manages the user input and game logic.
  • Object-Oriented Programming (OOP): The application structure relies on OOP principles to define the game state and individual game elements as objects, facilitating easier management and scalability of the game code.
  • ESLint: Used for formatting and maintaining a consistent coding style throughout following best practices.

Getting Started

To play the game, you can visit the deployed version at https://drrosa.github.io/tetris. The game is fully playable in modern web browsers without the need for additional downloads or installations.

How to Play:

  • Use the arrow keys to move blocks left, right, and down.
  • Use the 'up' arrow key to rotate a block.
  • Try to fill up horizontal lines with blocks without any gaps. Each completed line will disappear, granting you points.
  • The game ends when the blocks stack up to the top of the playing area.

Next Steps

Planned future enhancements:

  • Adding a levels system where the game speed increases after clearing a certain number of lines.
  • Adding a leaderboard system to display high scores.
  • Mobile responsiveness to ensure an enjoyable gaming experience on smartphones and tablets.

Feel free to contribute or suggest improvements!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.