Code Monkey home page Code Monkey logo

few-track-demo's Introduction

Demo Game

This is demo app to give an idea of the kinds of code and programming involved with programming web applications.

View the game live here.

Instructions

  • Download this project and open the folder in VSCode. This is where you will be editing the code.
  • Now open the file index.html in your web browser. This is where you will see all the changes once they take effect.
  1. Let's start in the index.html file using your code editor
    1. Find the title tag, and change it from demo game to something fun
    2. Find the h1 tag that holds our boring game title, and update it with a new fun and exciting name
    3. Find the link to our stylesheet and add in the href attribute
    4. Take a look at whats changed on the page (refresh the webpage in your browser)
  2. Now over to the style.css file
    1. Look through the images folder and find a cool alien you want to play as
    2. In the :root rule, change the --player-image variable to the your favorite alien
    3. Lets also change the --background-image to your favorite wall
    4. Now lets change the --button-color to something more readable
    5. The buttons look better, but them being square is a little weird, so lets find the .button rule
    6. inside the .button rule, lets add a new property border-radius and set it to a value of 50%
    7. Take a look at whats changed on the page (refresh the webpage in your browser)
  3. Now the page looks a lot better, lets make it work
    1. Go back to the index.html file and find the script tag, add in the src attribute
    2. Take a look at whats going on, things are moving now!
    3. Find the timePerBomb and timePerFruit variable and change them until you find a balance you like.
    4. Find the makeObject function, and inside find where the objects speeds are set.
    5. Change the speed of the bombs and fruits until you find a balance you like
    6. Take a look at whats changed on the page (refresh the webpage in your browser)
  4. Looks good!

🎉 Congrats! you've turned the starter project into a functional game with your own game mechanics. You made it possible using HTML, CSS and JS. Feel free to glance over the project files and see if there are things you understand and things you are not sure about just yet.

Todo -

  1. Some tasks to explore programming on the web.
  • Include comments with notes on possible values along side code
  • Building Web Applications
    • Need a branch to demo the completed game
    • Master branch should leave out some things that become and activity
      • Links to css files and js files
        • These files might be broken into separate files
  • HTML
    • Add some images of other characters
    • Add CSS styles
    • Add JS file
  • CSS
    • Can be better organized for demo
    • Add opportunities for students to make improvements to the appearance
      • #container overflow hidden
      • #contanier round corner
      • .button round corner changes colors
      • .button:hover change colors
      • add a box shadow to player
    • Change game images used as game elements
      • --player-image
      • --bg-image
      • --bomb-image
      • --fruit-*
  • JS
    • Add link to main.js
    • Change somethings in the JS to see what happens
      • Edit variables
        • change the speed and frequency of elements
          • speed of bombs and fruit
          • frequency of fruit vs bombs

few-track-demo's People

Contributors

amelinagzz avatar soggybag avatar

Watchers

avatar avatar avatar avatar avatar avatar

Forkers

drakevorndran dcgove lwrgithub makeschoolfail tech-at-du

few-track-demo's Issues

Master branch code

The master branch will be used by students as a starting place. From here they will build the completed game.

Goal: after publishing to the gh-pages branch links to the style.css and main.js should be removed.

Clean and organized JS code

This will be used with beginners. The code should be cleaned and organized with that in mind. Assume a level of zero knowledge.

Goal organize code for readability over efficiency. Add comments with clear headings to label different parts of the document.

  • Move all global variables to the top of page
  • Naming should be self documenting for variables and functions
  • Add comments and group related code together in clearly labeled sections

Updated readme with demo project instructions

Update the readme with instructions for the demo. Roughly these should be:

  • download this project
  • open index.html in your browser
  • open in your code editor
  • take a look at index.html
  • make a change ... (need a small activity here)
  • add a link to style.css (probably best to just add the file name to an existing link tag)
  • refresh the game in the browser
  • make a change to the css file ... (need a short list of possible changes to make)
  • refresh the browser
  • back in index.html add a link to main.js (probably best to just a file name to an existing script tag)
  • refresh the browser
  • make a couple small changes refreshing the browser each time.

See my notes in the readme for possible activities. This is open ended the activities can be anything. Keep in mind that everything should be easy with little chance of things going wrong.

Clean up and organized index.html

This will be used with beginners. The code should be cleaned and organized with that in mind. Assume a level of zero knowledge.

Goal organize code for readability over efficiency. Add comments with clear headings to label different parts of the document.

Clean and organize CSS

This will be used with beginners. The code should be cleaned and organized with that in mind. Assume a level of zero knowledge.

Goal organize code for readability over efficiency. Add comments with clear headings to label different parts of the document.

  • Make some clearly labeled custom properties at the top. Don't over do this. Too many variables might be confusing.
  • clean up class and id names strive for clearly and obvious naming
  • add comments and group related code together in clearly labeled sections

Published gh-pages branch

Publishing the game and having a live version on GitHub.io will make it easier to demo.

Goal: completed game should be published on a gh-pages branch.

The game on the master branch will not be functioning. Students will start here.

Instructions to publish to gh-pages

Students could publish their version of the game to gh-pages.

Goal: add some short instructions on how to publish this to gh-pages at the end of the readme.

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.