JavaScript+html5でオリジナルスロットを作る

概要

Javascript+html5でスロットを作りました。

最新のGoogle Choromeで動作を確認しています。
(一部スマホでも動きはします)
※効果音や曲が流れます、音量に注意

Debiru Slot

更新履歴

2020-07-24 早くボタンを押すとリーチしても演出が表示されない不具合を修正、サウンドの音量を小さくした、点数計算機能追加

参考サイト

【サンプルコード】JavaScriptでスロットゲームをプログラミング | UTの日常
JavaScriptでスロットゲームをプログラミングしたサンプルコードを紹介します。スロットゲームは、JavaScriptのアニメーション勉強に最適でした。ぜひご覧ください。
Audio オブジェクトを利用してサウンドを再生する - JavaScript プログラミング
【html 5】video タグを用いて背景全面に動画を再生する方法
最近のウェブデザインのトレンドで背景全面に大胆に動画を配置するケースがよく見られるようになってきました。つい先日もjQueryを使ってYouTubeの動画を背景として使うプラグイン[jQuery Tubular]を紹介し...

改造方法

スロットの回転部分は参考サイトのものを使用しました。
作ったのは、BGM再生、動画再生、リーチ演出、当たり演出だけです。

動画や曲を入れ替えたりパラメーターを調整すればオリジナルスロットが作れるので試してみてください。

zipファイルはこちらからダウンロードできます。
※素材を同梱していますが、利用方法などは各サイトの利用規約に従ってください。

フォルダは下記のような構成になっています。

slot.html
script.js
style.css
movie
img
sound

slot.html

スロットの本体ファイルです。
zipをファイルを解凍後にslot.htmlをクリックするとスロットで遊べます。

こちらはタイトルタグとh1タグの内容は変更した方がよいでしょう。

    <title>Debiru Slot</title>
<h1 class="play-board bg-dark">Debiru Slot Ver.0.666</h1>

script.js

javascriptのオブジェクトにファイル名が書いてあるのですが、それを読み込んでなんの音声や画像を表示するのか切り替えています。

下記でデフォルトの演出を設定しています。
このファイル名と同じファイルを各フォルダにおけばそちらが再生されるので、無理に変更しないほうがよいでしょう。

    /*
    デフォルト演出指定
     */
    const LIST_DEFAULT = {
        "initSrc":"bg_init.mp4",/* ページを開いた直後の背景動画 */
        "reelSrc":"se_reel.wav",/* ドラムが回転するときの音 */
        "default":{
            "bg":"bg_default.mp4",/* ドラム回転時の背景動画 */
            "bgm":"bgm_default.mp3",/* ドラム回転時のBGM */
        },
        "lastOne":{
            "movie":"last1.mp4",/* リーチ時(2個絵柄が揃ったとき)に一瞬出てくるパネルで再生される動画 */
        },
        "complete":{
            "movie":"comp1.mp4",/* 当たり時(3個絵柄が揃ったとき)に一瞬出てくるパネルで再生される動画 */
        },
    };

リーチの時に背景で再生される動画です。
LIST_HIT内のオブジェクトを増やすことで追加できます。

    /*
     * 当たりバックグラウンドムービーリスト、movieフォルダの中のファイル名をソースに入れる
     */
    const LIST_HIT = [
        {
            "title": "ダイヤモンドは永遠の輝き",/* 当たり時に出てくるパネルに表示されるテキスト */
            "src": "hit1.mp4",/* 再生される動画、必須です */
            "muted": true,/* BGMをミュートにするかどうか */
            "bgm":"bgm_hit1.mp3",/* 再生するBGM、""にしておくとBGMなしにできます */
        },
        {
            "title": "さあ、ニューヨークへ行こう",
            "src": "hit2.mp4",
            "muted": true,
            "bgm":"bgm_hit2.mp3",
        }
    ];

style.css

当たりの時にでてくる当たり枠は「complate」
はずれ演出のクラスは「last-one」
はずれ演出のクラスは「lost」
になっています。枠の色を変更したい場合などに参考にしてください。

img

スロット画像を入れるフォルダです。
当たり外れは画像内容ではなく、ファイル名を見て判定しているので注意してください。
slot1.png
slot2.png
slot3.png
slot4.png
slot5.png
slot6.png

movie

動画を入れるフォルダです
「hit.mp4」系はリーチの時に背景で再生される動画です。
hit1.mp4
hit2.mp4

bg_init.mp4 ページを開いた直後にでてくる背景動画です
last1.mp4 リーチ時(2個絵柄が揃ったとき)に一瞬出てくるパネルで再生される動画です。
comp1.mp4 当たり時(3個絵柄が揃ったとき)に一瞬出てくるパネルで再生される動画です。

sound

se_reel.wav ドラムが回転するときの音
bg_default.mp4 ドラム回転時の背景動画
bgm_default.mp3 ドラム回転時のBGM

通常スロットだとなかなか当たらない場合

「slot.html」のスロット部分を下記に変更すると2種類だけ表示されるようになるのでかなり当たりやすくなるはずです…。

<div class="slot">
    <div class="slot-frame">
        <ul class="reels">
            <li class="reel"><img src="./img/slot1.png"></li>
            <li class="reel"><img src="./img/slot1.png"></li>
            <li class="reel"><img src="./img/slot1.png"></li>
            <li class="reel"><img src="./img/slot1.png"></li>
            <li class="reel"><img src="./img/slot2.png"></li>
            <li class="reel"><img src="./img/slot2.png"></li>
            <li class="reel"><img src="./img/slot2.png"></li>
            <li class="reel"><img src="./img/slot2.png"></li>
        </ul>
        <ul class="reels">
            <li class="reel"><img src="./img/slot1.png"></li>
            <li class="reel"><img src="./img/slot1.png"></li>
            <li class="reel"><img src="./img/slot1.png"></li>
            <li class="reel"><img src="./img/slot1.png"></li>
            <li class="reel"><img src="./img/slot2.png"></li>
            <li class="reel"><img src="./img/slot2.png"></li>
            <li class="reel"><img src="./img/slot2.png"></li>
            <li class="reel"><img src="./img/slot2.png"></li>
        </ul>
        <ul class="reels">
            <li class="reel"><img src="./img/slot1.png"></li>
            <li class="reel"><img src="./img/slot1.png"></li>
            <li class="reel"><img src="./img/slot1.png"></li>
            <li class="reel"><img src="./img/slot1.png"></li>
            <li class="reel"><img src="./img/slot2.png"></li>
            <li class="reel"><img src="./img/slot2.png"></li>
            <li class="reel"><img src="./img/slot2.png"></li>
            <li class="reel"><img src="./img/slot2.png"></li>
        </ul>
    </div>
</div>

おわり。