質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.35%

【再質問】jqueryのスロットゲームのリールをぴったり止めたい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,663

nosonosolife

score 30

現在、jqueryでスロットゲームを製作しています。
今のところリールを動かしてストップボタンで停止する部分は出来たのですが、停止した際にリールの絵柄がピタッと中心に止まるようにするにはどうすればいいでしょうか。
また、下記のコードの中で直しておいたほうがいい部分があればできる限りご教授いただきたいと思っております。よろしくお願いいたします。

$(function() {
    //配列
    var iconArray = [[4, 5, 1, 3, 4, 6, 1, 3, 2, 6, 4, 3, 5, 6, 2, 5, 6, 4, 3, 0, 6], [6, 4, 1, 3, 6, 5, 4, 5, 6, 4, 2, 3, 6, 0, 4, 3, 6, 1, 4, 2, 5], [5, 3, 1, 4, 6, 3, 4, 0, 6, 3, 5, 6, 2, 3, 4, 6, 5, 0, 3, 4, 6]];
    var reelArray = new Array();
    var reelNum = 3;
    var iconNum = 21;
    var iconWidth = 120;
    var iconHeight = 60;
    var reelMargin = 5;
    var reelBaseX = 18;
    var reelBaseY = 92;
    var result = 1000;
    var stopNum;
    var slipNum;
    var stopposY = [0, 0, 0]

    var reelStopFlg = [null, null, null];

    var reelposY = [0, 0, 0];
    var reelmoveAnime;
    var reelHeight = (iconHeight*iconNum); //リールの高さ

    //FPS
    var fps = 60;
    var interval = 1/fps*1000;

    addSlots();
    setNum(result);

    //BGM
    SlotBGM.play();

    $('#startbtn').click(function() {
        $(this).css("pointer-events", "none");
        slotstart();
    });

    $('[id^=stopbtn]').each(function(i){
        $(this).click(function() {
            $(this).css("pointer-events", "none");
            slotStop(i);
        });
    });

    function slotstart(){
        reelStopFlg = [false, false, false];
        reelslip = [0, 0, 0];
        reelStopNum = 0;
        var startSpeedcnt = 10;
        reelmoveAnime = setInterval(slotMove, interval);
        $('[id^=stopbtn]').css("pointer-events", "auto");
    }

    function slotStop(i){
        stopNum = getRndNum(1, iconNum);
        slipNum = getRndNum(1, 4);
        stopposY[i] = -Math.floor(iconHeight * stopNum);
        reelStopFlg[i] = true;
        SeStopBtn.play();
    }

    //リール作成
    function addSlots() {
        reelStopFlg[i] = false;
        for (var i = 0; i < reelNum; i++) {
            $('.reel').eq(i).css("left", ((iconWidth + reelMargin) * i)+"px");
            $('.wrapper').eq(i).css("height", reelHeight+"px");
            for (var j = 0; j < 24; j++) {
                if(j < 21){
                    $('.wrapper').eq(i).append("<li class='icon icon" + iconArray[i][j] + "'>" + iconArray[i][j] + "</li>");
                }else{
                    $('.wrapper').eq(i).append("<li class='icon icon" + iconArray[i][j - 21] + "'>" + iconArray[i][j - 21] + "</li>");
                }
            }
        }
    }

    //リール回転
    function slotMove(){
        for (var i = 0, stopCount = 0; i < reelNum; i++) {
            if (!reelStopFlg[i] || reelposY[i]%iconHeight) {
                reelposY[i] += Math.floor(iconHeight/3);
                if (reelposY[i] > 0) reelposY[i] -= reelHeight;
                $('.wrapper').eq(i).css("top", reelposY[i]+"px");
            }else{
                stopCount++;
            }
            if(stopCount == reelNum){
                $('#startbtn').css("pointer-events", "auto");
                clearInterval(reelmoveAnime);
            }
        }
    }
});
<div id="slotmachinebox">
            <div id="reelbox">
                <div class="reel reel0">
                    <ul class="wrapper">
                    </ul>
                </div>
                <div class="reel reel1">
                    <ul class="wrapper">
                    </ul>
                </div>
                <div class="reel reel2">
                    <ul class="wrapper">
                    </ul>
                </div>
            </div>
            <div id="controllerbox">
                <div id="startbtn">
                </div>
                <div id="stopbtn" class="btn1">
                </div>
                <div id="stopbtn" class="btn2">
                </div>
                <div id="stopbtn" class="btn3">
                </div>
            </div>
        </div>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • unau

    2016/05/01 09:59

    html も提示していただくのは難しいでしょうか。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る