Created
June 27, 2018 15:36
-
-
Save natepappenhagen/3de2aba62ea652508d5b09b1984cc395 to your computer and use it in GitHub Desktop.
Take Care of nyan jake and finn // source https://jsbin.com/fapehos
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 lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <meta name="description" content=""> | |
| <meta name="author" content=""> | |
| <title>Take Care of nyan jake and finn</title> | |
| <!-- Bootstrap core CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
| <!-- Custom styles for this template --> | |
| <link href="css/style.css" rel="stylesheet"> | |
| <style id="jsbin-css"> | |
| body { | |
| padding-top: 54px; | |
| } | |
| @media (min-width: 992px) { | |
| body { | |
| padding-top: 56px; | |
| } | |
| } | |
| /* heartbeat animation */ | |
| @keyframes heartbeat { | |
| 0% { | |
| transform: scale( .75); | |
| } | |
| 20% { | |
| transform: scale( 1); | |
| } | |
| 40% { | |
| transform: scale( .75); | |
| } | |
| 60% { | |
| transform: scale( 1); | |
| } | |
| 80% { | |
| transform: scale( .75); | |
| } | |
| 100% { | |
| transform: scale( .75); | |
| } | |
| } | |
| #heart { | |
| position: relative; | |
| display:inline-block; | |
| width: 50px; | |
| height: 70px; | |
| animation: heartbeat 1s infinite; | |
| } | |
| #heart:before, | |
| #heart:after { | |
| position: absolute; | |
| content: ""; | |
| left: 50px; | |
| top: 0; | |
| width: 50px; | |
| height: 80px; | |
| background: red; | |
| -moz-border-radius: 50px 50px 0 0; | |
| border-radius: 50px 50px 0 0; | |
| -webkit-transform: rotate(-45deg); | |
| -moz-transform: rotate(-45deg); | |
| -ms-transform: rotate(-45deg); | |
| -o-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| -webkit-transform-origin: 0 100%; | |
| -moz-transform-origin: 0 100%; | |
| -ms-transform-origin: 0 100%; | |
| -o-transform-origin: 0 100%; | |
| transform-origin: 0 100%; | |
| } | |
| #heart:after { | |
| left: 0; | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| -o-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| -webkit-transform-origin: 100% 100%; | |
| -moz-transform-origin: 100% 100%; | |
| -ms-transform-origin: 100% 100%; | |
| -o-transform-origin: 100% 100%; | |
| transform-origin: 100% 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Page Content --> | |
| <div class="container"> | |
| <!-- Portfolio Item Heading --> | |
| <h1 class="my-4" >Take Care of nyan jake and finn | |
| </h1> | |
| <!-- Portfolio Item Row --> | |
| <div class="row"> | |
| <div class="col-md-7"> | |
| <img class="img-fluid" src="https://i.gifer.com/3Q85.gif" alt=""> | |
| </div> | |
| <p id="heart"></p> | |
| <div class="col-md-3"> | |
| <h3 class="my-3">Dashboard</h3> | |
| <div>Name: <span class="name"></span></div> | |
| <div>Age: <span class="age"></span> aeons old</div> | |
| <div>hunger: <span class="hunger"></span> bowls of cheerios</div> | |
| <div>boredom: <span class="boredom"></span>paint drying on wall</div> | |
| <div>Sleepyness: <span class="sleepyness"></span> all nighters</div> | |
| <p>--------------------------------</p> | |
| <h3 class="my-3">Actions</h3> | |
| <div class="button-container"> | |
| <button class="treatButton">Treat</button> | |
| <button class="playButton">Play</button> | |
| <button class="exerciseButton">Exercise</button> | |
| <button class="sleepButton">sleep ZzZz</button> | |
| <button class="start-game">start GAME</button> | |
| <button class="refresh" value="Refresh Page" onClick="window.location.reload()">start over</button> | |
| </div> | |
| <!-- animations --> | |
| <!-- <div class="container"> | |
| <div class="heart_animation"><3</div> | |
| </div> --> | |
| <!-- progress bars --> | |
| <!-- <div class="progress" >heart | |
| <div class="progress-bar" id="heartProg" role="progressbar" aria-valuenow="100" | |
| aria-valuemin="0" aria-valuemax="101" style="width:20%"> | |
| </div> | |
| </div> --> | |
| <div class="progress"> | |
| <div class="progress-bar" id="hungerProg" role="progressbar" aria-valuenow="100" | |
| aria-valuemin="0" aria-valuemax="101" style="width:70%"> | |
| hunger | |
| </div> | |
| </div> | |
| <div class="progress" > | |
| <div class="progress-bar" id="sleepProg" role="progressbar" aria-valuenow="100" | |
| aria-valuemin="0" aria-valuemax="101" style="width:70%"> | |
| sleep | |
| </div> | |
| </div> | |
| <div class="progress" > | |
| <div class="progress-bar" id="boredProg" role="progressbar" aria-valuenow="100" | |
| aria-valuemin="0" aria-valuemax="101" style="width:70%"> | |
| boredom | |
| </div> | |
| </div> | |
| <div class="progress" > | |
| <div class="progress-bar" id="ageProg" role="progressbar" aria-valuenow="100" | |
| aria-valuemin="0" aria-valuemax="101" style="width:70%"> | |
| age | |
| </div> | |
| </div> | |
| <!-- <div class="progress" > | |
| <div class="progress-bar" id="boredProg" role="progressbar" aria-valuenow="100" | |
| aria-valuemin="0" aria-valuemax="101" style="width:70%"> | |
| boredom | |
| </div> | |
| </div> --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- /.container --> | |
| <!-- Footer --> | |
| <footer class="py-5 bg-dark"> | |
| <div class="container"> | |
| <p class="m-0 text-center text-white">thanks</p> | |
| </div> | |
| <!-- /.container --> | |
| </footer> | |
| <!-- Bootstrap core JavaScript --> | |
| <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> | |
| <script src="js/app.js"></script> | |
| <script id="jsbin-javascript"> | |
| $(document).ready(function(){ | |
| class Tamagotchi { | |
| constructor(name, hunger, boredom, sleeplevel, age){ | |
| this.name = name; | |
| this.hunger = hunger; | |
| this.boredom = boredom; | |
| this.sleeplevel = sleeplevel; | |
| this.age = age; | |
| } | |
| // //////////////////////////// THIS IS NOW REDUNDANT | |
| // checkHunger(hunger){ | |
| // if (this.hunger > 10){ | |
| // this.hunger = 10; | |
| // } | |
| // else if (this.hunger < 0){ | |
| // this.hunger = 0; | |
| // } | |
| // } | |
| // ///////////////////////////// | |
| // checkAge(age){ | |
| // if (this.age > 10){ | |
| // this.age = 10; | |
| // } | |
| // else if (this.age < 0){ | |
| // this.age = 0; | |
| // } | |
| // } | |
| // ///////////////////////////// | |
| // checkboredom(boredom){ | |
| // if (this.boredom > 10){ | |
| // this.boredom = 10; | |
| // } | |
| // else if (this.boredom < 0){ | |
| // this.boredom = 0; | |
| // } | |
| // } | |
| // ///////////////////////////// | |
| // checkSleeplevel(sleeplevel){ | |
| // if (this.sleeplevel > 10){ | |
| // this.sleeplevel = 10; | |
| // } | |
| // else if (this.sleeplevel < 0){ | |
| // this.sleeplevel = 0; | |
| // } | |
| // } | |
| } | |
| const nyanFinn = new Tamagotchi('Finn and Jake', 5, 5, 5, 1); | |
| // CALL | |
| checkAndUpdatenyanFinnInHtml(); | |
| $('.treatButton').click(clickedTreatButton); | |
| $('.playButton').click(clickedPlayButton); | |
| $('.exerciseButton').click(clickedExerciseButton); | |
| $('.sleepButton').click(clickedSleepButton); | |
| $('#heart').hide(); | |
| /// FUNCTIONS FOR BUTTON PRESS | |
| function clickedTreatButton() { | |
| nyanFinn.boredom++; | |
| nyanFinn.hunger++; | |
| checkAndUpdatenyanFinnInHtml(); | |
| } | |
| function clickedPlayButton() { | |
| nyanFinn.hunger--; | |
| nyanFinn.sleeplevel++ | |
| nyanFinn.boredom++ | |
| checkAndUpdatenyanFinnInHtml(); | |
| } | |
| function clickedExerciseButton() { | |
| nyanFinn.boredom--; | |
| nyanFinn.hunger--; | |
| nyanFinn.sleeplevel-- | |
| checkAndUpdatenyanFinnInHtml(); | |
| } | |
| function clickedSleepButton() { | |
| nyanFinn.hunger--; | |
| nyanFinn.sleeplevel++; | |
| checkAndUpdatenyanFinnInHtml(); | |
| } | |
| function checkAndUpdatenyanFinnInHtml() { | |
| // CALL THE METHODS TO SET THE RANGE FROM 0-10 --- THIS IS REDUNDANT NOW | |
| // nyanFinn.checkboredom(nyanFinn.boredom); | |
| // nyanFinn.checkSleeplevel(nyanFinn.sleeplevel); | |
| // nyanFinn.checkAge(nyanFinn.age); | |
| // nyanFinn.checkHunger(nyanFinn.hunger); | |
| checkVitals(); | |
| updatenyanFinnInHtml(); | |
| } | |
| function checkVitals() { | |
| if (nyanFinn.hunger < 1) { | |
| alert('your finn and jake don\'t weigh anything!') | |
| $('body').css('background-color', 'red') | |
| $('.heart_animation').remove(); | |
| } | |
| if (nyanFinn.boredom < 1) { | |
| alert('your finn and jake don\'t have any boredom left :(') | |
| $('body').css('background-color', 'red') | |
| $('.happy_animation').remove(); | |
| $('#happyProg').empty(); | |
| } | |
| if (nyanFinn.sleeplevel < 1) { | |
| alert('your finn and jake are too tired to go on :(') | |
| $('body').css('background-color', 'red') | |
| } | |
| } | |
| // timer | |
| let seconds = 0; | |
| $('.start-game').click(function(){ | |
| $('#heart').show(); | |
| const timePassing = () => { | |
| console.log(`IT HAS BEEN ${seconds} seconds`) | |
| seconds++; | |
| if(seconds % 7 == 0){ | |
| nyanFinn.hunger++; | |
| } | |
| if(seconds % 8 == 0){ | |
| nyanFinn.boredom++; | |
| } | |
| if(seconds % 9 == 0){ | |
| nyanFinn.sleeplevel++; | |
| } | |
| if(seconds % 15 == 0){ | |
| nyanFinn.age++; | |
| } | |
| if(Math.floor(Math.random() * 16) > 4){ | |
| nyanFinn.boredom-- | |
| } | |
| if(nyanFinn.hunger >= 10 || nyanFinn.boredom >= 10 || nyanFinn.sleeplevel >= 10){ | |
| alert("nyan finn is dead :( "); | |
| $('#heart').hide(); | |
| clearInterval(timePasses); | |
| } | |
| if(nyanFinn.hunger <= 0 || nyanFinn.boredom <= 0 || nyanFinn.sleeplevel <= 0){ | |
| alert("nyan finn is dead :( "); | |
| $('#heart').hide(); | |
| clearInterval(timePasses); | |
| } | |
| checkAndUpdatenyanFinnInHtml(); | |
| updatenyanFinnInHtml(); | |
| } | |
| const timePasses = setInterval(timePassing, 1000) | |
| }) | |
| // function defintion | |
| function updatenyanFinnInHtml() { | |
| $('.name').text(nyanFinn.name); | |
| $('.hunger').text(nyanFinn.hunger); | |
| $('.boredom').text(nyanFinn.boredom); | |
| $('.sleepyness').text(nyanFinn.sleeplevel); | |
| $('.age').text(nyanFinn.age); | |
| // PROG BAR | |
| $('#hungerProg').css("width", (nyanFinn.hunger * 10)+ "%"); | |
| $('#boredProg').css("width", (nyanFinn.boredom * 10)+ "%"); | |
| $('#ageProg').css("width", (nyanFinn.age * 10)+ "%"); | |
| $('#sleepProg').css("width", (nyanFinn.sleeplevel * 10)+ "%"); | |
| } | |
| }); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <meta name="description" content=""> | |
| <meta name="author" content=""> | |
| <title>Take Care of nyan jake and finn</title> | |
| <\!-- Bootstrap core CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
| <\!-- Custom styles for this template --> | |
| <link href="css/style.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <\!-- Page Content --> | |
| <div class="container"> | |
| <\!-- Portfolio Item Heading --> | |
| <h1 class="my-4" >Take Care of nyan jake and finn | |
| </h1> | |
| <\!-- Portfolio Item Row --> | |
| <div class="row"> | |
| <div class="col-md-7"> | |
| <img class="img-fluid" src="https://i.gifer.com/3Q85.gif" alt=""> | |
| </div> | |
| <p id="heart"></p> | |
| <div class="col-md-3"> | |
| <h3 class="my-3">Dashboard</h3> | |
| <div>Name: <span class="name"></span></div> | |
| <div>Age: <span class="age"></span> aeons old</div> | |
| <div>hunger: <span class="hunger"></span> bowls of cheerios</div> | |
| <div>boredom: <span class="boredom"></span>paint drying on wall</div> | |
| <div>Sleepyness: <span class="sleepyness"></span> all nighters</div> | |
| <p>--------------------------------</p> | |
| <h3 class="my-3">Actions</h3> | |
| <div class="button-container"> | |
| <button class="treatButton">Treat</button> | |
| <button class="playButton">Play</button> | |
| <button class="exerciseButton">Exercise</button> | |
| <button class="sleepButton">sleep ZzZz</button> | |
| <button class="start-game">start GAME</button> | |
| <button class="refresh" value="Refresh Page" onClick="window.location.reload()">start over</button> | |
| </div> | |
| <\!-- animations --> | |
| <\!-- <div class="container"> | |
| <div class="heart_animation"><3</div> | |
| </div> --> | |
| <\!-- progress bars --> | |
| <\!-- <div class="progress" >heart | |
| <div class="progress-bar" id="heartProg" role="progressbar" aria-valuenow="100" | |
| aria-valuemin="0" aria-valuemax="101" style="width:20%"> | |
| </div> | |
| </div> --> | |
| <div class="progress"> | |
| <div class="progress-bar" id="hungerProg" role="progressbar" aria-valuenow="100" | |
| aria-valuemin="0" aria-valuemax="101" style="width:70%"> | |
| hunger | |
| </div> | |
| </div> | |
| <div class="progress" > | |
| <div class="progress-bar" id="sleepProg" role="progressbar" aria-valuenow="100" | |
| aria-valuemin="0" aria-valuemax="101" style="width:70%"> | |
| sleep | |
| </div> | |
| </div> | |
| <div class="progress" > | |
| <div class="progress-bar" id="boredProg" role="progressbar" aria-valuenow="100" | |
| aria-valuemin="0" aria-valuemax="101" style="width:70%"> | |
| boredom | |
| </div> | |
| </div> | |
| <div class="progress" > | |
| <div class="progress-bar" id="ageProg" role="progressbar" aria-valuenow="100" | |
| aria-valuemin="0" aria-valuemax="101" style="width:70%"> | |
| age | |
| </div> | |
| </div> | |
| <\!-- <div class="progress" > | |
| <div class="progress-bar" id="boredProg" role="progressbar" aria-valuenow="100" | |
| aria-valuemin="0" aria-valuemax="101" style="width:70%"> | |
| boredom | |
| </div> | |
| </div> --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <\!-- /.container --> | |
| <\!-- Footer --> | |
| <footer class="py-5 bg-dark"> | |
| <div class="container"> | |
| <p class="m-0 text-center text-white">thanks</p> | |
| </div> | |
| <\!-- /.container --> | |
| </footer> | |
| <\!-- Bootstrap core JavaScript --> | |
| <script src="https://code.jquery.com/jquery-3.1.0.min.js"><\/script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"><\/script> | |
| <script src="js/app.js"><\/script> | |
| </body> | |
| </html> | |
| </script> | |
| <script id="jsbin-source-css" type="text/css"> | |
| body { | |
| padding-top: 54px; | |
| } | |
| @media (min-width: 992px) { | |
| body { | |
| padding-top: 56px; | |
| } | |
| } | |
| /* heartbeat animation */ | |
| @keyframes heartbeat { | |
| 0% { | |
| transform: scale( .75); | |
| } | |
| 20% { | |
| transform: scale( 1); | |
| } | |
| 40% { | |
| transform: scale( .75); | |
| } | |
| 60% { | |
| transform: scale( 1); | |
| } | |
| 80% { | |
| transform: scale( .75); | |
| } | |
| 100% { | |
| transform: scale( .75); | |
| } | |
| } | |
| #heart { | |
| position: relative; | |
| display:inline-block; | |
| width: 50px; | |
| height: 70px; | |
| animation: heartbeat 1s infinite; | |
| } | |
| #heart:before, | |
| #heart:after { | |
| position: absolute; | |
| content: ""; | |
| left: 50px; | |
| top: 0; | |
| width: 50px; | |
| height: 80px; | |
| background: red; | |
| -moz-border-radius: 50px 50px 0 0; | |
| border-radius: 50px 50px 0 0; | |
| -webkit-transform: rotate(-45deg); | |
| -moz-transform: rotate(-45deg); | |
| -ms-transform: rotate(-45deg); | |
| -o-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| -webkit-transform-origin: 0 100%; | |
| -moz-transform-origin: 0 100%; | |
| -ms-transform-origin: 0 100%; | |
| -o-transform-origin: 0 100%; | |
| transform-origin: 0 100%; | |
| } | |
| #heart:after { | |
| left: 0; | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| -o-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| -webkit-transform-origin: 100% 100%; | |
| -moz-transform-origin: 100% 100%; | |
| -ms-transform-origin: 100% 100%; | |
| -o-transform-origin: 100% 100%; | |
| transform-origin: 100% 100%; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function(){ | |
| class Tamagotchi { | |
| constructor(name, hunger, boredom, sleeplevel, age){ | |
| this.name = name; | |
| this.hunger = hunger; | |
| this.boredom = boredom; | |
| this.sleeplevel = sleeplevel; | |
| this.age = age; | |
| } | |
| // //////////////////////////// THIS IS NOW REDUNDANT | |
| // checkHunger(hunger){ | |
| // if (this.hunger > 10){ | |
| // this.hunger = 10; | |
| // } | |
| // else if (this.hunger < 0){ | |
| // this.hunger = 0; | |
| // } | |
| // } | |
| // ///////////////////////////// | |
| // checkAge(age){ | |
| // if (this.age > 10){ | |
| // this.age = 10; | |
| // } | |
| // else if (this.age < 0){ | |
| // this.age = 0; | |
| // } | |
| // } | |
| // ///////////////////////////// | |
| // checkboredom(boredom){ | |
| // if (this.boredom > 10){ | |
| // this.boredom = 10; | |
| // } | |
| // else if (this.boredom < 0){ | |
| // this.boredom = 0; | |
| // } | |
| // } | |
| // ///////////////////////////// | |
| // checkSleeplevel(sleeplevel){ | |
| // if (this.sleeplevel > 10){ | |
| // this.sleeplevel = 10; | |
| // } | |
| // else if (this.sleeplevel < 0){ | |
| // this.sleeplevel = 0; | |
| // } | |
| // } | |
| } | |
| const nyanFinn = new Tamagotchi('Finn and Jake', 5, 5, 5, 1); | |
| // CALL | |
| checkAndUpdatenyanFinnInHtml(); | |
| $('.treatButton').click(clickedTreatButton); | |
| $('.playButton').click(clickedPlayButton); | |
| $('.exerciseButton').click(clickedExerciseButton); | |
| $('.sleepButton').click(clickedSleepButton); | |
| $('#heart').hide(); | |
| /// FUNCTIONS FOR BUTTON PRESS | |
| function clickedTreatButton() { | |
| nyanFinn.boredom++; | |
| nyanFinn.hunger++; | |
| checkAndUpdatenyanFinnInHtml(); | |
| } | |
| function clickedPlayButton() { | |
| nyanFinn.hunger--; | |
| nyanFinn.sleeplevel++ | |
| nyanFinn.boredom++ | |
| checkAndUpdatenyanFinnInHtml(); | |
| } | |
| function clickedExerciseButton() { | |
| nyanFinn.boredom--; | |
| nyanFinn.hunger--; | |
| nyanFinn.sleeplevel-- | |
| checkAndUpdatenyanFinnInHtml(); | |
| } | |
| function clickedSleepButton() { | |
| nyanFinn.hunger--; | |
| nyanFinn.sleeplevel++; | |
| checkAndUpdatenyanFinnInHtml(); | |
| } | |
| function checkAndUpdatenyanFinnInHtml() { | |
| // CALL THE METHODS TO SET THE RANGE FROM 0-10 --- THIS IS REDUNDANT NOW | |
| // nyanFinn.checkboredom(nyanFinn.boredom); | |
| // nyanFinn.checkSleeplevel(nyanFinn.sleeplevel); | |
| // nyanFinn.checkAge(nyanFinn.age); | |
| // nyanFinn.checkHunger(nyanFinn.hunger); | |
| checkVitals(); | |
| updatenyanFinnInHtml(); | |
| } | |
| function checkVitals() { | |
| if (nyanFinn.hunger < 1) { | |
| alert('your finn and jake don\'t weigh anything!') | |
| $('body').css('background-color', 'red') | |
| $('.heart_animation').remove(); | |
| } | |
| if (nyanFinn.boredom < 1) { | |
| alert('your finn and jake don\'t have any boredom left :(') | |
| $('body').css('background-color', 'red') | |
| $('.happy_animation').remove(); | |
| $('#happyProg').empty(); | |
| } | |
| if (nyanFinn.sleeplevel < 1) { | |
| alert('your finn and jake are too tired to go on :(') | |
| $('body').css('background-color', 'red') | |
| } | |
| } | |
| // timer | |
| let seconds = 0; | |
| $('.start-game').click(function(){ | |
| $('#heart').show(); | |
| const timePassing = () => { | |
| console.log(`IT HAS BEEN ${seconds} seconds`) | |
| seconds++; | |
| if(seconds % 7 == 0){ | |
| nyanFinn.hunger++; | |
| } | |
| if(seconds % 8 == 0){ | |
| nyanFinn.boredom++; | |
| } | |
| if(seconds % 9 == 0){ | |
| nyanFinn.sleeplevel++; | |
| } | |
| if(seconds % 15 == 0){ | |
| nyanFinn.age++; | |
| } | |
| if(Math.floor(Math.random() * 16) > 4){ | |
| nyanFinn.boredom-- | |
| } | |
| if(nyanFinn.hunger >= 10 || nyanFinn.boredom >= 10 || nyanFinn.sleeplevel >= 10){ | |
| alert("nyan finn is dead :( "); | |
| $('#heart').hide(); | |
| clearInterval(timePasses); | |
| } | |
| if(nyanFinn.hunger <= 0 || nyanFinn.boredom <= 0 || nyanFinn.sleeplevel <= 0){ | |
| alert("nyan finn is dead :( "); | |
| $('#heart').hide(); | |
| clearInterval(timePasses); | |
| } | |
| checkAndUpdatenyanFinnInHtml(); | |
| updatenyanFinnInHtml(); | |
| } | |
| const timePasses = setInterval(timePassing, 1000) | |
| }) | |
| // function defintion | |
| function updatenyanFinnInHtml() { | |
| $('.name').text(nyanFinn.name); | |
| $('.hunger').text(nyanFinn.hunger); | |
| $('.boredom').text(nyanFinn.boredom); | |
| $('.sleepyness').text(nyanFinn.sleeplevel); | |
| $('.age').text(nyanFinn.age); | |
| // PROG BAR | |
| $('#hungerProg').css("width", (nyanFinn.hunger * 10)+ "%"); | |
| $('#boredProg').css("width", (nyanFinn.boredom * 10)+ "%"); | |
| $('#ageProg').css("width", (nyanFinn.age * 10)+ "%"); | |
| $('#sleepProg').css("width", (nyanFinn.sleeplevel * 10)+ "%"); | |
| } | |
| }); | |
| </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
| body { | |
| padding-top: 54px; | |
| } | |
| @media (min-width: 992px) { | |
| body { | |
| padding-top: 56px; | |
| } | |
| } | |
| /* heartbeat animation */ | |
| @keyframes heartbeat { | |
| 0% { | |
| transform: scale( .75); | |
| } | |
| 20% { | |
| transform: scale( 1); | |
| } | |
| 40% { | |
| transform: scale( .75); | |
| } | |
| 60% { | |
| transform: scale( 1); | |
| } | |
| 80% { | |
| transform: scale( .75); | |
| } | |
| 100% { | |
| transform: scale( .75); | |
| } | |
| } | |
| #heart { | |
| position: relative; | |
| display:inline-block; | |
| width: 50px; | |
| height: 70px; | |
| animation: heartbeat 1s infinite; | |
| } | |
| #heart:before, | |
| #heart:after { | |
| position: absolute; | |
| content: ""; | |
| left: 50px; | |
| top: 0; | |
| width: 50px; | |
| height: 80px; | |
| background: red; | |
| -moz-border-radius: 50px 50px 0 0; | |
| border-radius: 50px 50px 0 0; | |
| -webkit-transform: rotate(-45deg); | |
| -moz-transform: rotate(-45deg); | |
| -ms-transform: rotate(-45deg); | |
| -o-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| -webkit-transform-origin: 0 100%; | |
| -moz-transform-origin: 0 100%; | |
| -ms-transform-origin: 0 100%; | |
| -o-transform-origin: 0 100%; | |
| transform-origin: 0 100%; | |
| } | |
| #heart:after { | |
| left: 0; | |
| -webkit-transform: rotate(45deg); | |
| -moz-transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| -o-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| -webkit-transform-origin: 100% 100%; | |
| -moz-transform-origin: 100% 100%; | |
| -ms-transform-origin: 100% 100%; | |
| -o-transform-origin: 100% 100%; | |
| transform-origin: 100% 100%; | |
| } |
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
| $(document).ready(function(){ | |
| class Tamagotchi { | |
| constructor(name, hunger, boredom, sleeplevel, age){ | |
| this.name = name; | |
| this.hunger = hunger; | |
| this.boredom = boredom; | |
| this.sleeplevel = sleeplevel; | |
| this.age = age; | |
| } | |
| // //////////////////////////// THIS IS NOW REDUNDANT | |
| // checkHunger(hunger){ | |
| // if (this.hunger > 10){ | |
| // this.hunger = 10; | |
| // } | |
| // else if (this.hunger < 0){ | |
| // this.hunger = 0; | |
| // } | |
| // } | |
| // ///////////////////////////// | |
| // checkAge(age){ | |
| // if (this.age > 10){ | |
| // this.age = 10; | |
| // } | |
| // else if (this.age < 0){ | |
| // this.age = 0; | |
| // } | |
| // } | |
| // ///////////////////////////// | |
| // checkboredom(boredom){ | |
| // if (this.boredom > 10){ | |
| // this.boredom = 10; | |
| // } | |
| // else if (this.boredom < 0){ | |
| // this.boredom = 0; | |
| // } | |
| // } | |
| // ///////////////////////////// | |
| // checkSleeplevel(sleeplevel){ | |
| // if (this.sleeplevel > 10){ | |
| // this.sleeplevel = 10; | |
| // } | |
| // else if (this.sleeplevel < 0){ | |
| // this.sleeplevel = 0; | |
| // } | |
| // } | |
| } | |
| const nyanFinn = new Tamagotchi('Finn and Jake', 5, 5, 5, 1); | |
| // CALL | |
| checkAndUpdatenyanFinnInHtml(); | |
| $('.treatButton').click(clickedTreatButton); | |
| $('.playButton').click(clickedPlayButton); | |
| $('.exerciseButton').click(clickedExerciseButton); | |
| $('.sleepButton').click(clickedSleepButton); | |
| $('#heart').hide(); | |
| /// FUNCTIONS FOR BUTTON PRESS | |
| function clickedTreatButton() { | |
| nyanFinn.boredom++; | |
| nyanFinn.hunger++; | |
| checkAndUpdatenyanFinnInHtml(); | |
| } | |
| function clickedPlayButton() { | |
| nyanFinn.hunger--; | |
| nyanFinn.sleeplevel++ | |
| nyanFinn.boredom++ | |
| checkAndUpdatenyanFinnInHtml(); | |
| } | |
| function clickedExerciseButton() { | |
| nyanFinn.boredom--; | |
| nyanFinn.hunger--; | |
| nyanFinn.sleeplevel-- | |
| checkAndUpdatenyanFinnInHtml(); | |
| } | |
| function clickedSleepButton() { | |
| nyanFinn.hunger--; | |
| nyanFinn.sleeplevel++; | |
| checkAndUpdatenyanFinnInHtml(); | |
| } | |
| function checkAndUpdatenyanFinnInHtml() { | |
| // CALL THE METHODS TO SET THE RANGE FROM 0-10 --- THIS IS REDUNDANT NOW | |
| // nyanFinn.checkboredom(nyanFinn.boredom); | |
| // nyanFinn.checkSleeplevel(nyanFinn.sleeplevel); | |
| // nyanFinn.checkAge(nyanFinn.age); | |
| // nyanFinn.checkHunger(nyanFinn.hunger); | |
| checkVitals(); | |
| updatenyanFinnInHtml(); | |
| } | |
| function checkVitals() { | |
| if (nyanFinn.hunger < 1) { | |
| alert('your finn and jake don\'t weigh anything!') | |
| $('body').css('background-color', 'red') | |
| $('.heart_animation').remove(); | |
| } | |
| if (nyanFinn.boredom < 1) { | |
| alert('your finn and jake don\'t have any boredom left :(') | |
| $('body').css('background-color', 'red') | |
| $('.happy_animation').remove(); | |
| $('#happyProg').empty(); | |
| } | |
| if (nyanFinn.sleeplevel < 1) { | |
| alert('your finn and jake are too tired to go on :(') | |
| $('body').css('background-color', 'red') | |
| } | |
| } | |
| // timer | |
| let seconds = 0; | |
| $('.start-game').click(function(){ | |
| $('#heart').show(); | |
| const timePassing = () => { | |
| console.log(`IT HAS BEEN ${seconds} seconds`) | |
| seconds++; | |
| if(seconds % 7 == 0){ | |
| nyanFinn.hunger++; | |
| } | |
| if(seconds % 8 == 0){ | |
| nyanFinn.boredom++; | |
| } | |
| if(seconds % 9 == 0){ | |
| nyanFinn.sleeplevel++; | |
| } | |
| if(seconds % 15 == 0){ | |
| nyanFinn.age++; | |
| } | |
| if(Math.floor(Math.random() * 16) > 4){ | |
| nyanFinn.boredom-- | |
| } | |
| if(nyanFinn.hunger >= 10 || nyanFinn.boredom >= 10 || nyanFinn.sleeplevel >= 10){ | |
| alert("nyan finn is dead :( "); | |
| $('#heart').hide(); | |
| clearInterval(timePasses); | |
| } | |
| if(nyanFinn.hunger <= 0 || nyanFinn.boredom <= 0 || nyanFinn.sleeplevel <= 0){ | |
| alert("nyan finn is dead :( "); | |
| $('#heart').hide(); | |
| clearInterval(timePasses); | |
| } | |
| checkAndUpdatenyanFinnInHtml(); | |
| updatenyanFinnInHtml(); | |
| } | |
| const timePasses = setInterval(timePassing, 1000) | |
| }) | |
| // function defintion | |
| function updatenyanFinnInHtml() { | |
| $('.name').text(nyanFinn.name); | |
| $('.hunger').text(nyanFinn.hunger); | |
| $('.boredom').text(nyanFinn.boredom); | |
| $('.sleepyness').text(nyanFinn.sleeplevel); | |
| $('.age').text(nyanFinn.age); | |
| // PROG BAR | |
| $('#hungerProg').css("width", (nyanFinn.hunger * 10)+ "%"); | |
| $('#boredProg').css("width", (nyanFinn.boredom * 10)+ "%"); | |
| $('#ageProg').css("width", (nyanFinn.age * 10)+ "%"); | |
| $('#sleepProg').css("width", (nyanFinn.sleeplevel * 10)+ "%"); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment