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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2443閲覧

jqueryで作るスロットアプリの開発について

June666

総合スコア290

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/07/03 22:07

編集2017/07/03 22:09

###前提・実現したいこと
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

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

前提:
ユーザ操作とエフェクトと内部状態の処理は切り分ける。
内部状態をアニメーションに紐づけるイメージをもつとGood。
イメージ
イベント > 状態変化 > エフェクト
若干具体的
ユーザ操作>内部状態変化>内部状態に紐づいたアニメーションを実行
具体的
レバオン > 役抽選 > リールアニメーション・エフェクトアニメーション

基本的な考え:現行 A Typeっぽい状態(レバオンで役抽選)
停止位置を0とする。
・1コマ当たりの画像高さを定義

・画像にあるコマ数(N)分の配列定義と各リールに画像に応じた役を配列内に定義[リプ、ベル、リプ、チェリー・・・]など(数値などの方がよい)
>リプ:0 ベル:1 チェリー:2 スイカ:3 Bar:5 Seven:7

・レバオンされた時点で、役抽選し役に応じたエフェクトを行う場合は何のエフェクトか抽選
>なお、内部状態がある場合はここで役、回転数に応じた状態変更(転落・昇格など)の抽選

・1コマが1コマ分進むタイミングで、各リールの停止位置をインクリメント
(逆回転するならデクリメントと逆負方向アニメーション)

・最終コマに来たら、各リールの停止位置とアニメーションを初期位置でリセット

・ボタンPushで対応するリールの停止位置を確定
☆揃え方☆
>通常役(目押し不要役)の場合:リプレイ
押された時点での、リールごとにMコマ内(配列で言う3要素分走査)で一番近いリプレイ役までリールアニメーションを続けるように設定。レバオンでリプレイが成立し、各リールごとのボタンPushのタイミングで2コマ後にリプレイがあった場合は、2コマ分アニメーションを続ける(滑らせる)
>レア役(目押し必須役)の場合:スイカ
3コマまでフォローするなら、リールごとのボタンPushで停止位置から3要素分走査しスイカが存在すれば、存在した位置までアニメーション。無ければその時点で止める。
>確定役(目押し必須役)の場合:ボーナス
スイカといっしょ。

投稿2017/07/03 23:28

kanimaru

総合スコア1013

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

June666

2017/07/04 00:17

迅速で詳しい回答ありがとうございます! 早速仕事が終わり次第やってみたいと思います。 まだまだ未熟なのでまた質問させていただくかと思いますがそのときはよろしくお願いいたします。
June666

2017/07/05 15:13

度々質問なのですが ”・画像にあるコマ数(N)分の配列定義と各リールに画像に応じた役を配列内に定義[リプ、ベル、リプ、チェリー・・・]など(数値などの方がよい)” と伺っていましたが、今回コマの数が20(一コマ65px)のものを使っていて教えていただいたようにリールに応じた図柄を配列で定義したのですがこちらの配列の使い方?がいまいちピンと来ないのです。。 3要素分走査して近いリプレイを探すというのも頭では理解しているのですがコードに起こせません・・ 分かりづらくて申し訳ないのですがご回答を頂けたらと思います。 よろしくお願い致します。
kanimaru

2017/07/06 22:50

明日の朝くらいまでにサンプルコード作ります。
June666

2017/07/07 10:27

ありがとうございます!本当に助かります!
kanimaru

2017/07/07 23:47

Jun1214さん サンプル作成で1つ懸念です。javascriptのクラスの概念などはご存知でしょうか。
June666

2017/07/08 05:42

関数は理解はしているのですが、普段PHPを触っていておおまかにはクラスのほうも理解はしているのですがJsのほうでクラスというのを使ったことがなかったため微妙ですね。。 考え方などは同じような感じなのでしょうか?
June666

2017/07/08 06:19

本当に助かります、ありがとうございます!参考に指せて頂きます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問