Last active
August 29, 2015 14:15
-
-
Save kdefliese/08594e99d0be93bc59b9 to your computer and use it in GitHub Desktop.
Website for race game
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .header { | |
| width: 100%; | |
| height: 50px; | |
| } | |
| h1 { | |
| text-align: center; | |
| font-size: 24px; | |
| } | |
| .grass { | |
| background-color: lightgreen; | |
| width: 100%; | |
| height: 100px; | |
| } | |
| .mystery_box1 { | |
| display: inline-block; | |
| width: 50px; | |
| height: 50px; | |
| background-color: yellow; | |
| text-align: center; | |
| position: relative; | |
| left: 300px; | |
| top: 50px; | |
| z-index: 1; | |
| } | |
| .mystery_box2 { | |
| display: inline-block; | |
| width: 50px; | |
| height: 50px; | |
| background-color: yellow; | |
| text-align: center; | |
| position: relative; | |
| left: 800px; | |
| top: 50px; | |
| z-index: 2; | |
| } | |
| p { | |
| display: inline-block; | |
| font-weight: bold; | |
| font-size: 24px; | |
| text-align: center; | |
| position: relative; | |
| top: -8px; | |
| } | |
| .road { | |
| width: 100%; | |
| height: 150px; | |
| background-color: lightgray; | |
| display: block; | |
| position: relative; | |
| top: -50px; | |
| z-index: 0; | |
| } | |
| .divider { | |
| width: 100%; | |
| height: 7px; | |
| background-color: yellow; | |
| position: relative; | |
| top: -50px; | |
| } | |
| .grassBottom { | |
| background-color: lightgreen; | |
| width: 100%; | |
| height: 100px; | |
| position: relative; | |
| top: -50px; | |
| } | |
| #image { | |
| z-index: 3; | |
| position: relative; | |
| left: 950px; | |
| top: 225px; | |
| display: inline-block; | |
| visibility: hidden; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>The Big Race</title> | |
| <link rel="stylesheet" href="css_for_race_game.css"> | |
| </head> | |
| <body> | |
| <section class="header"> | |
| <h1>The Big Race</h1> | |
| </section> | |
| <section class="grass"> | |
| </section> | |
| <section class="mystery_box1"> | |
| <p>?</p> | |
| </section> | |
| <section class="mystery_box2"> | |
| <p>?</p> | |
| </section> | |
| <section id="image"> | |
| <img src="placeholder" /> | |
| </section> | |
| <section class="road"> | |
| </section> | |
| <section class="divider"> | |
| </section> | |
| <section class="road"> | |
| </section> | |
| <section class="grassBottom"> | |
| </section> | |
| <script src="script_for_race_game.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var Animal = function(s,f,n) { | |
| this.speed = s; | |
| this.focus = f; | |
| this.name = n; | |
| this.position = 0; | |
| this.report = function() { | |
| return this.name + " is at " + this.position; | |
| }; | |
| this.run = function() { | |
| if(this.focus > (Math.random() * 10)) { | |
| this.position += this.speed; | |
| } | |
| }; | |
| this.powerup1 = function() { | |
| if((Math.random() * 10) < 5) { | |
| this.speed ++; | |
| } | |
| else if (((Math.random() * 10) >=5) && ((Math.random() * 10) < 9)) { | |
| this.speed * 2; | |
| } | |
| else { | |
| this.speed --; | |
| } | |
| }; | |
| this.powerup2 = function() { | |
| if((Math.random() * 10) < 5) { | |
| this.speed --; | |
| } | |
| else if (((Math.random() * 10) >=5) && ((Math.random() * 10) < 9)) { | |
| this.speed ++; | |
| } | |
| else { | |
| this.speed * 2; | |
| } | |
| }; | |
| } | |
| var turtle = new Animal(2,8,"Beth"); | |
| var rabbit = new Animal(5,2,"David"); | |
| var distance = 50; | |
| alert("It's time for the big race! Who will win? Place your bets now and hit OK when you're ready to race!"); | |
| while(turtle.position < distance && rabbit.position < distance) { | |
| if (turtle.position >= 15 && turtle.position <=20) { | |
| turtle.powerup1(); | |
| turtle.run(); | |
| //console.log(turtle.report); | |
| } | |
| else if (turtle.position >= 35 && turtle.position <=40) { | |
| turtle.powerup2(); | |
| turtle.run(); | |
| //console.log(turtle.report); | |
| } | |
| else { | |
| turtle.run(); | |
| //console.log(turtle.report); | |
| } | |
| if (rabbit.position >= 15 && rabbit.position <=20) { | |
| rabbit.powerup1(); | |
| rabbit.run(); | |
| //console.log(rabbit.report); | |
| } | |
| else if (rabbit.position >= 35 && rabbit.position <=40) { | |
| rabbit.powerup2(); | |
| rabbit.run(); | |
| //console.log(rabbit.report); | |
| } | |
| else { | |
| rabbit.run(); | |
| //console.log(rabbit.report); | |
| } | |
| } | |
| console.log(turtle.report()); | |
| console.log(rabbit.report()); | |
| if (turtle.position > rabbit.position) { | |
| alert("Beth the turtle wins! She is at position " + turtle.position + " and David the rabbit is at position " + rabbit.position); | |
| } | |
| else { | |
| alert("David the rabbit wins! He is at position " + rabbit.position + " and Beth the turtle is at position " + turtle.position); | |
| } | |
| var image = document.getElementById('image'); | |
| if (turtle.position > rabbit.position) { | |
| image.innerHTML = '<img src="https://farm9.staticflickr.com/8657/15934066793_d459075400_s.jpg" />'; | |
| image.style.visibility = "visible"; | |
| } | |
| else { | |
| image.innerHTML = '<img src="https://farm8.staticflickr.com/7328/15931703994_d14b665b55_s.jpg" />'; | |
| image.style.visibility = "visible"; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment