Last active
August 20, 2016 13:23
-
-
Save Baudin999/edea8665f6919c8dd7eb68191a318a91 to your computer and use it in GitHub Desktop.
Roaman
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"> | |
<title>GistRun</title> | |
<link rel="stylesheet" href="styles.css"> | |
</head> | |
<body> | |
<div class="game"> | |
<div class="left"> | |
<div class="pas lettuce"><div></div></div> | |
<div class="pas wolf"><div></div></div> | |
<div class="pas goat"><div></div></div> | |
</div> | |
<div class="water"> | |
<div class="boat"><div></div></div> | |
</div> | |
<div class="right"></div> | |
</div> | |
<script src="script.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 status = "left"; | |
/* BOAT CODE */ | |
var boat = document.querySelector('.boat'); | |
boat.addEventListener('click', function() { | |
floatBoat(); | |
}); | |
function floatBoat() { | |
if (status === "left") { | |
boat.className = "boat float-left-to-right"; | |
status = "right"; | |
} | |
else { | |
boat.className = "boat float-right-to-left"; | |
status = "left"; | |
} | |
} | |
/* Passengers code */ | |
var passengers = [].slice.call(document.querySelectorAll('.pas')); | |
passengers.forEach(function(p) { | |
p.location = "left"; | |
p.addEventListener('click', function() { | |
if (p.location === "left" && status === "left") { | |
p.parentNode.removeChild(p); | |
floatBoat(); | |
setTimeout(function() { | |
p.location = "right"; | |
document.querySelector('.right').appendChild(p); | |
}, 900); | |
} | |
else if (p.location === "right" && status === "right") { | |
p.parentNode.removeChild(p); | |
floatBoat(); | |
setTimeout(function() { | |
p.location = "left"; | |
document.querySelector('.left').appendChild(p); | |
}, 900); | |
} | |
}) | |
}); |
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
html, body, .game { | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
.game { | |
display: flex; | |
} | |
.left, .right { | |
flex: 0 0 200px; | |
background: green; | |
} | |
.water { | |
flex: 0 0 300px; | |
background: blue; | |
} | |
.pas { | |
height: 80px; | |
width: 80px; | |
margin-left: 50%; | |
transform: translateX(-50%); | |
} | |
.lettuce { | |
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2YuyFZNdqXDSX7mfgFJihWFt7lvdiweZzKGqrz0oJyOrM5LCy"); | |
background-size: cover; | |
} | |
.wolf { | |
background: url("https://s3.amazonaws.com/s3.timetoast.com/public/uploads/photos/3156501/grey-wolf_565_600x450_medium_square.jpg?1352839465"); | |
} | |
.goat { | |
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSmoGd_eiY1xmanpaFuPpeMXzpmnGVeohUNMo80dZu9GE4JWVHb"); | |
} | |
/* BOAT STYLING */ | |
.boat { | |
background: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRHvYOdw00Y_XtGmZS6Fi5ygwiPYEMuhETAEfV1Rk3jV_BlWmPu'); | |
background-size: cover; | |
margin-top: 80px; | |
width: 80px; | |
height: 80px; | |
} | |
.boat.float-left-to-right { | |
animation: floatLeftToRight 1s ease; | |
margin-left: 220px; | |
} | |
.boat.float-right-to-left { | |
animation: floatRightToLeft 1s ease; | |
margin-left: 0; | |
} | |
@keyframes floatLeftToRight { | |
from { | |
margin-left: 0; | |
} | |
to { | |
margin-left: 220px; | |
} | |
} | |
@keyframes floatRightToLeft { | |
from { | |
margin-left: 220px; | |
} | |
to { | |
margin-left: 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment