From d476bfa0c3f7697505e70f695b9c5c1aaf7e336c Mon Sep 17 00:00:00 2001 From: jdmedlock Date: Wed, 24 Apr 2019 11:11:18 -0500 Subject: [PATCH] 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 |