Giter Site home page Giter Site logo

mahmudahmed / bull-e-season Goto Github PK

View Code? Open in Web Editor NEW
5.0 1.0 0.0 13.77 MB

Bull-E Season is a driving game, it's all about your skills - navigate ("Bully") your way through traffic at full speed. Dodge and swerve through slow driving cars and avoid accidents at all costs.

Home Page: https://mahmudahmed.github.io/Bull-E-Season/

HTML 29.04% JavaScript 46.92% CSS 24.04%

bull-e-season's Introduction

Bull-E-Season (••) ( ••)>⌐■-■ (⌐■_■)


Description

Bull-E Season is a driving game, it's all about your skills on the road - navigate ("Bully") your way through traffic at full speed. Dodge and swerve through slow driving cars and avoid accidents at all costs.

Overview

  • Game gets harder(faster) as longer you are on the road - as it gets harder you will accumilate points faster as well.
  • As you zoom thorugh the traffic your handling(lane changing speed) increases.
  • You accumulate more points when you put the pedal to the metal.
  • Unlock cars as you score higher and higher.
  • Certain cars boost your points in different ways.

Live

Play the game live here!

Functionality & MVP

With this driving game, drivers will be able to test their skills on the road.

  • Start and Restart game.
  • Choose a car to drive.
  • Change lanes, move up and backwards.
  • NPC cars on the road.
  • Pause/Resume game.
  • Collisons with cars on the road ends the game.
  • Scoreboard keeping score (points increase faster in some events)
  • As you accumulate more and more points, game speeds up.

Spec Details

  • Player can move car left, right, up and down with arrow keys.
  • Points will increase as time passes.
  • Winning -> Just as in life, you never win when you drive like a maniac...you only get closer to your demise ◕_◕

Timeline

  • Day#1 -> Create shell for the game.
  • Day#2 -> Functionality/logic and design
  • Day#3 -> Additional functionality.

Languages and Technologies

  • Vanilla JavaScript
  • HTML5/ CSS3

Code Snippets

car_selection

Swipe through your garage and slect your car, certain cars become unlocked when specifc highscore is set.

background-animation

Excluding players car, there are a totat of 4 NPC cars on the road. Through every animation loop, the css style postion is set to animate down the cars by the speed level. Once it goes all the way down it's top is set -200px and placed randomly horizontally then brought down again (with a randomly generated RGB color). Giving the illusion of a new car. Same goes for the center lines.

collision_function

Use conditional logic to return false for conditions where I know the two object cannot be colliding. Then if those conditions aren't true I had the function return true. I use this function in other functions to check for the collision of different game objects so I know what actions should be done.

scoring_logic

Here lies the scoring logic of the game, the score is originally set to increase by 1 every 20 loops. When you move up during the game...the score increases by 1 every single loop. When you use unlocked cars you your scorce also gets a boost, depending on the car selected.

storeing_data_locally Checking to see current score is greater that the local high score, if it is set the local storage fore "highScore" to be later retrived.

Functional Version

Design

Prototype/Wireframe

Wireframe

Future considerations

  • Leaderboard
  • More intricate animations and effects.
  • More varieties of themes and levels.

bull-e-season's People

Contributors

mahmudahmed avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

bull-e-season's Issues

Comments on game nits

Hey Mo:

Game is looking great! Can we try to polish a bit more

  • Game we use a more modern design for the fonts being selected and background. Here are some inspiration ideas. I don't love the border around your font or the font you've selected, it makes it look like a game from the 90s. You can examine their font selection, color schemes here: https://dribbble.com/search/web%20game

  • Can we make the height of the game fit the height of the screen it's being played on. Currently I need to scroll down.

Screen Shot 2020-03-05 at 4 08 00 PM

  • Still think it would be cool if we added additional items on the canvas which could add points/ lives.

Comments on game

  • In your readme, is this intentional?
    Screen Shot 2020-03-04 at 9 12 41 AM

  • High Score: score does not persist

  • Can we clean up the styling (i.e. we have a lot of colors for the fonts)

  • Move your social links to the footer perhaps?

  • We have a lot of whitespace, maybe we can put the instructions on the side instead and make the game space larger?

  • Stretch feature: use localStorage to save my high score

Comments on Wiki

Refer to this deck for examples: https://docs.google.com/presentation/d/10-R4ZH1ep6YRNJ6fh_r_ZaCBMLXR0rplW-2X4VdEmXk/edit#slide=id.g7d19537126c9dbd0_0

  • For MVPs, please break down the features to specific user stories and map this to a timeline of what you will complete (i.e. Day 1: ...., Day 2: ....)

  • Map out specific details on:

  1. keys users will click to move/ perform certain actions
  2. Point system
  3. What constitutes a win/loss
  4. How will you determine when cars are placed on the road?
  5. What will you allow the user to select? i.e. car color?

Nice wireframe!

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.