Code Monkey home page Code Monkey logo

drop-kicking-babies's Introduction

drop-kicking-babies's People

Contributors

lewismoten avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

drop-kicking-babies's Issues

Make Pretty

Setup a layout that makes the page look more professional.

Separate data from logic

Data should be separated from the logic. Separate the following:

  • Sound URL
  • Baby URL
  • Ball URL
  • Paths:
    • Baby
    • Baby Foot
    • Football
    • Drop
  • Pivot location/angle of foot kicking
  • baby image width/size
  • football image width/size

Share baby with message

Allow end-user to choose a baby, object, and text

  • Show a preview of the baby/object with a message after the object leaves the screen
  • Provide a link that can be shared
  • Use the link to load up the same baby/object/message

Note: this is static content. There needs to be a way to persist the data either though the URL that is shared, or an id in the url that acquires the data from an external resource.

Baby Editor

Create an editor to do the following

  • Provide the URL to an image of a baby
  • Allow a polygon to be setup to clip the baby so the background is transparent
  • Allow a polygon to be setup to identify the foot that is to kick the ball
  • Draw the path for the ball to be kicked
  • Define the frames to start and stop kicking
  • Rotate/Position the foot in a kicking fashion
  • Display source code data to integrate the data into a web page.
  • Add fields for meta data
    • Title
    • Image Width
    • Image Height
    • Image Name
    • Image Author Name
    • Image Author Url
    • Image License Name
    • Image License Url

Implement Angular.js

  • Setup controller for page
  • Bind list of babies
  • Bind list of objects
  • Show drop-kick button when a baby and object is selected
  • Wire up drop-kick button to controller
  • Load JSON objects based off values selected

Add multiple babies/objects

  • Add silly baby
  • Add grumpy baby
  • Add soccer ball
  • Add beach ball
  • Add drop-down control to choose baby
  • Add drop-down control to choose ball

Ball Editor

Create an editor to do the following

  • Provide the URL to an image of a object to be kicked
  • Allow a polygon to be setup to clip the object so the background is transparent
  • Display source code data to integrate the data into a web page.
  • Provide the URL to the sound of the object being kicked
  • Add fields for meta data
    • Title
    • Image Width
    • Image Height
    • Image Name
    • Image Attribution Author Name
    • Image Attribution Author Url
    • Image Attribution License Name
    • Image Attribution License Url
    • Sound Name
    • Sound Attribution Author Name
    • Sound Attribution Author Url
    • Sound Attribution License Name
    • Sound Attribution License Url

Add Baby Drop-Kicking Football

Setup web page with the following:

  • Picture of baby
  • Picture of foot ball
  • Pictures scaled to size
  • Background behind baby is transparent
  • Background behind football is transparent
  • Button to fire off the following animations sequentially:
    • Animation of football dropping to babies foot
    • Animation of babies foot kicking
    • Animation of football moving off screen once it touches the babies foot
  • Play sound when football is kicked

setup as NPM package

This project was created before I was aware of how most front-end development uses npm/node. Initialize node package manager.

Cache Audo

Ensure multiple requests are not made for the same page.

  • Cache audio, requested only once when the page loads
  • Plays a sound when the ball is kicked
  • Does not stop the previous sound that is still playing

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.