Giter Club home page Giter Club logo

typebit's Introduction

typebit

Background

typebit is a typing game in a charming pixelated style made with sweet Vanilla JavaScript. Accurate typing on a keyboard allows your little animal to proceed through a 2D environment and blast your way through enemies.

Enemies have words above their heads. Typing those words gets rid of the enemies in your way! Typing inaccuracies or failing to get rid of an enemy before it reaches you will decrease your health. You you may encounter road blocks that require a minimum typing speed to get through them.

Completing each level of the game will display player stats.

Functionality & MVPs

In typebit, users will be able to:

  • use accurate typing to get rid of enemies
  • type faster to break down blockades

In addition, this project will include:

  • A tutorial describing the background and rules of the game
  • A production README

Wireframes

typebit wireframe

  • Nav links include links to this project's Github repo and my LinkedIn
  • Menu links include optionsn for the player to restart the game
  • Near the bottom of the screen are buttons that allow the user to start the game or view a tutorial

Technologies, Libraries, APIs

This project will be implemented with the following technologies:

  • Canvas API to render the game environment
  • A dictionary API to provide words for the player to type
  • Webpack and Babel to bundle and transpile the source JavaScritp code
  • npm to manage the project dependencies

Implementation Timeline

  • Friday Afternoon & Weekend: Setup project, including getting webpack up and running. Get canvas to show up on the screen. Create Background, Player, Enemy, and Blockade classes.
  • Monday: Dedicate to implementing underlying logic of typebit. Ensure players, enemies, and blockades animate and interact correctly.
  • Tuesday: Ensure player health is decremented correctly and complete end game screen with game instance data for the player.
  • Wednesday: Finish implementing user controls, and focus on styling. If time, create simple visual for end game data.
  • Thursday Morning: Deploy final version to GitHub.

Future Updates

Blockades

  • create blockades that can only be destroyed based on a minimum WPM

Levels

  • create levels of differing difficulty (length of words/quotes, punctuation)
  • change to darker/redder background based on difficulty

End Game

  • add titles for a range of scores
  • add more data, such as enemies defeated, words typed, words that hurt player, etc

Resources

Images

Pixel Slime

Tiny Hero Sprites

Nature Background

Hearts by Nicole Marie T

Music

Sounds by Dagurasu Background Music by Rin

Icons

Freepik

typebit's People

Contributors

cubeydice avatar

Watchers

 avatar

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.