From aa2d386a863c0b3b5764ad61cd0657d40dac6819 Mon Sep 17 00:00:00 2001 From: jdmedlock Date: Tue, 23 Apr 2019 19:20:35 -0500 Subject: [PATCH 1/2] Feature: Add Bit Mask app specification Add Bit Mask app specification Resolves: N/a See also: N/a --- Projects/Bit-Masks-App.md | 76 +++++++++++++++++++++++++++++++++++++++ README.md | 1 + 2 files changed, 77 insertions(+) create mode 100644 Projects/Bit-Masks-App.md 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/README.md b/README.md index e2dac608..788afd2b 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 | From d476bfa0c3f7697505e70f695b9c5c1aaf7e336c Mon Sep 17 00:00:00 2001 From: jdmedlock Date: Wed, 24 Apr 2019 11:11:18 -0500 Subject: [PATCH 2/2] Feature: Add Bug Race game specification Add Bug Race game specification Resolves: N/a See also: N/a --- Projects/Bug-Race-Game.md | 79 +++++++++++++++++++++++++++++++++++++++ README.md | 1 + 2 files changed, 80 insertions(+) create mode 100644 Projects/Bug-Race-Game.md 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 788afd2b..7eefbf0e 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,7 @@ required to complete them. | -------------------------------------------------------------- | ---------------------------------------------------- | ---------- | | [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 |