teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問【再質問】jqueryのスロットゲームのリールをぴったり止めたい

編集履歴

質問編集履歴

2

ソースコードを変更

2016/05/04 19:53

投稿

nosonosolife
nosonosolife

スコア42

test CHANGED
File without changes
test CHANGED
@@ -8,38 +8,44 @@
8
8
 
9
9
  $(function() {
10
10
 
11
+ //配列
12
+
13
+ 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]];
14
+
15
+ var reelArray = new Array();
16
+
17
+ var reelNum = 3;
18
+
19
+ var iconNum = 21;
20
+
21
+ var iconWidth = 120;
22
+
23
+ var iconHeight = 60;
24
+
25
+ var reelMargin = 5;
26
+
27
+ var reelBaseX = 18;
28
+
29
+ var reelBaseY = 92;
30
+
31
+ var result = 1000;
32
+
33
+ var stopNum;
34
+
35
+ var slipNum;
36
+
37
+ var stopposY = [0, 0, 0]
38
+
39
+
40
+
41
+ var reelStopFlg = [null, null, null];
42
+
43
+
44
+
45
+ var reelposY = [0, 0, 0];
46
+
11
47
  var reelmoveAnime;
12
48
 
13
- //配列
14
-
15
- 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]];
16
-
17
- var reelArray = new Array();
18
-
19
- var reelNum = 3;
20
-
21
- var iconNum = 21;
22
-
23
- var iconWidth = 120;
24
-
25
- var iconHeight = 60;
26
-
27
- var reelMargin = 10;
28
-
29
-
30
-
31
- var reelStopArray = [null, null, null];
32
-
33
- var reelStopNum = 0;
34
-
35
-
36
-
37
- var reelposY = [0, 0, 0];
38
-
39
- var reelstartAnime;
40
-
41
- var reelmoveAnime;
42
-
43
49
  var reelHeight = (iconHeight*iconNum); //リールの高さ
44
50
 
45
51
 
@@ -54,7 +60,15 @@
54
60
 
55
61
  addSlots();
56
62
 
57
-
63
+ setNum(result);
64
+
65
+
66
+
67
+ //BGM
68
+
69
+ SlotBGM.play();
70
+
71
+
58
72
 
59
73
  $('#startbtn').click(function() {
60
74
 
@@ -82,130 +96,100 @@
82
96
 
83
97
  function slotstart(){
84
98
 
85
- reelStopArray = [false, false, false];
99
+ reelStopFlg = [false, false, false];
100
+
101
+ reelslip = [0, 0, 0];
86
102
 
87
103
  reelStopNum = 0;
88
104
 
89
- var startSpeedcnt = 0;
105
+ var startSpeedcnt = 10;
90
-
106
+
91
- reelstartAnime = setInterval(function(){
107
+ reelmoveAnime = setInterval(slotMove, interval);
108
+
92
-
109
+ $('[id^=stopbtn]').css("pointer-events", "auto");
110
+
111
+ }
112
+
113
+
114
+
115
+ function slotStop(i){
116
+
117
+ stopNum = getRndNum(1, iconNum);
118
+
93
- if(startSpeedcnt <= 60){
119
+ slipNum = getRndNum(1, 4);
120
+
94
-
121
+ stopposY[i] = -Math.floor(iconHeight * stopNum);
122
+
123
+ reelStopFlg[i] = true;
124
+
95
- startSpeedcnt++;
125
+ SeStopBtn.play();
126
+
96
-
127
+ }
128
+
129
+
130
+
131
+ //リール作成
132
+
133
+ function addSlots() {
134
+
135
+ reelStopFlg[i] = false;
136
+
97
- for (var i = 0; i < reelNum; i++) {
137
+ for (var i = 0; i < reelNum; i++) {
98
-
138
+
99
- reelposY[i] += Math.floor(iconHeight/reelHeight * startSpeedcnt);
139
+ $('.reel').eq(i).css("left", ((iconWidth + reelMargin) * i)+"px");
100
-
140
+
101
- $('.wrapper').eq(i).css("top", reelposY[i]+"px");
141
+ $('.wrapper').eq(i).css("height", reelHeight+"px");
102
-
103
- slip[i] -= Math.floor(iconHeight/reelHeight * 60);
142
+
104
-
105
- if (reelposY[i] >= 0) reelposY[i] = -reelHeight;
143
+ for (var j = 0; j < 24; j++) {
144
+
145
+ if(j < 21){
146
+
147
+ $('.wrapper').eq(i).append("<li class='icon icon" + iconArray[i][j] + "'>" + iconArray[i][j] + "</li>");
148
+
149
+ }else{
150
+
151
+ $('.wrapper').eq(i).append("<li class='icon icon" + iconArray[i][j - 21] + "'>" + iconArray[i][j - 21] + "</li>");
106
152
 
107
153
  }
108
154
 
155
+ }
156
+
157
+ }
158
+
159
+ }
160
+
161
+
162
+
163
+ //リール回転
164
+
165
+ function slotMove(){
166
+
167
+ for (var i = 0, stopCount = 0; i < reelNum; i++) {
168
+
169
+ if (!reelStopFlg[i] || reelposY[i]%iconHeight) {
170
+
171
+ reelposY[i] += Math.floor(iconHeight/3);
172
+
173
+ if (reelposY[i] > 0) reelposY[i] -= reelHeight;
174
+
175
+ $('.wrapper').eq(i).css("top", reelposY[i]+"px");
176
+
109
177
  }else{
110
178
 
111
- clearInterval(reelstartAnime);
179
+ stopCount++;
112
-
113
- reelmoveAnime = setInterval(slotMove, interval);
114
-
115
- $('[id^=stopbtn]').css("pointer-events", "auto");
116
180
 
117
181
  }
118
182
 
183
+ if(stopCount == reelNum){
184
+
185
+ $('#startbtn').css("pointer-events", "auto");
186
+
119
- },interval);
187
+ clearInterval(reelmoveAnime);
120
-
188
+
121
- }
189
+ }
122
-
123
-
124
-
125
- function slotStop(i){
126
-
127
- if(reelStopNum <= reelNum){
128
-
129
- reelStopNum++;
130
-
131
- reelStopArray[i] = true;
132
190
 
133
191
  }
134
192
 
135
- if(reelStopArray[reelNum-1]) {
136
-
137
- $('#startbtn').css("pointer-events", "auto");
138
-
139
- clearInterval(reelmoveAnime);
140
-
141
- }
142
-
143
- SeStopBtn.play();
144
-
145
- }
146
-
147
-
148
-
149
- //リール作成
150
-
151
- function addSlots() {
152
-
153
- reelStopArray[i] = false;
154
-
155
- for (var i = 0; i < reelNum; i++) {
156
-
157
- $('.reel').eq(i).css("left", ((iconWidth + reelMargin) * i)+"px");
158
-
159
- $('.wrapper').eq(i).css("height", reelHeight+"px");
160
-
161
- for (var j = 0; j < 24; j++) {
162
-
163
- if(j < 21){
164
-
165
- $('.wrapper').eq(i).append("<li class='icon icon" + iconArray[i][j] + "'>" + iconArray[i][j] + "</li>");
166
-
167
- }else{
168
-
169
- $('.wrapper').eq(i).append("<li class='icon icon" + iconArray[i][j - 21] + "'>" + iconArray[i][j - 21] + "</li>");
170
-
171
- }
172
-
173
- }
174
-
175
- }
176
-
177
- }
178
-
179
-
180
-
181
- //リール回転
182
-
183
- function slotMove(){
184
-
185
- for (var i = 0; i < reelNum; i++) {
186
-
187
- if (!reelStopArray[i]) {
188
-
189
- reelposY[i] += Math.floor(iconHeight/reelHeight * 60);
190
-
191
- $('.wrapper').eq(i).css("top", reelposY[i]+"px");
192
-
193
- slip[i] -= Math.floor(iconHeight/reelHeight * 60);
194
-
195
- if (reelposY[i] >= 0) reelposY[i] = -reelHeight;
196
-
197
- }else{
198
-
199
- //while((reelposY[i]%iconHeight+slip[i])%iconHeight!=iconHeight/2) {
200
-
201
- // slip[i] += Math.floor(iconHeight/reelHeight * 60);
202
-
203
- //}
204
-
205
- }
206
-
207
- }
208
-
209
193
  }
210
194
 
211
195
  });

1

HTMLを追加

2016/05/04 19:52

投稿

nosonosolife
nosonosolife

スコア42

test CHANGED
File without changes
test CHANGED
@@ -10,8 +10,6 @@
10
10
 
11
11
  var reelmoveAnime;
12
12
 
13
- var rundresultAnime
14
-
15
13
  //配列
16
14
 
17
15
  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]];
@@ -56,13 +54,7 @@
56
54
 
57
55
  addSlots();
58
56
 
59
-
60
-
61
- //BGM
57
+
62
-
63
- SlotBGM.play();
64
-
65
-
66
58
 
67
59
  $('#startbtn').click(function() {
68
60
 
@@ -219,3 +211,59 @@
219
211
  });
220
212
 
221
213
  ```
214
+
215
+ ```html
216
+
217
+ <div id="slotmachinebox">
218
+
219
+ <div id="reelbox">
220
+
221
+ <div class="reel reel0">
222
+
223
+ <ul class="wrapper">
224
+
225
+ </ul>
226
+
227
+ </div>
228
+
229
+ <div class="reel reel1">
230
+
231
+ <ul class="wrapper">
232
+
233
+ </ul>
234
+
235
+ </div>
236
+
237
+ <div class="reel reel2">
238
+
239
+ <ul class="wrapper">
240
+
241
+ </ul>
242
+
243
+ </div>
244
+
245
+ </div>
246
+
247
+ <div id="controllerbox">
248
+
249
+ <div id="startbtn">
250
+
251
+ </div>
252
+
253
+ <div id="stopbtn" class="btn1">
254
+
255
+ </div>
256
+
257
+ <div id="stopbtn" class="btn2">
258
+
259
+ </div>
260
+
261
+ <div id="stopbtn" class="btn3">
262
+
263
+ </div>
264
+
265
+ </div>
266
+
267
+ </div>
268
+
269
+ ```