First commit

niccolomineo · Sep 19, 2018 · 705e7c4 · 705e7c4
1 parent 891d04c
commit 705e7c4
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 0 deletions.
diff --git a/README.MD b/README.MD
@@ -0,0 +1,6 @@
+# Slot Machine
+
+A basic slot machine game logic, playable as it is, but customisable further, too:
+
+* Instantiate as many slot machines as you wish and specify a custom `selector`, `frameRate`, `maxBlur`, `hitDelay`, `superPrizeFigureIndex` and `keyToPress`
+* Instantiate as many slots as you wish and specify a custom `startAtFigureIndex` and `delay`
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,57 @@
+/**
+* Slot Machine
+* coded with ♥ by Niccolò Mineo
+* www.niccolomineo.com
+* © 2018
+*/
+
+body {
+    cursor: default;
+    margin: 0;
+}
+
+#slotmachine-container {
+    background-color: darkgray;
+    outline: 8px solid darkgray;
+    height: 200px;
+    overflow: hidden;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    opacity: 0;
+    -webkit-animation: .5s fadeIn .5s forwards;
+    -moz-animation: .5s fadeIn .5s forwards;
+    -ms-animation: .5s fadeIn .5s forwards;
+    -o-animation: .5s fadeIn .5s forwards;
+    animation: .5s fadeIn .5s forwards;
+    box-shadow: -24px -65px 0px 74px white, 0px 10px 80px 6px lightgray;
+}
+
+#slotmachine {
+    margin-top: 40px;
+    text-align: center;
+}
+
+#slotmachine ul {
+    width: 200px;
+    background-color: white;
+    display: inline-block;
+    list-style-type: none;
+    padding-left: 0;
+}
+
+#slotmachine ul:not(:last-of-type) {
+    padding-right: 5px;
+}
+
+#slotmachine ul li img {
+    width: 100px;
+    height: 100px;
+    text-align: center;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
diff --git a/img/slot1.png b/img/slot1.png
diff --git a/img/slot2.png b/img/slot2.png
diff --git a/img/slot3.png b/img/slot3.png
diff --git a/img/slot4.png b/img/slot4.png
diff --git a/img/slot5.png b/img/slot5.png
diff --git a/img/slot6.png b/img/slot6.png
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="robots" content="noindex,nofollow"/>
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
+    <title>Slot Machine</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2.0">
+    <link rel="stylesheet" href="css/main.css" type="text/css" media="screen"/>
+</head>
+<body>
+    <div id="slotmachine-container">
+        <div id="slotmachine">
+            <ul id="slot1">
+                <li><img src="img/slot1.png" /></li>
+                <li><img src="img/slot2.png" /></li>
+                <li><img src="img/slot3.png" /></li>
+                <li><img src="img/slot4.png" /></li>
+                <li><img src="img/slot5.png" /></li>
+                <li><img src="img/slot6.png" /></li>
+            </ul>
+            <ul id="slot2">
+                <li><img src="img/slot1.png" /></li>
+                <li><img src="img/slot2.png" /></li>
+                <li><img src="img/slot3.png" /></li>
+                <li><img src="img/slot4.png" /></li>
+                <li><img src="img/slot5.png" /></li>
+                <li><img src="img/slot6.png" /></li>
+            </ul>
+            <ul id="slot3">
+                <li><img src="img/slot1.png" /></li>
+                <li><img src="img/slot2.png" /></li>
+                <li><img src="img/slot3.png" /></li>
+                <li><img src="img/slot4.png" /></li>
+                <li><img src="img/slot5.png" /></li>
+                <li><img src="img/slot6.png" /></li>
+            </ul>
+        </div>
+    </div>
+    <script src="js/main.js"></script>
+</body>
+</html>