Created
June 27, 2018 08:35
-
-
Save natepappenhagen/a5bb45bb78b5f5da86c0412dd1447d9b 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> | |
</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; | |
} | |
//////////////////////////// | |
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, 5); | |
// CALL | |
checkAndUpdatenyanFinnInHtml(); | |
$('.treatButton').click(clickedTreatButton); | |
$('.playButton').click(clickedPlayButton); | |
$('.exerciseButton').click(clickedExerciseButton); | |
$('.sleepButton').click(clickedSleepButton); | |
/// FUNCTIONS FOR BUTTON PRESS | |
function clickedTreatButton() { | |
nyanFinn.boredom++; | |
nyanFinn.hunger++; | |
checkAndUpdatenyanFinnInHtml(); | |
} | |
function clickedPlayButton() { | |
nyanFinn.boredom++; | |
nyanFinn.hunger--; | |
checkAndUpdatenyanFinnInHtml(); | |
} | |
function clickedExerciseButton() { | |
nyanFinn.boredom--; | |
nyanFinn.hunger--; | |
nyanFinn.sleeplevel-- | |
checkAndUpdatenyanFinnInHtml(); | |
} | |
function clickedSleepButton() { | |
nyanFinn.boredom++; | |
nyanFinn.hunger--; | |
nyanFinn.sleeplevel++; | |
nyanFinn.age--; | |
checkAndUpdatenyanFinnInHtml(); | |
} | |
function checkAndUpdatenyanFinnInHtml() { | |
// CALL THE METHODS TO SET THE RANGE FROM 0-10 | |
nyanFinn.checkboredom(nyanFinn.boredom); | |
nyanFinn.checkSleeplevel(nyanFinn.sleeplevel); | |
nyanFinn.checkAge(nyanFinn.age); | |
nyanFinn.checkHunger(nyanFinn.hunger); | |
updatenyanFinnInHtml(); | |
} | |
function checkVitals() { | |
if (nyanFinn.hunger < 1) { | |
alert('your finn and jake don\'t weigh anything!') | |
$('body').css('background-color', 'red') | |
$('.heart_animation').remove(); | |
$('#heartProg').empty(); | |
} | |
else if (nyanFinn.boredom < 1) { | |
alert('your finn and jake don\'t have any boredom left :(') | |
.css('background-color', 'red') | |
$('.happy_animation').remove(); | |
$('#happyProg').empty(); | |
} | |
else if (nyanFinn.sleeplevel < 1) { | |
alert('your finn and jake are too tired to go on :(') | |
.css('background-color', 'red') | |
} | |
// make it tough | |
else if(nyanFinn.hunger > 8) { | |
nyanFinn.boredom--; | |
alert(`YOU TOO MUCH`); | |
} | |
else if(nyanFinn.sleep > 7) { | |
nyanFinn.boredom--; | |
alert(`YOU HAS SLEEP NOW?`); | |
} | |
else if(nyanFinn.age < 5) { | |
nyanFinn.boredom++; | |
nyanFinn.sleeplevel-- | |
alert(`YOU HAPPY BUT TIRED`); | |
} | |
} | |
// timer | |
let seconds = 0; | |
$('.start-game').click(function(){ | |
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 % 30 == 0){ | |
nyanFinn.age++; | |
} | |
if(Math.floor(Math.random() * 10) > 4){ | |
nyanFinn.boredom-- | |
} | |
if(nyanFinn.hunger >= 10 || nyanFinn.boredom >= 10 || nyanFinn.sleepiness >= 10){ | |
alert("nyan finn is dead :( "); | |
$('#heart').remove(); | |
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> | |
</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; | |
} | |
//////////////////////////// | |
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, 5); | |
// CALL | |
checkAndUpdatenyanFinnInHtml(); | |
$('.treatButton').click(clickedTreatButton); | |
$('.playButton').click(clickedPlayButton); | |
$('.exerciseButton').click(clickedExerciseButton); | |
$('.sleepButton').click(clickedSleepButton); | |
/// FUNCTIONS FOR BUTTON PRESS | |
function clickedTreatButton() { | |
nyanFinn.boredom++; | |
nyanFinn.hunger++; | |
checkAndUpdatenyanFinnInHtml(); | |
} | |
function clickedPlayButton() { | |
nyanFinn.boredom++; | |
nyanFinn.hunger--; | |
checkAndUpdatenyanFinnInHtml(); | |
} | |
function clickedExerciseButton() { | |
nyanFinn.boredom--; | |
nyanFinn.hunger--; | |
nyanFinn.sleeplevel-- | |
checkAndUpdatenyanFinnInHtml(); | |
} | |
function clickedSleepButton() { | |
nyanFinn.boredom++; | |
nyanFinn.hunger--; | |
nyanFinn.sleeplevel++; | |
nyanFinn.age--; | |
checkAndUpdatenyanFinnInHtml(); | |
} | |
function checkAndUpdatenyanFinnInHtml() { | |
// CALL THE METHODS TO SET THE RANGE FROM 0-10 | |
nyanFinn.checkboredom(nyanFinn.boredom); | |
nyanFinn.checkSleeplevel(nyanFinn.sleeplevel); | |
nyanFinn.checkAge(nyanFinn.age); | |
nyanFinn.checkHunger(nyanFinn.hunger); | |
updatenyanFinnInHtml(); | |
} | |
function checkVitals() { | |
if (nyanFinn.hunger < 1) { | |
alert('your finn and jake don\'t weigh anything!') | |
$('body').css('background-color', 'red') | |
$('.heart_animation').remove(); | |
$('#heartProg').empty(); | |
} | |
else if (nyanFinn.boredom < 1) { | |
alert('your finn and jake don\'t have any boredom left :(') | |
.css('background-color', 'red') | |
$('.happy_animation').remove(); | |
$('#happyProg').empty(); | |
} | |
else if (nyanFinn.sleeplevel < 1) { | |
alert('your finn and jake are too tired to go on :(') | |
.css('background-color', 'red') | |
} | |
// make it tough | |
else if(nyanFinn.hunger > 8) { | |
nyanFinn.boredom--; | |
alert(`YOU TOO MUCH`); | |
} | |
else if(nyanFinn.sleep > 7) { | |
nyanFinn.boredom--; | |
alert(`YOU HAS SLEEP NOW?`); | |
} | |
else if(nyanFinn.age < 5) { | |
nyanFinn.boredom++; | |
nyanFinn.sleeplevel-- | |
alert(`YOU HAPPY BUT TIRED`); | |
} | |
} | |
// timer | |
let seconds = 0; | |
$('.start-game').click(function(){ | |
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 % 30 == 0){ | |
nyanFinn.age++; | |
} | |
if(Math.floor(Math.random() * 10) > 4){ | |
nyanFinn.boredom-- | |
} | |
if(nyanFinn.hunger >= 10 || nyanFinn.boredom >= 10 || nyanFinn.sleepiness >= 10){ | |
alert("nyan finn is dead :( "); | |
$('#heart').remove(); | |
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; | |
} | |
//////////////////////////// | |
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, 5); | |
// CALL | |
checkAndUpdatenyanFinnInHtml(); | |
$('.treatButton').click(clickedTreatButton); | |
$('.playButton').click(clickedPlayButton); | |
$('.exerciseButton').click(clickedExerciseButton); | |
$('.sleepButton').click(clickedSleepButton); | |
/// FUNCTIONS FOR BUTTON PRESS | |
function clickedTreatButton() { | |
nyanFinn.boredom++; | |
nyanFinn.hunger++; | |
checkAndUpdatenyanFinnInHtml(); | |
} | |
function clickedPlayButton() { | |
nyanFinn.boredom++; | |
nyanFinn.hunger--; | |
checkAndUpdatenyanFinnInHtml(); | |
} | |
function clickedExerciseButton() { | |
nyanFinn.boredom--; | |
nyanFinn.hunger--; | |
nyanFinn.sleeplevel-- | |
checkAndUpdatenyanFinnInHtml(); | |
} | |
function clickedSleepButton() { | |
nyanFinn.boredom++; | |
nyanFinn.hunger--; | |
nyanFinn.sleeplevel++; | |
nyanFinn.age--; | |
checkAndUpdatenyanFinnInHtml(); | |
} | |
function checkAndUpdatenyanFinnInHtml() { | |
// CALL THE METHODS TO SET THE RANGE FROM 0-10 | |
nyanFinn.checkboredom(nyanFinn.boredom); | |
nyanFinn.checkSleeplevel(nyanFinn.sleeplevel); | |
nyanFinn.checkAge(nyanFinn.age); | |
nyanFinn.checkHunger(nyanFinn.hunger); | |
updatenyanFinnInHtml(); | |
} | |
function checkVitals() { | |
if (nyanFinn.hunger < 1) { | |
alert('your finn and jake don\'t weigh anything!') | |
$('body').css('background-color', 'red') | |
$('.heart_animation').remove(); | |
$('#heartProg').empty(); | |
} | |
else if (nyanFinn.boredom < 1) { | |
alert('your finn and jake don\'t have any boredom left :(') | |
.css('background-color', 'red') | |
$('.happy_animation').remove(); | |
$('#happyProg').empty(); | |
} | |
else if (nyanFinn.sleeplevel < 1) { | |
alert('your finn and jake are too tired to go on :(') | |
.css('background-color', 'red') | |
} | |
// make it tough | |
else if(nyanFinn.hunger > 8) { | |
nyanFinn.boredom--; | |
alert(`YOU TOO MUCH`); | |
} | |
else if(nyanFinn.sleep > 7) { | |
nyanFinn.boredom--; | |
alert(`YOU HAS SLEEP NOW?`); | |
} | |
else if(nyanFinn.age < 5) { | |
nyanFinn.boredom++; | |
nyanFinn.sleeplevel-- | |
alert(`YOU HAPPY BUT TIRED`); | |
} | |
} | |
// timer | |
let seconds = 0; | |
$('.start-game').click(function(){ | |
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 % 30 == 0){ | |
nyanFinn.age++; | |
} | |
if(Math.floor(Math.random() * 10) > 4){ | |
nyanFinn.boredom-- | |
} | |
if(nyanFinn.hunger >= 10 || nyanFinn.boredom >= 10 || nyanFinn.sleepiness >= 10){ | |
alert("nyan finn is dead :( "); | |
$('#heart').remove(); | |
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