Skip to content

Instantly share code, notes, and snippets.

@JaosnHsieh

JaosnHsieh/index.html

Forked from anonymous/index.html
Created July 17, 2017 10:38
Show Gist options
  • Save JaosnHsieh/8a77096f4583fd179ec2924b166a00fd to your computer and use it in GitHub Desktop.
Save JaosnHsieh/8a77096f4583fd179ec2924b166a00fd to your computer and use it in GitHub Desktop.
Download ZIP
Slot Machine
Raw
index.html
<html>
<head>
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Asset" rel="stylesheet">
</head>
<body>
<div id = "space">
<div id="container1">
<div class="div1"><img src="https://247wallst.files.wordpress.com/2015/05/thinkstockphotos-158403411.jpg?w=200"></div>
<div class="div2"><img src="http://2.wlimg.com/product_images/bc-small/dir_115/3420934/fresh-orange-1671496.jpg"></div>
<div class="div3"><img src="http://img1.exportersindia.com/product_images/bc-small/dir_107/3191819/white-seeded-grapes_p_1303642_167710.jpg"></div>
<div class="div4"><img src="http://img1.exportersindia.com/product_images/bc-small/dir_16/468084/strawberries-1488827.jpg"></div>
<div class="div5"><img src="http://ts2.mm.bing.net/th?id=OIP.M600fe36d0dd16d1ba252d61d48ddf67ao0&w=200"></div>
<div class="div6"><img src="http://www.freshfruitportal.com/assets/uploads/2012/07/Tommy-Atkins-mango.jpg"></div>
</div>
<div id="container2">
<div class="div5"><img src="https://247wallst.files.wordpress.com/2015/05/thinkstockphotos-158403411.jpg?w=200"></div>
<div class="div3"><img src="http://2.wlimg.com/product_images/bc-small/dir_115/3420934/fresh-orange-1671496.jpg"></div>
<div class="div4"><img src="http://img1.exportersindia.com/product_images/bc-small/dir_107/3191819/white-seeded-grapes_p_1303642_167710.jpg"></div>
<div class="div2"><img src="http://img1.exportersindia.com/product_images/bc-small/dir_16/468084/strawberries-1488827.jpg"></div>
<div class="div6"><img src="http://ts2.mm.bing.net/th?id=OIP.M600fe36d0dd16d1ba252d61d48ddf67ao0&w=200"></div>
<div class="div1"><img src="http://www.freshfruitportal.com/assets/uploads/2012/07/Tommy-Atkins-mango.jpg"></div>
</div>
<div id="container3">
<div class="div3"><img src="https://247wallst.files.wordpress.com/2015/05/thinkstockphotos-158403411.jpg?w=200"></div>
<div class="div4"><img src="http://2.wlimg.com/product_images/bc-small/dir_115/3420934/fresh-orange-1671496.jpg"></div>
<div class="div6"><img src="http://img1.exportersindia.com/product_images/bc-small/dir_107/3191819/white-seeded-grapes_p_1303642_167710.jpg"></div>
<div class="div1"><img src="http://img1.exportersindia.com/product_images/bc-small/dir_16/468084/strawberries-1488827.jpg"></div>
<div class="div5"><img src="http://ts2.mm.bing.net/th?id=OIP.M600fe36d0dd16d1ba252d61d48ddf67ao0&w=200"></div>
<div class="div2"><img src="http://www.freshfruitportal.com/assets/uploads/2012/07/Tommy-Atkins-mango.jpg"></div>
</div>
</div>
<div id="frame"></div>
<div id="title">JUMBO<br>SLOTS</div>
<div id="tablespace"><div id="table"><p>Re.1 per play!</p><div id="coinslot"></div><div id="slot"><div id="coin"></div></div></div></div>
<div id="legs"><div id="jackpot"></div></div>
<div id="mechanism">
<div id="holder"></div>
<div id="handle"><div id="hider"></div></div>
</div>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
var carousel = [];
var angle = [0, 0, 0];
carousel[0] = document.getElementById("container1");
carousel[1] = document.getElementById("container2");
carousel[2] = document.getElementById("container3");
var handle = document.getElementById("handle");
function addEvent() {
handle.addEventListener("click", rotate1);
}
addEvent();
function rotate1() {
handle.removeEventListener("click", rotate1);
handle.style.transform = "rotateX(-90deg)";
handle.style.transition = "transform 0.4s linear";
handle.addEventListener("transitionend", rotate2);
}
function rotate2() {
handle.style.transform = "rotateX(0deg)";
handle.style.transition = "transform 0.3s linear";
randRotate();
}
function randRotate() {
console.log("!");
var rand = [];
for(var i = 0 ; i < 3 ; i++) {
rand[i] = Math.floor(Math.random()*6);
rand[i] = 60 * (rand[i] + 1);
angle[i] += (3600 + 1200*i + rand[i]);
}
carousel[1].removeEventListener("click", randRotate);
for(var i = 0 ; i < 3 ; i++) {
carousel[i].style.transition = "transform " + (3+i) + "s cubic-bezier(.89,.77,.92,.99)";
carousel[i].style.transform = "rotateX(" + angle[i] + "deg)";
}
carousel[2].addEventListener("transitionend",goBack);
}
function goBack() {
handle.addEventListener("click", rotate1);
for(var i = 0 ; i < 3 ; i++) {
carousel[i].style.transition = "transform 0s";
carousel[i].style.transform = "rotateX(" + (angle[i]%360) + "deg)";
angle[i] %= 360;
}
}
Raw
slot-machine.markdown
Raw
style.css
#space {
perspective: 800px;
perspective-origin: 150px 180px;
position: relative;
left: 150px;
width: 300px;
height: 600px;
}
#container1,
#container2,
#container3 {
position: absolute;
transform-style: preserve-3d;
transform-origin: 0 50px 0;
top: 142px;
}
#container1 {
left: 0px;
}
#container2 {
left: 100px;
}
#container3 {
left: 200px;
}
#container1 div,
#container2 div,
#container3 div {
position: absolute;
width: 100px;
height: 100px;
backface-visibility: hidden;
box-sizing: border-box;
background-color: #00cc00;
}
#container1 img,
#container2 img,
#container3 img {
height: 100%;
border-radius: 20px;
border: 5px solid #00cc00;
box-sizing: border-box;
}
.div1 {
transform: rotateX(0deg) translateZ(86px);
}
.div2 {
transform: rotateX(60deg) translateZ(86px);
}
.div3 {
transform: rotateX(120deg) translateZ(86px);
}
.div4 {
transform: rotateX(180deg) translateZ(86px);
}
.div5 {
transform: rotateX(240deg) translateZ(86px);
}
.div6 {
transform: rotateX(300deg) translateZ(86px);
}
#frame {
position: absolute;
width: 336px;
height: 195px;
border: 20px solid #0000b3;
border-top: 101px solid #0000b3;
border-radius: 100px 100px 0 0;
top: 2px;
left: 120px;
}
#title {
position: absolute;
font-family: 'Asset';
font-size: 30px;
color: orange;
text-align: center;
text-shadow: 0 0 20px yellow;
top: 15px;
left: 195px;
}
#tablespace {
position: absolute;
top: 311px;
left: 107px;
perspective: 200px;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
width: 402px;
height: 100px;
}
#table {
width: 402px;
height: 80px;
/*background: linear-gradient(#0000b3, #4d4dff);*/
background-size: cover;
transform: rotateX(20deg);
border: 3px solid black;
box-sizing: border-box;
background-image: url(http://casirating.com/wp-content/uploads/2016/02/jackpot-580x326.jpg);
}
#table p {
font-size: 35px;
margin-top: 16px;
margin-left: 30px;
font-weight: bold;
color: white;
text-shadow: 0 0 2px black, 0 0 5px black, 0 0 10px black;
}
#legs {
position: absolute;
top: 390px;
left: 92px;
border: 5px solid red;
box-sizing: border-box;
width: 432px;
height: 240px;
background-image: url(http://presentcreative.com/ios/wp-content/uploads/2013/02/FunzioHeader.png);
background-size: cover;
}
#coinslot {
position: absolute;
top: 13px;
left: 325px;
width: 35px;
height: 50px;
background-image: url(http://stockfresh.com/files/p/pling/m/76/297266_stock-photo-silver-aluminium-rough-texture-background.jpg);
background-size: cover;
border-radius: 5px;
}
#slot {
width: 25px;
height: 23px;
position: absolute;
top: 17px;
left: 329px;
border: 1px solid grey;
border-radius: 50%;
background: radial-gradient(white 1%, silver);
}
#coin {
width: 3px;
height: 12px;
background-color: black;
position: absolute;
top: 5px;
left: 11px;
}
#jackpot {
width: 90%;
height: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#jackpot img {
width: 100px;
margin-left: 90px;
}
#mechanism {
position: absolute;
width: 100px;
height: 100px;
top: 185px;
left: 496px;
perspective: 500px;
perspective-origin: 30% 100%;
}
#holder {
position: absolute;
top: 85px;
width: 30px;
height: 30px;
background: linear-gradient(black, grey, black);
}
#handle {
position: absolute;
top: -15px;
left: 20px;
width: 10px;
height: 100px;
background: linear-gradient(to right, black, grey, black);
transform-origin: 0 115px;
transform-style: preserve-3d;
}
#handle:before {
width: 24px;
height: 24px;
content: '';
position: absolute;
top: -12px;
left: -7px;
border-radius: 50%;
background-color: #ff4d4d;
transform-origin: 0 12px;
}
#handle:after {
width: 24px;
height: 24px;
content: '';
position: absolute;
top: -12px;
left: -7px;
border-radius: 50%;
transform: rotateX(90deg);
background-color: #ff4d4d;
transform-origin: 0 12px;
}
#hider {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #ff4d4d;
position: absolute;
top: -12px;
left: -7px;
transform: rotateX(45deg);
}
#handle:hover {
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment