###前提・実現したいこと
jqueryやjsを使ってweb上で動くスロットアプリを開発しようとしていてリールを回して
枠内にきれいに滑らせて止めることまでは何とかできたのですが
役の判定の考え方がわからずに困っていました。。
縦長のリール画像(153x1302)の中にコマが20個あってこのコマ1つ1つを認識する術が思いつきません
またここまで作ってきてもしここはこうしたほうが・・などお気づきの点がございましたら是非ご教授していただけたらと思います。
分かりづらい説明で申し訳ないのですがよろしくお願いいたします。
###該当のソースコード
jquery
1$(function(){ 2 // ループ処理をするためのグローバル変数を宣言 3 var startLeft; 4 var startCenter; 5 var startRight; 6 // 画像の初期位置Y軸(px) 7 var leftPosY = 340; 8 var centPosY = 520; 9 var rightPosY = 340; 10 // 1コマのpx数 11 var coma = 65; 12 // フラグの宣言 13 var startFlag = 0; 14 var leftCheckFlag = 0; 15 var centerCheckFlag = 0; 16 var rightCheckFlag = 0; 17 18 $('html').keydown(function(e){ 19 if(e.keyCode === 83) { 20 // アニメーションスピード(px/ミリ秒) 21 if (startFlag == 0) { 22 startFlag = 1; 23 leftCheckFlag = 0; 24 centerCheckFlag = 0; 25 rightCheckFlag = 0; 26 var scrollSpeed = 5; 27 // 画像サイズY軸(px) 28 var imgHeight = 1302; 29 // 画像の初期位置Y軸(px) 30 var leftPosY = parseInt($('#reelLeft').css('background-position-y')); 31 var centPosY = parseInt($('#reelCenter').css('background-position-y')); 32 var rightPosY = parseInt($('#reelRight').css('background-position-y')); 33 // ループ処理 34 startLeft = setInterval(function() { 35 // 画像サイズまで移動したら0に戻る 36 if (leftPosY >= imgHeight) leftPosY = 0; 37 //scrollSpeed分移動 38 leftPosY += scrollSpeed; 39 $('#reelLeft').css("background-position","0 "+leftPosY+"px"); 40 }, 1); 41 startCenter = setInterval(function() { 42 if (centPosY >= imgHeight) centPosY = 0; 43 centPosY += scrollSpeed; 44 $('#reelCenter').css("background-position","0 "+centPosY+"px"); 45 }, 1); 46 startRight = setInterval(function() { 47 if (rightPosY >= imgHeight) rightPosY = 0; 48 rightPosY += scrollSpeed; 49 $('#reelRight').css("background-position","0 "+rightPosY+"px"); 50 }, 1); 51 } 52 } 53 }); 54//ストップボタン 55 $('html').keydown(function(e) { 56 switch(e.keyCode){ 57//左リール 58 case 66: 59 if(startFlag ===1){ 60 clearInterval(startLeft); 61 var currentLeftPosY = parseInt($('#reelLeft').css('background-position-y')); 62 var adjastLeft = currentLeftPosY % coma 63 if (adjastLeft < 16 ) { 64 var adjastPxLeft = coma - adjastLeft - 47 + currentLeftPosY; 65 } else { 66 var adjastPxLeft = coma - adjastLeft + 15 + currentLeftPosY; 67 } 68 $('#reelLeft').animate({backgroundPositionY:adjastPxLeft+"px"},40,'linear'); 69 leftCheckFlag = 1; 70 if (centerCheckFlag == 1 && rightCheckFlag == 1) startFlag = 0; 71 break; 72 } 73//中リール 74 case 78: 75 if(startFlag ===1){ 76 clearInterval(startCenter); 77 var currentCenterPosY = parseInt($('#reelCenter').css('background-position-y')); 78 var adjastCenter = currentCenterPosY % coma 79 if (adjastCenter < 16 ) { 80 var adjastPxCenter = coma - adjastCenter - 47 + currentCenterPosY; 81 } else { 82 var adjastPxCenter = coma - adjastCenter + 15 + currentCenterPosY; 83 } 84 $('#reelCenter').animate({backgroundPositionY:adjastPxCenter+"px"},40,'linear'); 85 centerCheckFlag = 1; 86 if (leftCheckFlag == 1 && rightCheckFlag == 1) startFlag = 0; 87 break; 88 } 89//右リール 90 case 77: 91 if(startFlag ===1){ 92 clearInterval(startRight); 93 var currentRightPosY = parseInt($('#reelRight').css('background-position-y')); 94 var adjastRight = currentRightPosY % coma 95 if (adjastRight < 16 ) { 96 var adjastPxRight = coma - adjastRight - 47 + currentRightPosY; 97 } else { 98 var adjastPxRight = coma - adjastRight + 15 + currentRightPosY; 99 } 100 $('#reelRight').animate({backgroundPositionY:adjastPxRight+"px"},40,'linear'); 101 rightCheckFlag = 1; 102 if (leftCheckFlag == 1 && centerCheckFlag == 1) startFlag = 0; 103 break; 104 } 105 } 106 }); 107}); 108
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 6 <script src="reelController.js"></script> 7 <script src="main.js"></script> 8 9 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 10 <link rel="stylesheet" href="style.css" type="text/css"> 11 </head> 12 <body> 13 14 <div class="content"> 15 <div class="slots" id="reelLeft"> 16 <div class="wrapper"></div> 17 </div> 18 19 <div class="slots" id="reelCenter"> 20 <div class="wrapper"></div> 21 </div> 22 23 <div class="slots" id="reelRight"> 24 <div class="wrapper"></div> 25 </div> 26 27 </div> 28 </body> 29</html> 30
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/04 00:17
2017/07/05 15:13
2017/07/06 22:50
2017/07/07 10:27
2017/07/07 23:47
2017/07/08 05:42
2017/07/08 05:59
2017/07/08 06:19