diff --git a/Projects/Bit-Masks-App.md b/Projects/Bit-Masks-App.md new file mode 100644 index 00000000..38634029 --- /dev/null +++ b/Projects/Bit-Masks-App.md @@ -0,0 +1,76 @@ +# Bit Masks + +**Tier:** 2-Intermediate + +It's difficult to find an app that doesn't rely on some form of conditional +logic to implement its functionality. This is almost always performed using +statements like: +``` +if (processAccount === true) { + /* do something */ +} +``` +If and switch statements work well for a limited number of conditionals, but +what if your app had 10's or 100's of conditionals to evaluate? Luckily, there's +another way. + +The goal of the Bit Masks app is demonstrate how to use bit masks to evaluate +longer sequences of switches without having to rely on long strings of +conditional statements. + +## User Stories + +- [ ] User can see a vertical list of checkboxes with the following cities +and their timezones: + - Moscow: GMT +3 + - Paris: GMT +2 + - Berlin: GMT +2 + - Brussels: GMT +2 + - Amsterdam: GMT +2 + - Rome: GMT +2 + - London: GMT +1 + - Dublin: GMT +1 + - New York: GMT -4 + - Washington, DC: GMT -4 + - St. Louis: GMT -5 + - Los Angeles: GMT -7 + - Tokyo: GMT +9 + - Beijing: GMT +8 + - Ho Chi Mihn City: GMT +7 + - Mumbai: GMT +5 +- [ ] User can see a GMT search box that an integer representing a GMT offset +can be entered into and a 'Find Cities' button. +- [ ] User can click the 'Find Cities' button to display the names of the +cities in that GMT offset in an output area. + +### Developer Notes + +For this exercise the developer should use sequences of 24 +binary bits, each corresponding a GMT time zone from +12 to -12 to map cities +to their timezones. + +Searches should be conducted by combining a bit mask for the desired time zone +against the city-specific bit sequences to identify matches. Determining if a +city meets the search criteria shouldn't rely on a statement such as +``` +if (city[i].gmtOffset === searchOffset ) { + /* Found it! */ +} +``` +It should instead rely on a bitwise operation. + +## Bonus features + +- [ ] User can search for cities NOT in the GMT offset entered in the +search box. +- [ ] User can see a summary count of the number of cities that met the +search criteria. + +## Useful links and resources + +- [World Time Zones](https://greenwichmeantime.com/time-zone/definition/) +- [Bitwise Operators (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators) + +## Example projects + +[Bitwise Operation](https://codepen.io/Lunoware/pen/XBWEPY) diff --git a/Projects/Bug-Race-Game.md b/Projects/Bug-Race-Game.md new file mode 100644 index 00000000..323549b7 --- /dev/null +++ b/Projects/Bug-Race-Game.md @@ -0,0 +1,79 @@ +# Bug Race + +**Tier:** 3-Advanced + +In this project you will test your animation skills by creating a game that +lets the user race bugs while trying to guess the winner. As part of this +you'll need to provide the user with various controls that allow the game to +be customized including bug icons, assigning names to the bugs, making a choice +of who the winner might be, and bug speed. + +### Constraints +- The developer will need to select the bug icons to be used in the game +- The developer should randomly adjust the speed of each bug before a race +starts so they travel at different rates within the speed selected by the +user (slow, normal, or fast). +- It is up to the developer to define the speed ranges associated with the slow, +normal, and fast speed setting. +- You may use an animation library, but you'll get more out of this project +if you try to implement it using native language features. + +## User Stories + +- [ ] User can see: + - An input panel containing controls to configure the game's UI and + operation. + - A race track consisting of four horizontal lanes the bugs will travel in + - A radio button associated with each lane to allow the user to select a + potential winner + - A 'Start' button. + +### Game Controls +- [ ] User can see the following controls in the input panel. + - A list of race lane numbers with radio buttons for each showing + thumbnails for three unique bugs, and a text box the user can use to + give the bug a name. + - An Speed selection control with three radio buttons - Slow, Normal, Fast +- [ ] User can click a radio button to select the bug icon to be assigned +to a lane. +- [ ] User can see an warning message if the same icon is selected for more +than one lane. +- [ ] User can enter a name for the bug in each lane. +- [ ] User can see an error message if the same name is repeated for more than +one bug. +- [ ] User can select the bug speed by clicking one of the Speed radio buttons + +### Racing + +- [ ] User can select a potential winner by clicking on the radio button on +any lane. +- [ ] User can start a race by clicking on the 'Start' button +- [ ] User can see the 'Start' button is disabled until the race is over +- [ ] User can see an error message if no winner was selected. +- [ ] User can see bugs race across their assigned lane to the finish line +- [ ] User can see all bugs stop moving when the first one reaches the finish +line +- [ ] User can see game metrics updated to show the number of races run in +this session. + +## Bonus features + +- [ ] User can see race metrics for each bug showing the number of races +run, number of wins, and number of losses. +- [ ] User can see the winning bug bounce when it wins a race +- [ ] User can see loosing bugs flip on their backs when they loose a race +- [ ] User can hear unique sounds played when the race starts and ends. + +## Useful links and resources + +- [3D Bug Images](https://www.google.com/search?q=3d+bug+drawings&tbm=isch&source=hp&sa=X&ved=2ahUKEwjxkNT7--jhAhUI-6wKHW3_CgQQsAR6BAgHEAE&biw=1279&bih=550) +- [Basic Animations (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations +) +- [How to build a simple Sprite animation in Javascript](https://medium.com/dailyjs/how-to-build-a-simple-sprite-animation-in-javascript-b764644244aa) +- [Javascript Animations](https://javascript.info/animation) + +## Example projects + +- [Arcade Game](https://jdmedlock.github.io/arcadegame/) +- [Drag Race Animation](https://codepen.io/Delime/pen/IyuAr) +- [Horse Race](https://codepen.io/nathanielzanzouri/pen/jVgEZY) \ No newline at end of file diff --git a/README.md b/README.md index c74607e7..11abe7cd 100644 --- a/README.md +++ b/README.md @@ -71,6 +71,7 @@ required to complete them. | Name | Short Description | Tier | | ------------------------------------------------------------------ | -------------------------------------------------- | -------------- | +| [🌟Bit Masks](./Projects/Bit-Masks-App.md) | Using Bit Masks for Conditions | 2-Intermediate | | [Book Finder App](./Projects/Book-Finder-App.md) | Search for books by multiple criteria | 2-Intermediate | | [Card Memory Game](./Projects/Card-Memory-Game.md) | Memorize and match hidden images | 2-Intermediate | | [🌟Drawing App](./Projects/Drawing-App.md) | Create digital artwork on the web | 2-Intermediate | @@ -91,6 +92,7 @@ required to complete them. ### Tier-3: Advanced Projects + | Name | Short Description | Tier | | -------------------------------------------------------------- | ------------------------------------------------------------------- | ---------- | | [Battleship Bot](./Projects/Battleship-Bot.md) | Create a Discord bot that plays Battleship | 3-Advanced | @@ -109,6 +111,26 @@ required to complete them. | [Spell-It App](./Projects/SpellIt-App.md) | A twist on the classic Speak N Spell game | 3-Advanced | | [Survey App](./Projects/Survey-App.md) | Define, conduct, and view a survey | 3-Advanced | | [Movie Database App](./Projects/Movie-App.md) | Browse, Find Ratings, Check Actors and Find you next movie to watch | 3-Advanced | +======= +| Name | Short Description | Tier | +| -------------------------------------------------------------- | ---------------------------------------------------- | ---------- | +| [Battleship Bot](./Projects/Battleship-Bot.md) | Create a Discord bot that plays Battleship | 3-Advanced | +| [Battleship Game Engine](./Projects/Battleship-Game-Engine.md) | Create a callable engine to play the Battleship game | 3-Advanced | +| [🌟Bug Race Game](./Projects/Bug-Race-Game.md) | Create a Bug Race game to show off your animation skills | 3-Advanced | +| [🌟Calorie Counter](./Projects/Calorie-Counter-App.md) | Calorie Counter Nutrion App | 3-Advanced | +| [Chat App](./Projects/Chat-App.md) | Real-time chat interface | 3-Advanced | +| [🌟Elevator](./Projects/Elevator-App.md) | Elevator simulator | 3-Advanced | +| [🌟Fast Food Simulator](./Projects/FastFood-App.md) | Fast Food Restaurant Simulator | 3-Advanced | +| [🌟Instagram Clone](./Projects/Instagram-Clone-App.md) | A clone of Facebook's Instagram app | 3-Advanced | +| [GitHub Timeline](./Projects/GitHub-Timeline-App.md) | Generate a timeline of a users GitHub Repos | 3-Advanced | +| [Kudos Slackbot](./Projects/Kudos-Slackbot.md) | Give recognition to a deserving peer | 3-Advanced | +| [🌟MyPodcast Library](./Projects/MyPodcast-Library-app.md) | Create a library of favorite podcasts | 3-Advanced | +| [🌟Shell Game](./Projects/Shell-Game.md) | Animated shell game | 3-Advanced | +| [🌟Shuffle Deck](./Projects/Shuffle-Deck-App.md) | Evaluate different algorithms for shuffling a card deck |3-Advanced | +| [Slack Archiver](./Projects/Slack-Archiver.md) | Archive Slack Messages | 3-Advanced | +| [Spell-It App](./Projects/SpellIt-App.md) | A twist on the classic Speak N Spell game | 3-Advanced | +| [Survey App](./Projects/Survey-App.md) | Define, conduct, and view a survey | 3-Advanced | + ## Plans for the future