プログラミング

JavaScript でスロットマシーンを作ってみました(Canvas版)

投稿日:2017年7月28日 更新日:

JavaScript でスロットマシーンを作ってみました。

前回 とは違い、今回は Canvas を使っています。

1. スクリーンショット

スクリーンショット

2. デモページ

以下のリンク先がデモページになっています。

3. 内容

  • [スタート]ボタンを押すと、7つの選択肢が回転を始めます。[ストップ]ボタンを押すと止まります。
  • 下にあるスライダーで、回転するスピードを変えることができます。
  • 7つの選択肢は画像になっており、Canvas に読み込ませています。

4. ソースコード

5. 参考情報

特にありません。

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

no image

Pug(旧Jade)テンプレートファイル内で、npmでインストールしたモジュールを使う方法

Pug(旧Jade)というJavaScriptのテンプレートエンジンがありますが、このテンプレートファイル内では JavaScriptが使えるので、複雑なHTMLを生成することができます。 但しデフォ …

Web

WSL (Ubuntu16.04.4 LTS) 上の Python から、Selenium を利用して Windows側のウェブブラウザを操作する

WSL (Windows Subsystem for Linux) の環境 (Ubuntu 16.04.4 LTS) にインストールされている Python を使い、Windows 側のウェブブラウザ …

Python

定期的にツイートするbotをPythonで作る方法

Twitterでツイートを行う botプログラムを Python(プログラミング言語)で作ります。 このプログラムは、CentOS(Linuxの一種です)上で定期実行します。 スポンサードリンク 目次 …

no image

ウェブプログラミングの知識があるとできること(その1)

先日、あるブログを見ていたら最新の記事だけが表示されない仕組みになっていました。 ウェブプログラミングの知識があるとこんなことができますという例として、その仕組を調べた時の過程を紹介します。 目次きっ …

Redux

Redux の非同期処理サンプルページを作りました

Redux で非同期処理を行うサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 動作4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. …