johakr / html5-slot-machine

Modern casino slot machine game using only plain JavaScript (Web Animations API)

HTML5 Slot Machine

This is a modern proof of concept casino slot machine game, built using only vanilla HTML, CSS and JavaScript. No Flash or Frameworks required. Allowing for an amazing low bundle size and blazing fast performance.

Built using the Web Animations API.

Live Demo

Features

• Fully responsive for great UX on mobile, web & fullscreen mode.
• Autoplay functionality, which keeps running even if the game window is in background.

Installation, Build & Deployment

1. Clone repository
2. Run npm install
   • Development: run npm start and go to http://localhost:8080
   • Production: run npm run build and serve from /dist

Configuration

For configuration options see config object in index.js

Property	Description	Default
inverted	Controls visual spinning direction of reels. If false, reels will spin from bottom to top. If true, reels will spin from top to bottom	false
onSpinStart	Callback function invoked when spin starts with symbols pattern array (symbols) => void.	undefined
onSpinEnd	Callback function invoked when spin ends with symbols pattern array (symbols) => void.	undefined

Credits

Icons are created by KPD Media and can be used for private and commercial purposes with no attribution required (check license here).

html5-slot-machine's Issues

An in-range update of style-loader is breaking the build 🚨

---

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

---

The devDependency style-loader was updated from 1.1.3 to 1.1.4.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

style-loader is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ Travis CI - Branch: The build errored.

---

Release Notes for v1.1.4

1.1.4 (2020-04-15)

Chore

• update deps

Commits

The new version differs by 3 commits.

• 171a747 chore(release): 1.1.4
• af1b4a9 chore(deps): update
• a003f05 docs: add links for the options table (#460)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of babel7 is breaking the build 🚨

There have been updates to the babel7 monorepo:

• • The devDependency @babel/core was updated from 7.7.7 to 7.8.0.

• The devDependency @babel/preset-env was updated from 7.8.0 to 7.8.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ Travis CI - Branch: The build errored.

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Configuration of spin.

Hello, possible to make the spin starting all columns together but the finish of each column will happen one after other in some delay, like in regular slots ?

Thanks!

Visual errors on Safari@IOS

Some reels are blank at the almost end of the animation. If the animation is finished, the reels are again shown properly:

Two right reels are missing. It depends on the time within the animation.

Outsourcing? We need to develop games like this

Outsourcing? We need to develop games like this

Failed to load resource

When fresh npm start, hit this issue in browser. Same goes to the demo site.

Can help to clarify what is missing?

Error message:
Failed to load resource: the server responded with a status of 404 () [object%20Module]:1

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

An in-range update of webpack is breaking the build 🚨

The devDependency webpack was updated from 4.35.3 to 4.36.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ Travis CI - Branch: The build errored.

---

Release Notes for v4.36.0

Features

• SourceMapDevToolPlugin append option now supports the default placeholders in addition to [url]
• Arrays in resolve and parser options (Rule and Loader API) support backreferences with "..." when overriding options.

Commits

The new version differs by 42 commits.

• 95d21bb 4.36.0
• aa1216c Merge pull request #9422 from webpack/feature/dot-dot-dot-merge
• b3ec775 improve merging of resolve and parsing options
• 53a5ae2 Merge pull request #9419 from vankop/remove-valid-jsdoc-rule
• ab75240 Merge pull request #9413 from webpack/dependabot/npm_and_yarn/ajv-6.10.2
• 0bdabf4 Merge pull request #9418 from webpack/dependabot/npm_and_yarn/eslint-plugin-jsdoc-15.5.2
• f207cdc remove valid jsdoc rule in favour of eslint-plugin-jsdoc
• 31333a6 chore(deps-dev): bump eslint-plugin-jsdoc from 15.3.9 to 15.5.2
• 036adf0 Merge pull request #9417 from webpack/dependabot/npm_and_yarn/eslint-plugin-jest-22.8.0
• 37d4480 Merge pull request #9411 from webpack/dependabot/npm_and_yarn/simple-git-1.121.0
• ce2a183 chore(deps-dev): bump eslint-plugin-jest from 22.7.2 to 22.8.0
• 0beeb7e Merge pull request #9391 from vankop/create-hash-typescript
• bf1a24a #9391 resolve super call discussion
• bd7d95b #9391 resolve discussions, AbstractMethodError
• 4190638 chore(deps): bump ajv from 6.10.1 to 6.10.2

There are 42 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Invert Animation

Hello, I'd like change the order spinning.
I change the file Reel.js for setting to spinning for down

from { transform: translateY(-${((Math.floor(this.factor) * 10) / (3 + Math.floor(this.factor) * 10)) * 100}%), filter: 'blur(0)' },

to { transform: translateY(${((Math.floor(this.factor) * 10) / (3 + Math.floor(this.factor) * 10)) * 100}%), filter: 'blur(0)' },

but the order spinning is not perfect.

Feature Request: On Stop Event

Hi it would be great if there is a onStop event with the Symbol pattern (array) as callback value.

Thank you

An in-range update of webpack-dev-server is breaking the build 🚨

The devDependency webpack-dev-server was updated from 3.4.1 to 3.5.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack-dev-server is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ Travis CI - Branch: The build errored.

---

Release Notes for v3.5.0

Bug Fixes

• add client code for electron-renderer target (#1935) (9297988)
• add client code for node-webkit target (#1942) (c6b2b1f)

Features

• server: onListening option (#1930) (61d0cdf)
• server: add callback support for invalidate (#1900) (cd218ef)
• server: add WEBPACK_DEV_SERVER env variable (#1929) (856169e)

Commits

The new version differs by 25 commits.

• a0b9c70 chore(release): 3.5.0
• c6b2b1f fix: add client code for node-webkit target (#1942)
• cd218ef feat(server): add callback support for invalidate (#1900)
• bca0341 chore(deps): update dependency loglevel to ^1.6.2 (#1939)
• 61d0cdf feat: onListening option (#1930)
• 9297988 fix: add client code for electron-renderer target (#1935)
• bc83223 test(client): check console.log (#1907)
• f6bfedb Delete incorrectly capitalized server files (#1931)
• c9a6b4f chore(deps): update dependency semver to ^6.1.1 (#1932)
• d7aaef6 refactor(server): encapsulate socket server implementation (#1904)
• 87cfaa7 refactor(cli): code (#1927)
• e99fa3a test: proxy supports http methods (#1928)
• 856169e feat(server): add WEBPACK_DEV_SERVER env variable (#1929)
• 4b097e2 refactor: don't listen to http error event (#1924)
• 0baa0e0 chore(deps): update all patch dependencies (patch) (#1923)

There are 25 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴