Skip to content

Instantly share code, notes, and snippets.

@Baudin999

Baudin999/index.html

Last active August 20, 2016 13:23
Show Gist options
  • Save Baudin999/edea8665f6919c8dd7eb68191a318a91 to your computer and use it in GitHub Desktop.
Save Baudin999/edea8665f6919c8dd7eb68191a318a91 to your computer and use it in GitHub Desktop.
Download ZIP
Roaman
Raw
index.html
<!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>
Raw
script.js
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);
}
})
});
Raw
styles.css
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