質問編集履歴

3

書式の追加

2019/04/01 03:16

投稿

NULE
NULE

スコア12

test CHANGED
File without changes
test CHANGED
@@ -20,9 +20,19 @@
20
20
 
21
21
  【実現したいこと】
22
22
 
23
- 確率に応じて下りに絵柄が揃う(3つのパーツが合わさったときに1つの絵になる)ようにしたいです。(30%の確率で絵柄A、10%=絵柄B、6%=絵柄C、3%=絵柄D、1%=絵柄E)
23
+ 確率に応じて下のとおりに絵柄が揃う(3つのパーツが合わさったときに1つの絵になる)ようにしたいです。
24
+
24
-
25
+ (30%の確率で絵柄A、10%=B、6%=C、3%=D、1%=E)
26
+
27
+
28
+
25
- リーチのときとそうでないときで、最後のリールが止まる時間を調整したいです。
29
+ リーチのときとそうでないときで、最後のリールが止まる時間を調整したいです。
30
+
31
+
32
+
33
+ 【追記・・・2019/4/1】
34
+
35
+ ★ jQueryの改訂したコードで動くのですが、「回転するスピード」と「最後のリールが止まる時間」を変更しても変化しません。エラーは出ません。
26
36
 
27
37
 
28
38
 
@@ -336,7 +346,7 @@
336
346
 
337
347
  ```jQuery
338
348
 
339
- ***改正版(2019//30)***
349
+ ***改正版(2019/4/ 1)***
340
350
 
341
351
 
342
352
 
@@ -352,368 +362,376 @@
352
362
 
353
363
  //メッセージを点滅させる処理
354
364
 
355
- setInterval(function(){
365
+ setInterval(function(){
356
-
366
+
357
- $("#msg").fadeOut(1000,function(){
367
+ $("#msg").fadeOut(1000,function(){
358
-
368
+
359
- $(this).fadeIn(800)
369
+ $(this).fadeIn(800)
360
-
370
+
361
- });5000;
371
+ });5000;
372
+
373
+ });
374
+
375
+ var Reel=document.getElementById("#reel");
376
+
377
+ //画像の配列
378
+
379
+ var img=["img/0.pmg", "img/3.pmg", "img/6.pmg", "img/9.pmg", "img/12.pmg",
380
+
381
+ "img/1.pmg", "img/4.pmg", "img/7.pmg", "img/10.pmg", "img/13.pmg",
382
+
383
+ "img/2.pmg", "img/5.pmg", "img/8.pmg", "img/11.pmg", "img/14.pmg"];
384
+
385
+
386
+
387
+ //当たりとなる変数
388
+
389
+ var set1=img[0, 1, 2];
390
+
391
+ var set2=img[3, 4, 5];
392
+
393
+ var set3=img[6, 7, 8];
394
+
395
+ var set4=img[9, 10, 11];
396
+
397
+ var set5=img[12, 13, 14];
398
+
399
+
400
+
401
+ //リーチのときの変数(3番目のリールが止まる時間を延ばすため)
402
+
403
+ var closeset=img[
404
+
405
+ [0, 1, 5], [0, 1, 8], [0, 1, 11], [0, 1, 14],
406
+
407
+ [3, 4, 2], [3, 4, 8], [3, 4, 11], [3, 4, 14],
408
+
409
+ [6, 7, 2], [6, 7, 5], [6, 7, 11], [6, 7, 14],
410
+
411
+ [9, 10, 2], [9, 10, 5], [9, 10, 8], [9, 10, 14],
412
+
413
+ [12, 13, 2], [12, 13, 5], [12, 13, 8], [12, 13, 11]
414
+
415
+ ];
416
+
417
+ //ハズレの変数(3番目のリールが止まる時間を早くするため)
418
+
419
+ var noset=img[
420
+
421
+ [0, 4, 2], [0, 4, 5], [0, 4, 8], [0, 4, 11], [0, 4, 14],
422
+
423
+ [0, 7, 2], [0, 7, 5], [0, 7, 8], [0, 7, 11], [0, 7, 14],
424
+
425
+ [0, 10, 2], [0, 10, 5], [0, 10, 8], [0, 10, 11], [0, 10, 14],
426
+
427
+ [0, 13, 2], [0, 13, 5], [0, 13, 8], [0, 13, 11], [0, 13, 14],
428
+
429
+ [3, 1, 2], [3, 1, 5], [3, 1, 8], [3, 1, 11], [3, 1, 14],
430
+
431
+ [3, 7, 2], [3, 7, 5], [3, 7, 8], [3, 7, 11], [3, 7, 14],
432
+
433
+ [3, 10, 2], [3, 10, 5], [3, 10, 8], [3, 10, 11], [3, 10, 14],
434
+
435
+ [3, 13, 2], [3, 13, 5], [3, 13, 8], [3, 13, 11], [3, 13, 14],
436
+
437
+ [6, 1, 2], [6, 1, 5], [6, 1, 8], [6, 1, 11], [6, 1, 14],
438
+
439
+ [6, 4, 2], [6, 4, 5], [6, 4, 8], [6, 4, 11], [6, 4, 14],
440
+
441
+ [6, 10, 2], [6, 10, 5], [6, 10, 8], [6, 10, 11], [6, 10, 14],
442
+
443
+ [6, 13, 2], [6, 13, 5], [6, 13, 8], [6, 13, 11], [6, 13, 14],
444
+
445
+ [9, 1, 2], [9, 1, 5], [9, 1, 8], [9, 1, 11], [9, 1, 14],
446
+
447
+ [9, 4, 2], [9, 4, 5], [9, 4, 8], [9, 4, 11], [9, 4, 14],
448
+
449
+ [9, 7, 2], [9, 7, 5], [9, 7, 8], [9, 7, 11], [9, 7, 14],
450
+
451
+ [9, 13, 2], [9, 13, 5], [9, 13, 8], [9, 13, 11], [9, 13, 14],
452
+
453
+ [12, 1, 2], [12, 1, 5], [12, 1, 8], [12, 1, 11], [12, 1, 14],
454
+
455
+ [12, 4, 2], [12, 4, 5], [12, 4, 8], [12, 4, 11], [12, 4, 14],
456
+
457
+ [12, 7, 2], [12, 7, 5], [12, 7, 8], [12, 7, 11], [12, 7, 14],
458
+
459
+ [12, 10, 2], [12, 10, 5], [12, 10, 8], [12, 10, 11], [12, 10, 14]
460
+
461
+ ];
462
+
463
+ //出現確率
464
+
465
+ var chance=Math.floor(Math.random()*(set1+set2+set3+set4+set5
466
+
467
+ +closeset+noset).length);
468
+
469
+ if(chance===0){
470
+
471
+ $("#reel").attr('src', set5);
472
+
473
+ }else if(chance>=1&&chance<=2) {
474
+
475
+ $("#reel").attr('src', set4);
476
+
477
+ }else if(chance>=3&&chance<=8) {
478
+
479
+ $("#reel").attr('src', set3);
480
+
481
+ }else if(chance>=9&&chance<=18) {
482
+
483
+ $("#reel").attr('src', set2);
484
+
485
+ }else if(chance>=19&&chance<=38) {
486
+
487
+ $("#reel").attr('src', set1);
488
+
489
+ }else{
490
+
491
+ $("#reel").attr('src', closeset && noset);
492
+
493
+ }
494
+
495
+
496
+
497
+ //リール3がストップする時の変数
498
+
499
+ var reachimg=img[
500
+
501
+ [0, 1, 2], [3, 4, 5], [6, 7, 8], [9, 10, 11], [12, 13, 14],
502
+
503
+ [0, 1, 5], [0, 1, 8], [0, 1, 11], [0, 1, 14],
504
+
505
+ [3, 4, 2], [3, 4, 8], [3, 4, 11], [3, 4, 14],
506
+
507
+ [6, 7, 2], [6, 7, 5], [6, 7, 11], [6, 7, 14],
508
+
509
+ [9, 10, 2], [9, 10, 5], [9, 10, 8], [9, 10, 14],
510
+
511
+ [12, 13, 2], [12, 13, 5], [12, 13, 8], [12, 13, 11]
512
+
513
+ ];
514
+
515
+
516
+
517
+ var num=0;
518
+
519
+ $("#btn").on("click", function(){
520
+
521
+ $(this).data("click", ++num);
522
+
523
+ var click=$(this).data("click");
524
+
525
+ if(click===1){
526
+
527
+ //スタートボタンを押した時の処理
528
+
529
+ $("#txt").fadeOut(300);
530
+
531
+ $("#btn").width("131.67px") .height('42px');
532
+
533
+ $("#msg").css("color", '#006');
534
+
535
+ $("#btn").prop("disabled", true);
536
+
537
+
538
+
539
+ //リール1の回転処理
540
+
541
+ $("#reel1").slick({
542
+
543
+ autoplay:true,
544
+
545
+ autoplaySpeed:0,
546
+
547
+ slidesToShow:1,
548
+
549
+ initialSlide:0,
550
+
551
+ arrows:false,
552
+
553
+ speed:60,
554
+
555
+ infinite:true,
556
+
557
+ cssEase:"linear",
558
+
559
+ pauseOnFocus:false,
560
+
561
+ pauseOnHover:false,
562
+
563
+ });
564
+
565
+
566
+
567
+ //リール2の回転処理
568
+
569
+ setTimeout(function(){
570
+
571
+ $("#reel2").slick({
572
+
573
+ autoplay:true,
574
+
575
+ autoplaySpeed:0,
576
+
577
+ slidesToShow:1,
578
+
579
+ initialSlide:0,
580
+
581
+ arrows:false,
582
+
583
+ speed:65,
584
+
585
+ infinite:true,
586
+
587
+ cssEase:"linear",
588
+
589
+ pauseOnFocus:false,
590
+
591
+ pauseOnHover:false,
592
+
593
+ });
594
+
595
+ }, 800),
596
+
597
+
598
+
599
+ //リール3の回転処理
600
+
601
+ setTimeout(function(){
602
+
603
+ $("#reel3").slick({
604
+
605
+ autoplay:true,
606
+
607
+ autoplaySpeed:0,
608
+
609
+ slidesToShow:1,
610
+
611
+ initialSlide:0,
612
+
613
+ arrows:false,
614
+
615
+ speed:55,
616
+
617
+ infinite:true,
618
+
619
+ cssEase:"linear",
620
+
621
+ rtl:false,
622
+
623
+ pauseOnFocus:false,
624
+
625
+ pauseOnHover:false,
626
+
627
+ });
628
+
629
+ }, 2000),
630
+
631
+
632
+
633
+ //ボタンの有効化
634
+
635
+ setTimeout(function(){
636
+
637
+ $("#btn").prop("disabled", false);
638
+
639
+ $("#txt").html('STOP');
640
+
641
+ $("#txt").fadeIn(300);
642
+
643
+ $("#msg").html('STOPを押してね!');
644
+
645
+ }, 2300)
646
+
647
+
648
+
649
+
650
+
651
+ }if(click===2){
652
+
653
+ //ストップボタンを押した時の処理
654
+
655
+ $("#txt").html('CLOSE');
656
+
657
+ $("#btn").prop("disabled", true);
658
+
659
+ $("#btn").width("131.67px") .height('42px');
660
+
661
+
662
+
663
+ //リール1の処理
664
+
665
+ $("#reel1").slick("slickPause");
666
+
667
+
668
+
669
+ //リール2の処理
670
+
671
+ setTimeout(function(){
672
+
673
+ $("#reel2").slick("slickPause");
674
+
675
+ }, 1000),
676
+
677
+
678
+
679
+ //リール3の処理
680
+
681
+ //要素に応じて最後のリールが止まる時間をずらす処理
682
+
683
+ $("#reel").each(function(){
684
+
685
+ if(reachimg===0 && reachimg<25){
686
+
687
+ setTimeout(function(){
688
+
689
+ $("#reel3").slick("slickPause");
690
+
691
+ }, 5000);
692
+
693
+ }else{
694
+
695
+ setTimeout(function(){
696
+
697
+ $("#reel3").slick("slickPause");
698
+
699
+ }, 2000);
700
+
701
+ }
702
+
703
+ });
704
+
705
+ //ボタンの有効化
706
+
707
+ setTimeout(function(){
708
+
709
+ $("#btn").prop("disabled", false);
710
+
711
+ $("#msg").html('CLOSEを押してね!');
712
+
713
+ }, 2000)
714
+
715
+
716
+
717
+ }if(click===3){
718
+
719
+ window.close();
720
+
721
+ }
362
722
 
363
723
  });
364
724
 
365
- var Reel=document.getElementById("#reel");
725
+
366
-
367
- //画像の配列
368
-
369
- var img=["img/0.pmg", "img/3.pmg", "img/6.pmg", "img/9.pmg", "img/12.pmg",
370
-
371
- "img/1.pmg", "img/4.pmg", "img/7.pmg", "img/10.pmg", "img/13.pmg",
372
-
373
- "img/2.pmg", "img/5.pmg", "img/8.pmg", "img/11.pmg", "img/14.pmg"];
374
-
375
-
376
-
377
- //当たりとなる変数
378
-
379
- var set1=img[0, 1, 2];
380
-
381
- var set2=img[3, 4, 5];
382
-
383
- var set3=img[6, 7, 8];
384
-
385
- var set4=img[9, 10, 11];
386
-
387
- var set5=img[12, 13, 14];
388
-
389
-
390
-
391
- //リーチのときの変数(3番目のリールが止まる時間を延ばすため)
392
-
393
- var closeset=img[
394
-
395
- [0, 1, 5], [0, 1, 8], [0, 1, 11], [0, 1, 14],
396
-
397
- [3, 4, 2], [3, 4, 8], [3, 4, 11], [3, 4, 14],
398
-
399
- [6, 7, 2], [6, 7, 5], [6, 7, 11], [6, 7, 14],
400
-
401
- [9, 10, 2], [9, 10, 5], [9, 10, 8], [9, 10, 14],
402
-
403
- [12, 13, 2], [12, 13, 5], [12, 13, 8], [12, 13, 11]
404
-
405
- ];
406
-
407
- //ハズレの変数(3番目のリールが止まる時間を早くするため)
408
-
409
- var noset=img[
410
-
411
- [0, 4, 2], [0, 4, 5], [0, 4, 8], [0, 4, 11], [0, 4, 14],
412
-
413
- [0, 7, 2], [0, 7, 5], [0, 7, 8], [0, 7, 11], [0, 7, 14],
414
-
415
- [0, 10, 2], [0, 10, 5], [0, 10, 8], [0, 10, 11], [0, 10, 14],
416
-
417
- [0, 13, 2], [0, 13, 5], [0, 13, 8], [0, 13, 11], [0, 13, 14],
418
-
419
- [3, 1, 2], [3, 1, 5], [3, 1, 8], [3, 1, 11], [3, 1, 14],
420
-
421
- [3, 7, 2], [3, 7, 5], [3, 7, 8], [3, 7, 11], [3, 7, 14],
422
-
423
- [3, 10, 2], [3, 10, 5], [3, 10, 8], [3, 10, 11], [3, 10, 14],
424
-
425
- [3, 13, 2], [3, 13, 5], [3, 13, 8], [3, 13, 11], [3, 13, 14],
426
-
427
- [6, 1, 2], [6, 1, 5], [6, 1, 8], [6, 1, 11], [6, 1, 14],
428
-
429
- [6, 4, 2], [6, 4, 5], [6, 4, 8], [6, 4, 11], [6, 4, 14],
430
-
431
- [6, 10, 2], [6, 10, 5], [6, 10, 8], [6, 10, 11], [6, 10, 14],
432
-
433
- [6, 13, 2], [6, 13, 5], [6, 13, 8], [6, 13, 11], [6, 13, 14],
434
-
435
- [9, 1, 2], [9, 1, 5], [9, 1, 8], [9, 1, 11], [9, 1, 14],
436
-
437
- [9, 4, 2], [9, 4, 5], [9, 4, 8], [9, 4, 11], [9, 4, 14],
438
-
439
- [9, 7, 2], [9, 7, 5], [9, 7, 8], [9, 7, 11], [9, 7, 14],
440
-
441
- [9, 13, 2], [9, 13, 5], [9, 13, 8], [9, 13, 11], [9, 13, 14],
442
-
443
- [12, 1, 2], [12, 1, 5], [12, 1, 8], [12, 1, 11], [12, 1, 14],
444
-
445
- [12, 4, 2], [12, 4, 5], [12, 4, 8], [12, 4, 11], [12, 4, 14],
446
-
447
- [12, 7, 2], [12, 7, 5], [12, 7, 8], [12, 7, 11], [12, 7, 14],
448
-
449
- [12, 10, 2], [12, 10, 5], [12, 10, 8], [12, 10, 11], [12, 10, 14]
450
-
451
- ];
452
-
453
- //出現確率
454
-
455
- var chance=Math.floor(Math.random()*(set1+set2+set3+set4+set5
456
-
457
- +closeset+noset).length);
458
-
459
- if(chance===0){
460
-
461
- $("#reel").attr('src', set5);
462
-
463
- }else if(chance>=1&&chance<=2) {
464
-
465
- $("#reel").attr('src', set4);
466
-
467
- }else if(chance>=3&&chance<=8) {
468
-
469
- $("#reel").attr('src', set3);
470
-
471
- }else if(chance>=9&&chance<=18) {
472
-
473
- $("#reel").attr('src', set2);
474
-
475
- }else if(chance>=19&&chance<=38) {
476
-
477
- $("#reel").attr('src', set1);
478
-
479
- }else{
480
-
481
- $("#reel").attr('src', closeset && noset);
482
-
483
- }
484
-
485
-
486
-
487
- //リール3がストップする時の変数
488
-
489
- var reachimg=img[
490
-
491
- [0, 1, 2], [3, 4, 5], [6, 7, 8], [9, 10, 11], [12, 13, 14],
492
-
493
- [0, 1, 5], [0, 1, 8], [0, 1, 11], [0, 1, 14],
494
-
495
- [3, 4, 2], [3, 4, 8], [3, 4, 11], [3, 4, 14],
496
-
497
- [6, 7, 2], [6, 7, 5], [6, 7, 11], [6, 7, 14],
498
-
499
- [9, 10, 2], [9, 10, 5], [9, 10, 8], [9, 10, 14],
500
-
501
- [12, 13, 2], [12, 13, 5], [12, 13, 8], [12, 13, 11]
502
-
503
- ];
504
-
505
-
506
-
507
- var num=0;
508
-
509
- $("#btn").on("click", function(){
510
-
511
- $(this).data("click", ++num);
512
-
513
- var click=$(this).data("click");
514
-
515
- if(click===1){
516
-
517
- //スタートボタンを押した時の処理
518
-
519
- $("#txt").fadeOut(300);
520
-
521
- $("#btn").width("131.67px") .height('42px');
522
-
523
- $("#msg").html('');
524
-
525
- $("#msg").css("color", '#006');
526
-
527
- $("#btn").prop("disabled", true);
528
-
529
-
530
-
531
- //リール1の回転処理
532
-
533
- $("#reel1").slick({
534
-
535
- autoplay:true,
536
-
537
- autoplaySpeed:0,
538
-
539
- slidesToShow:1,
540
-
541
- initialSlide:0,
542
-
543
- arrows:false,
544
-
545
- speed:105,
546
-
547
- infinite:true,
548
-
549
- cssEase:"linear",
550
-
551
- pauseOnFocus:false,
552
-
553
- pauseOnHover:false,
554
726
 
555
727
  });
556
728
 
557
729
 
558
730
 
559
- //リール2の回転処理
560
-
561
- setTimeout(function(){
562
-
563
- $("#reel2").slick({
564
-
565
- autoplay:true,
566
-
567
- autoplaySpeed:0,
568
-
569
- slidesToShow:1,
570
-
571
- initialSlide:0,
572
-
573
- arrows:false,
574
-
575
- speed:85,
576
-
577
- infinite:true,
578
-
579
- cssEase:"linear",
580
-
581
- pauseOnFocus:false,
582
-
583
- pauseOnHover:false,
584
-
585
- });
586
-
587
- }, 800),
588
-
589
-
590
-
591
- //リール3の回転処理
592
-
593
- setTimeout(function(){
594
-
595
- $("#reel3").slick({
596
-
597
- autoplay:true,
598
-
599
- autoplaySpeed:0,
600
-
601
- slidesToShow:1,
602
-
603
- initialSlide:0,
604
-
605
- arrows:false,
606
-
607
- speed:90,
608
-
609
- infinite:true,
610
-
611
- cssEase:"linear",
612
-
613
- rtl:false,
614
-
615
- pauseOnFocus:false,
616
-
617
- pauseOnHover:false,
618
-
619
- });
620
-
621
- }, 2000),
622
-
623
-
624
-
625
- //ボタンの有効化
626
-
627
- setTimeout(function(){
628
-
629
- $("#btn").prop("disabled", false);
630
-
631
- $("#txt").html('STOP');
632
-
633
- $("#txt").fadeIn(300);
634
-
635
- }, 2300)
636
-
637
-
638
-
639
-
640
-
641
- }if(click===2){
642
-
643
- //ストップボタンを押した時の処理
644
-
645
- $("#txt").html('CLOSE');
646
-
647
- $("#btn").prop("disabled", true);
648
-
649
- $("#btn").width("131.67px") .height('42px');
650
-
651
-
652
-
653
- //リール1の処理
654
-
655
- $("#reel1").slick("slickPause");
656
-
657
-
658
-
659
- //リール2の処理
660
-
661
- setTimeout(function(){
662
-
663
- $("#reel2").slick("slickPause");
664
-
665
- }, 1000),
666
-
667
-
668
-
669
- //リール3の処理
670
-
671
- //要素に応じて最後のリールが止まる時間をずらす処理
672
-
673
- if (reachimg===0; reachimg<25;){
674
-
675
- setTimeout(function(){
676
-
677
- $("#reel3").slick("slickPause");
678
-
679
- }, 5000);
680
-
681
- }else{
682
-
683
- setTimeout(function(){
684
-
685
- $("#reel3").slick("slickPause");
686
-
687
- }, 2000);
688
-
689
- }
690
-
691
- //ボタンの有効化
692
-
693
- setTimeout(function(){
694
-
695
- $("#btn").prop("disabled", false);
696
-
697
- }, 2000)
698
-
699
-
700
-
701
- }if(click===3){
702
-
703
- window.close();
704
-
705
- }
706
-
707
- });
708
-
709
-
710
-
711
- });
712
-
713
-
714
-
715
731
  </script>
716
732
 
733
+
734
+
717
735
  ```
718
736
 
719
737
 

2

書式の追加

2019/04/01 03:16

投稿

NULE
NULE

スコア12

test CHANGED
File without changes
test CHANGED
@@ -16,11 +16,13 @@
16
16
 
17
17
  というように、1連の流れはできました。
18
18
 
19
+
20
+
19
21
  【実現したいこと】
20
22
 
21
- 確率に応じて下記の通りに絵柄が揃う(3つのパーツが合わさったときに1つの絵になる)ようにしたいです。
23
+ 確率に応じて下記の通りに絵柄が揃う(3つのパーツが合わさったときに1つの絵になる)ようにしたいです。(30%の確率で絵柄A、10%=絵柄B、6%=絵柄C、3%=絵柄D、1%=絵柄E)
22
-
24
+
23
- 30%確率絵柄A10%=絵柄B、6%=絵柄C、3%=絵柄D、1%=絵柄E
25
+ ⑵ リーチときとそうないときで最後のリールが止まる時間を調整したいです。
24
26
 
25
27
 
26
28
 
@@ -30,506 +32,696 @@
30
32
 
31
33
 
32
34
 
35
+ ```HTML
36
+
37
+ <div id="box">
38
+
39
+ <div id="board"><div id="msg"></div></div>
40
+
41
+
42
+
43
+ <div id="reel">
44
+
45
+
46
+
47
+ <div id="reel1">
48
+
49
+ <img src="img/0.png">
50
+
51
+ <img src="img/3.png">
52
+
53
+ <img src="img/6.png">
54
+
55
+ <img src="img/9.png">
56
+
57
+ <img src="img/12.png">
58
+
33
- ### 発生している問題・エラーメッセージ
59
+ </div>
60
+
61
+
62
+
34
-
63
+ <div id="reel2">
64
+
35
-
65
+ <img src="img/1.png">
66
+
67
+ <img src="img/4.png">
68
+
69
+ <img src="img/7.png">
70
+
71
+ <img src="img/10.png">
72
+
73
+ <img src="img/13.png">
74
+
75
+ </div>
76
+
77
+
78
+
79
+ <div id="reel3">
80
+
81
+ <img src="img/2.png">
82
+
83
+ <img src="img/5.png">
84
+
85
+ <img src="img/8.png">
86
+
87
+ <img src="img/11.png">
88
+
89
+ <img src="img/14.png">
90
+
91
+ </div>
92
+
93
+
94
+
95
+ </div>
96
+
97
+
98
+
99
+ <button id="btn"><div id=txt>START</div></button>
100
+
101
+
102
+
103
+ </div>
36
104
 
37
105
  ```
38
106
 
107
+ ```jQuery
108
+
109
+ ***改正前***
110
+
111
+
112
+
113
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
114
+
115
+ <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
116
+
117
+ <script type="text/javascript" src="slick/slick.min.js"></script>
118
+
119
+ <script>
120
+
121
+ $(function(){
122
+
123
+ //メッセージを点滅させる処理
124
+
125
+ setInterval(function(){
126
+
127
+ $("#msg").fadeOut(1000,function(){
128
+
129
+ $(this).fadeIn(800)
130
+
39
- エラーメッセージ
131
+ });5000;
132
+
133
+ });
134
+
135
+
136
+
137
+ var num=0;
138
+
139
+ $("#btn").on("click", function(){
140
+
141
+ $(this).data("click", ++num);
142
+
143
+ var click=$(this).data("click");
144
+
145
+ if(click===1){
146
+
147
+ //スタートボタンを押した時の処理
148
+
149
+ $("#txt").fadeOut(300);
150
+
151
+ $("#btn").width("131.67px") .height('42px');
152
+
153
+ $("#msg").html('');
154
+
155
+ $("#msg").css("color", '#006');
156
+
157
+ $("#btn").prop("disabled", true);
158
+
159
+
160
+
161
+ //リール1の回転処理
162
+
163
+ $("#reel1").slick({
164
+
165
+ autoplay:true,
166
+
167
+ autoplaySpeed:0,
168
+
169
+ slidesToShow:1,
170
+
171
+ initialSlide:0,
172
+
173
+ arrows:false,
174
+
175
+ speed:105,
176
+
177
+ infinite:true,
178
+
179
+ cssEase:"linear",
180
+
181
+ pauseOnFocus:false,
182
+
183
+ pauseOnHover:false,
184
+
185
+ });
186
+
187
+
188
+
189
+ //リール2の回転処理
190
+
191
+ setTimeout(function(){
192
+
193
+ $("#reel2").slick({
194
+
195
+ autoplay:true,
196
+
197
+ autoplaySpeed:0,
198
+
199
+ slidesToShow:1,
200
+
201
+ initialSlide:0,
202
+
203
+ arrows:false,
204
+
205
+ speed:85,
206
+
207
+ infinite:true,
208
+
209
+ cssEase:"linear",
210
+
211
+ pauseOnFocus:false,
212
+
213
+ pauseOnHover:false,
214
+
215
+ });
216
+
217
+ }, 800),
218
+
219
+
220
+
221
+ //リール3の回転処理
222
+
223
+ setTimeout(function(){
224
+
225
+ $("#reel3").slick({
226
+
227
+ autoplay:true,
228
+
229
+ autoplaySpeed:0,
230
+
231
+ slidesToShow:1,
232
+
233
+ initialSlide:0,
234
+
235
+ arrows:false,
236
+
237
+ speed:90,
238
+
239
+ infinite:true,
240
+
241
+ cssEase:"linear",
242
+
243
+ rtl:false,
244
+
245
+ pauseOnFocus:false,
246
+
247
+ pauseOnHover:false,
248
+
249
+ });
250
+
251
+ }, 2000),
252
+
253
+
254
+
255
+ //ボタンの有効化
256
+
257
+ setTimeout(function(){
258
+
259
+ $("#btn").prop("disabled", false);
260
+
261
+ $("#txt").html('STOP');
262
+
263
+ $("#txt").fadeIn(300);
264
+
265
+ }, 2300)
266
+
267
+
268
+
269
+
270
+
271
+ }if(click===2){
272
+
273
+ //ストップボタンを押した時の処理
274
+
275
+ $("#txt").html('CLOSE');
276
+
277
+ $("#btn").prop("disabled", true);
278
+
279
+ $("#btn").width("131.67px") .height('42px');
280
+
281
+
282
+
283
+ //リール1の処理
284
+
285
+ $("#reel1").slick("slickPause");
286
+
287
+
288
+
289
+ //リール2の処理
290
+
291
+ setTimeout(function(){
292
+
293
+ $("#reel2").slick("slickPause");
294
+
295
+ }, 1000),
296
+
297
+
298
+
299
+ //リール3の処理
300
+
301
+ setTimeout(function(){
302
+
303
+ $("#reel3").slick("slickPause");
304
+
305
+ }, 2000),
306
+
307
+
308
+
309
+ //ボタンの有効化
310
+
311
+ setTimeout(function(){
312
+
313
+ $("#btn").prop("disabled", false);
314
+
315
+ }, 2000)
316
+
317
+
318
+
319
+ }if(click===3){
320
+
321
+ window.close();
322
+
323
+ }
324
+
325
+ });
326
+
327
+
328
+
329
+ });
330
+
331
+
332
+
333
+ </script>
40
334
 
41
335
  ```
42
336
 
43
-
44
-
45
- ### 該当のソースコード
46
-
47
- ```HTML
48
-
49
- <div id="box">
50
-
51
- <div id="board"><div id="msg"></div></div>
52
-
53
-
54
-
55
- <div id="reel">
56
-
57
-
58
-
59
- <div id="reel1">
60
-
61
- <img src="img/0.png">
62
-
63
- <img src="img/3.png">
64
-
65
- <img src="img/6.png">
66
-
67
- <img src="img/9.png">
68
-
69
- <img src="img/12.png">
70
-
71
- </div>
72
-
73
-
74
-
75
- <div id="reel2">
76
-
77
- <img src="img/1.png">
78
-
79
- <img src="img/4.png">
80
-
81
- <img src="img/7.png">
82
-
83
- <img src="img/10.png">
84
-
85
- <img src="img/13.png">
86
-
87
- </div>
88
-
89
-
90
-
91
- <div id="reel3">
92
-
93
- <img src="img/2.png">
94
-
95
- <img src="img/5.png">
96
-
97
- <img src="img/8.png">
98
-
99
- <img src="img/11.png">
100
-
101
- <img src="img/14.png">
102
-
103
- </div>
104
-
105
-
106
-
107
- </div>
108
-
109
-
110
-
111
- <button id="btn"><div id=txt>START</div></button>
112
-
113
-
114
-
115
- </div>
337
+ ```jQuery
338
+
339
+ ***改正版(2019/3/30)***
340
+
341
+
342
+
343
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
344
+
345
+ <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
346
+
347
+ <script type="text/javascript" src="slick/slick.min.js"></script>
348
+
349
+ <script>
350
+
351
+ $(function(){
352
+
353
+ //メッセージを点滅させる処理
354
+
355
+ setInterval(function(){
356
+
357
+ $("#msg").fadeOut(1000,function(){
358
+
359
+ $(this).fadeIn(800)
360
+
361
+ });5000;
362
+
363
+ });
364
+
365
+ var Reel=document.getElementById("#reel");
366
+
367
+ //画像の配列
368
+
369
+ var img=["img/0.pmg", "img/3.pmg", "img/6.pmg", "img/9.pmg", "img/12.pmg",
370
+
371
+ "img/1.pmg", "img/4.pmg", "img/7.pmg", "img/10.pmg", "img/13.pmg",
372
+
373
+ "img/2.pmg", "img/5.pmg", "img/8.pmg", "img/11.pmg", "img/14.pmg"];
374
+
375
+
376
+
377
+ //当たりとなる変数
378
+
379
+ var set1=img[0, 1, 2];
380
+
381
+ var set2=img[3, 4, 5];
382
+
383
+ var set3=img[6, 7, 8];
384
+
385
+ var set4=img[9, 10, 11];
386
+
387
+ var set5=img[12, 13, 14];
388
+
389
+
390
+
391
+ //リーチのときの変数(3番目のリールが止まる時間を延ばすため)
392
+
393
+ var closeset=img[
394
+
395
+ [0, 1, 5], [0, 1, 8], [0, 1, 11], [0, 1, 14],
396
+
397
+ [3, 4, 2], [3, 4, 8], [3, 4, 11], [3, 4, 14],
398
+
399
+ [6, 7, 2], [6, 7, 5], [6, 7, 11], [6, 7, 14],
400
+
401
+ [9, 10, 2], [9, 10, 5], [9, 10, 8], [9, 10, 14],
402
+
403
+ [12, 13, 2], [12, 13, 5], [12, 13, 8], [12, 13, 11]
404
+
405
+ ];
406
+
407
+ //ハズレの変数(3番目のリールが止まる時間を早くするため)
408
+
409
+ var noset=img[
410
+
411
+ [0, 4, 2], [0, 4, 5], [0, 4, 8], [0, 4, 11], [0, 4, 14],
412
+
413
+ [0, 7, 2], [0, 7, 5], [0, 7, 8], [0, 7, 11], [0, 7, 14],
414
+
415
+ [0, 10, 2], [0, 10, 5], [0, 10, 8], [0, 10, 11], [0, 10, 14],
416
+
417
+ [0, 13, 2], [0, 13, 5], [0, 13, 8], [0, 13, 11], [0, 13, 14],
418
+
419
+ [3, 1, 2], [3, 1, 5], [3, 1, 8], [3, 1, 11], [3, 1, 14],
420
+
421
+ [3, 7, 2], [3, 7, 5], [3, 7, 8], [3, 7, 11], [3, 7, 14],
422
+
423
+ [3, 10, 2], [3, 10, 5], [3, 10, 8], [3, 10, 11], [3, 10, 14],
424
+
425
+ [3, 13, 2], [3, 13, 5], [3, 13, 8], [3, 13, 11], [3, 13, 14],
426
+
427
+ [6, 1, 2], [6, 1, 5], [6, 1, 8], [6, 1, 11], [6, 1, 14],
428
+
429
+ [6, 4, 2], [6, 4, 5], [6, 4, 8], [6, 4, 11], [6, 4, 14],
430
+
431
+ [6, 10, 2], [6, 10, 5], [6, 10, 8], [6, 10, 11], [6, 10, 14],
432
+
433
+ [6, 13, 2], [6, 13, 5], [6, 13, 8], [6, 13, 11], [6, 13, 14],
434
+
435
+ [9, 1, 2], [9, 1, 5], [9, 1, 8], [9, 1, 11], [9, 1, 14],
436
+
437
+ [9, 4, 2], [9, 4, 5], [9, 4, 8], [9, 4, 11], [9, 4, 14],
438
+
439
+ [9, 7, 2], [9, 7, 5], [9, 7, 8], [9, 7, 11], [9, 7, 14],
440
+
441
+ [9, 13, 2], [9, 13, 5], [9, 13, 8], [9, 13, 11], [9, 13, 14],
442
+
443
+ [12, 1, 2], [12, 1, 5], [12, 1, 8], [12, 1, 11], [12, 1, 14],
444
+
445
+ [12, 4, 2], [12, 4, 5], [12, 4, 8], [12, 4, 11], [12, 4, 14],
446
+
447
+ [12, 7, 2], [12, 7, 5], [12, 7, 8], [12, 7, 11], [12, 7, 14],
448
+
449
+ [12, 10, 2], [12, 10, 5], [12, 10, 8], [12, 10, 11], [12, 10, 14]
450
+
451
+ ];
452
+
453
+ //出現確率
454
+
455
+ var chance=Math.floor(Math.random()*(set1+set2+set3+set4+set5
456
+
457
+ +closeset+noset).length);
458
+
459
+ if(chance===0){
460
+
461
+ $("#reel").attr('src', set5);
462
+
463
+ }else if(chance>=1&&chance<=2) {
464
+
465
+ $("#reel").attr('src', set4);
466
+
467
+ }else if(chance>=3&&chance<=8) {
468
+
469
+ $("#reel").attr('src', set3);
470
+
471
+ }else if(chance>=9&&chance<=18) {
472
+
473
+ $("#reel").attr('src', set2);
474
+
475
+ }else if(chance>=19&&chance<=38) {
476
+
477
+ $("#reel").attr('src', set1);
478
+
479
+ }else{
480
+
481
+ $("#reel").attr('src', closeset && noset);
482
+
483
+ }
484
+
485
+
486
+
487
+ //リール3がストップする時の変数
488
+
489
+ var reachimg=img[
490
+
491
+ [0, 1, 2], [3, 4, 5], [6, 7, 8], [9, 10, 11], [12, 13, 14],
492
+
493
+ [0, 1, 5], [0, 1, 8], [0, 1, 11], [0, 1, 14],
494
+
495
+ [3, 4, 2], [3, 4, 8], [3, 4, 11], [3, 4, 14],
496
+
497
+ [6, 7, 2], [6, 7, 5], [6, 7, 11], [6, 7, 14],
498
+
499
+ [9, 10, 2], [9, 10, 5], [9, 10, 8], [9, 10, 14],
500
+
501
+ [12, 13, 2], [12, 13, 5], [12, 13, 8], [12, 13, 11]
502
+
503
+ ];
504
+
505
+
506
+
507
+ var num=0;
508
+
509
+ $("#btn").on("click", function(){
510
+
511
+ $(this).data("click", ++num);
512
+
513
+ var click=$(this).data("click");
514
+
515
+ if(click===1){
516
+
517
+ //スタートボタンを押した時の処理
518
+
519
+ $("#txt").fadeOut(300);
520
+
521
+ $("#btn").width("131.67px") .height('42px');
522
+
523
+ $("#msg").html('');
524
+
525
+ $("#msg").css("color", '#006');
526
+
527
+ $("#btn").prop("disabled", true);
528
+
529
+
530
+
531
+ //リール1の回転処理
532
+
533
+ $("#reel1").slick({
534
+
535
+ autoplay:true,
536
+
537
+ autoplaySpeed:0,
538
+
539
+ slidesToShow:1,
540
+
541
+ initialSlide:0,
542
+
543
+ arrows:false,
544
+
545
+ speed:105,
546
+
547
+ infinite:true,
548
+
549
+ cssEase:"linear",
550
+
551
+ pauseOnFocus:false,
552
+
553
+ pauseOnHover:false,
554
+
555
+ });
556
+
557
+
558
+
559
+ //リール2の回転処理
560
+
561
+ setTimeout(function(){
562
+
563
+ $("#reel2").slick({
564
+
565
+ autoplay:true,
566
+
567
+ autoplaySpeed:0,
568
+
569
+ slidesToShow:1,
570
+
571
+ initialSlide:0,
572
+
573
+ arrows:false,
574
+
575
+ speed:85,
576
+
577
+ infinite:true,
578
+
579
+ cssEase:"linear",
580
+
581
+ pauseOnFocus:false,
582
+
583
+ pauseOnHover:false,
584
+
585
+ });
586
+
587
+ }, 800),
588
+
589
+
590
+
591
+ //リール3の回転処理
592
+
593
+ setTimeout(function(){
594
+
595
+ $("#reel3").slick({
596
+
597
+ autoplay:true,
598
+
599
+ autoplaySpeed:0,
600
+
601
+ slidesToShow:1,
602
+
603
+ initialSlide:0,
604
+
605
+ arrows:false,
606
+
607
+ speed:90,
608
+
609
+ infinite:true,
610
+
611
+ cssEase:"linear",
612
+
613
+ rtl:false,
614
+
615
+ pauseOnFocus:false,
616
+
617
+ pauseOnHover:false,
618
+
619
+ });
620
+
621
+ }, 2000),
622
+
623
+
624
+
625
+ //ボタンの有効化
626
+
627
+ setTimeout(function(){
628
+
629
+ $("#btn").prop("disabled", false);
630
+
631
+ $("#txt").html('STOP');
632
+
633
+ $("#txt").fadeIn(300);
634
+
635
+ }, 2300)
636
+
637
+
638
+
639
+
640
+
641
+ }if(click===2){
642
+
643
+ //ストップボタンを押した時の処理
644
+
645
+ $("#txt").html('CLOSE');
646
+
647
+ $("#btn").prop("disabled", true);
648
+
649
+ $("#btn").width("131.67px") .height('42px');
650
+
651
+
652
+
653
+ //リール1の処理
654
+
655
+ $("#reel1").slick("slickPause");
656
+
657
+
658
+
659
+ //リール2の処理
660
+
661
+ setTimeout(function(){
662
+
663
+ $("#reel2").slick("slickPause");
664
+
665
+ }, 1000),
666
+
667
+
668
+
669
+ //リール3の処理
670
+
671
+ //要素に応じて最後のリールが止まる時間をずらす処理
672
+
673
+ if (reachimg===0; reachimg<25;){
674
+
675
+ setTimeout(function(){
676
+
677
+ $("#reel3").slick("slickPause");
678
+
679
+ }, 5000);
680
+
681
+ }else{
682
+
683
+ setTimeout(function(){
684
+
685
+ $("#reel3").slick("slickPause");
686
+
687
+ }, 2000);
688
+
689
+ }
690
+
691
+ //ボタンの有効化
692
+
693
+ setTimeout(function(){
694
+
695
+ $("#btn").prop("disabled", false);
696
+
697
+ }, 2000)
698
+
699
+
700
+
701
+ }if(click===3){
702
+
703
+ window.close();
704
+
705
+ }
706
+
707
+ });
708
+
709
+
710
+
711
+ });
712
+
713
+
714
+
715
+ </script>
116
716
 
117
717
  ```
118
718
 
119
- ```jQuery
120
-
121
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
122
-
123
- <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
124
-
125
- <script type="text/javascript" src="slick/slick.min.js"></script>
126
-
127
- <script>
128
-
129
- $(function(){
130
-
131
- //メッセージを点滅させる処理
132
-
133
- setInterval(function(){
134
-
135
- $("#msg").fadeOut(1000,function(){
136
-
137
- $(this).fadeIn(800)
138
-
139
- });5000;
140
-
141
- });
142
-
143
- var Reel=document.getElementById("#reel");
144
-
145
- //画像の配列
146
-
147
- var img=["img/0.pmg", "img/3.pmg", "img/6.pmg", "img/9.pmg", "img/12.pmg",
148
-
149
- "img/1.pmg", "img/4.pmg", "img/7.pmg", "img/10.pmg", "img/13.pmg",
150
-
151
- "img/2.pmg", "img/5.pmg", "img/8.pmg", "img/11.pmg", "img/14.pmg"];
152
-
153
-
154
-
155
- //当たりとなる変数
156
-
157
- var set1=img[0, 1, 2];
158
-
159
- var set2=img[3, 4, 5];
160
-
161
- var set3=img[6, 7, 8];
162
-
163
- var set4=img[9, 10, 11];
164
-
165
- var set5=img[12, 13, 14];
166
-
167
-
168
-
169
- //リーチのときの変数(3番目のリールが止まる時間を延ばすため)
170
-
171
- var closeset=img[
172
-
173
- [0, 1, 5], [0, 1, 8], [0, 1, 11], [0, 1, 14],
174
-
175
- [3, 4, 2], [3, 4, 8], [3, 4, 11], [3, 4, 14],
176
-
177
- [6, 7, 2], [6, 7, 5], [6, 7, 11], [6, 7, 14],
178
-
179
- [9, 10, 2], [9, 10, 5], [9, 10, 8], [9, 10, 14],
180
-
181
- [12, 13, 2], [12, 13, 5], [12, 13, 8], [12, 13, 11]
182
-
183
- ];
184
-
185
- //ハズレの変数(3番目のリールが止まる時間を早くするため)
186
-
187
- var noset=img[
188
-
189
- [0, 4, 2], [0, 4, 5], [0, 4, 8], [0, 4, 11], [0, 4, 14],
190
-
191
- [0, 7, 2], [0, 7, 5], [0, 7, 8], [0, 7, 11], [0, 7, 14],
192
-
193
- [0, 10, 2], [0, 10, 5], [0, 10, 8], [0, 10, 11], [0, 10, 14],
194
-
195
- [0, 13, 2], [0, 13, 5], [0, 13, 8], [0, 13, 11], [0, 13, 14],
196
-
197
- [3, 1, 2], [3, 1, 5], [3, 1, 8], [3, 1, 11], [3, 1, 14],
198
-
199
- [3, 7, 2], [3, 7, 5], [3, 7, 8], [3, 7, 11], [3, 7, 14],
200
-
201
- [3, 10, 2], [3, 10, 5], [3, 10, 8], [3, 10, 11], [3, 10, 14],
202
-
203
- [3, 13, 2], [3, 13, 5], [3, 13, 8], [3, 13, 11], [3, 13, 14],
204
-
205
- [6, 1, 2], [6, 1, 5], [6, 1, 8], [6, 1, 11], [6, 1, 14],
206
-
207
- [6, 4, 2], [6, 4, 5], [6, 4, 8], [6, 4, 11], [6, 4, 14],
208
-
209
- [6, 10, 2], [6, 10, 5], [6, 10, 8], [6, 10, 11], [6, 10, 14],
210
-
211
- [6, 13, 2], [6, 13, 5], [6, 13, 8], [6, 13, 11], [6, 13, 14],
212
-
213
- [9, 1, 2], [9, 1, 5], [9, 1, 8], [9, 1, 11], [9, 1, 14],
214
-
215
- [9, 4, 2], [9, 4, 5], [9, 4, 8], [9, 4, 11], [9, 4, 14],
216
-
217
- [9, 7, 2], [9, 7, 5], [9, 7, 8], [9, 7, 11], [9, 7, 14],
218
-
219
- [9, 13, 2], [9, 13, 5], [9, 13, 8], [9, 13, 11], [9, 13, 14],
220
-
221
- [12, 1, 2], [12, 1, 5], [12, 1, 8], [12, 1, 11], [12, 1, 14],
222
-
223
- [12, 4, 2], [12, 4, 5], [12, 4, 8], [12, 4, 11], [12, 4, 14],
224
-
225
- [12, 7, 2], [12, 7, 5], [12, 7, 8], [12, 7, 11], [12, 7, 14],
226
-
227
- [12, 10, 2], [12, 10, 5], [12, 10, 8], [12, 10, 11], [12, 10, 14]
228
-
229
- ];
230
-
231
- //出現確率
232
-
233
- var chance=Math.floor(Math.random()*(set1+set2+set3+set4+set5
234
-
235
- +closeset+noset).length);
236
-
237
- if(chance===0){
238
-
239
- $("#reel").attr('src', set5);
240
-
241
- }else if(chance>=1&&chance<=2) {
242
-
243
- $("#reel").attr('src', set4);
244
-
245
- }else if(chance>=3&&chance<=8) {
246
-
247
- $("#reel").attr('src', set3);
248
-
249
- }else if(chance>=9&&chance<=18) {
250
-
251
- $("#reel").attr('src', set2);
252
-
253
- }else if(chance>=19&&chance<=38) {
254
-
255
- $("#reel").attr('src', set1);
256
-
257
- }else{
258
-
259
- $("#reel").attr('src', closeset && noset);
260
-
261
- }
262
-
263
-
264
-
265
- //リール3がストップする時の変数
266
-
267
- var reachimg=img[
268
-
269
- [0, 1, 2], [3, 4, 5], [6, 7, 8], [9, 10, 11], [12, 13, 14],
270
-
271
- [0, 1, 5], [0, 1, 8], [0, 1, 11], [0, 1, 14],
272
-
273
- [3, 4, 2], [3, 4, 8], [3, 4, 11], [3, 4, 14],
274
-
275
- [6, 7, 2], [6, 7, 5], [6, 7, 11], [6, 7, 14],
276
-
277
- [9, 10, 2], [9, 10, 5], [9, 10, 8], [9, 10, 14],
278
-
279
- [12, 13, 2], [12, 13, 5], [12, 13, 8], [12, 13, 11]
280
-
281
- ];
282
-
283
-
284
-
285
- var num=0;
286
-
287
- $("#btn").on("click", function(){
288
-
289
- $(this).data("click", ++num);
290
-
291
- var click=$(this).data("click");
292
-
293
- if(click===1){
294
-
295
- //スタートボタンを押した時の処理
296
-
297
- $("#txt").fadeOut(300);
298
-
299
- $("#btn").width("131.67px") .height('42px');
300
-
301
- $("#msg").html('');
302
-
303
- $("#msg").css("color", '#006');
304
-
305
- $("#btn").prop("disabled", true);
306
-
307
-
308
-
309
- //リール1の回転処理
310
-
311
- $("#reel1").slick({
312
-
313
- autoplay:true,
314
-
315
- autoplaySpeed:0,
316
-
317
- slidesToShow:1,
318
-
319
- initialSlide:0,
320
-
321
- arrows:false,
322
-
323
- speed:105,
324
-
325
- infinite:true,
326
-
327
- cssEase:"linear",
328
-
329
- pauseOnFocus:false,
330
-
331
- pauseOnHover:false,
332
-
333
- });
334
-
335
-
336
-
337
- //リール2の回転処理
338
-
339
- setTimeout(function(){
340
-
341
- $("#reel2").slick({
342
-
343
- autoplay:true,
344
-
345
- autoplaySpeed:0,
346
-
347
- slidesToShow:1,
348
-
349
- initialSlide:0,
350
-
351
- arrows:false,
352
-
353
- speed:85,
354
-
355
- infinite:true,
356
-
357
- cssEase:"linear",
358
-
359
- pauseOnFocus:false,
360
-
361
- pauseOnHover:false,
362
-
363
- });
364
-
365
- }, 800),
366
-
367
-
368
-
369
- //リール3の回転処理
370
-
371
- setTimeout(function(){
372
-
373
- $("#reel3").slick({
374
-
375
- autoplay:true,
376
-
377
- autoplaySpeed:0,
378
-
379
- slidesToShow:1,
380
-
381
- initialSlide:0,
382
-
383
- arrows:false,
384
-
385
- speed:90,
386
-
387
- infinite:true,
388
-
389
- cssEase:"linear",
390
-
391
- rtl:false,
392
-
393
- pauseOnFocus:false,
394
-
395
- pauseOnHover:false,
396
-
397
- });
398
-
399
- }, 2000),
400
-
401
-
402
-
403
- //ボタンの有効化
404
-
405
- setTimeout(function(){
406
-
407
- $("#btn").prop("disabled", false);
408
-
409
- $("#txt").html('STOP');
410
-
411
- $("#txt").fadeIn(300);
412
-
413
- }, 2300)
414
-
415
-
416
-
417
-
418
-
419
- }if(click===2){
420
-
421
- //ストップボタンを押した時の処理
422
-
423
- $("#txt").html('CLOSE');
424
-
425
- $("#btn").prop("disabled", true);
426
-
427
- $("#btn").width("131.67px") .height('42px');
428
-
429
-
430
-
431
- //リール1の処理
432
-
433
- $("#reel1").slick("slickPause");
434
-
435
-
436
-
437
- //リール2の処理
438
-
439
- setTimeout(function(){
440
-
441
- $("#reel2").slick("slickPause");
442
-
443
- }, 1000),
444
-
445
-
446
-
447
- //リール3の処理
448
-
449
- //要素に応じて最後のリールが止まる時間をずらす処理
450
-
451
- if (reachimg===0; reachimg<25;){
452
-
453
- setTimeout(function(){
454
-
455
- $("#reel3").slick("slickPause");
456
-
457
- }, 5000);
458
-
459
- }else{
460
-
461
- setTimeout(function(){
462
-
463
- $("#reel3").slick("slickPause");
464
-
465
- }, 2000);
466
-
467
- }
468
-
469
- //ボタンの有効化
470
-
471
- setTimeout(function(){
472
-
473
- $("#btn").prop("disabled", false);
474
-
475
- }, 2000)
476
-
477
-
478
-
479
- }if(click===3){
480
-
481
- window.close();
482
-
483
- }
484
-
485
- });
486
-
487
-
488
-
489
- });
490
-
491
-
492
-
493
- </script>
494
-
495
- ```
496
-
497
719
 
498
720
 
499
721
 
500
722
 
501
723
  ### 試したこと
502
724
 
503
- 以下のようにランダムに画像を取得することはできましたが、
504
-
505
- ユーザーがストップボタンを押してから確率に応じてストップさせる関数がわかりません。
506
-
507
- var reel1 = document.querySelector("#reel1");
508
-
509
- for (var i = reel1.children.length; i >= 0; i--) {
510
-
511
- reel1.appendChild(reel1.children[Math.random() * i | 0]);
512
-
513
- };
514
-
515
- var reel2 = document.querySelector("#reel2");
516
-
517
- for (var i = reel2.children.length; i >= 0; i--) {
518
-
519
- reel2.appendChild(reel2.children[Math.random() * i | 0]);
520
-
521
- };
522
-
523
- var reel3 = document.querySelector("#reel3");
524
-
525
- for (var i = reel3.children.length; i >= 0; i--) {
526
-
527
- reel3.appendChild(reel3.children[Math.random() * i | 0]);
528
-
529
- };
530
-
531
- var topImg=document.
532
-
533
725
 
534
726
 
535
727
 

1

jQueryのコードを更新しました。

2019/03/31 16:59

投稿

NULE
NULE

スコア12

test CHANGED
File without changes
test CHANGED
@@ -126,222 +126,378 @@
126
126
 
127
127
  <script>
128
128
 
129
-
130
-
131
129
  $(function(){
132
130
 
133
131
  //メッセージを点滅させる処理
134
132
 
135
- setInterval(function(){
133
+ setInterval(function(){
136
-
134
+
137
- $("#msg").fadeOut(1000,function(){
135
+ $("#msg").fadeOut(1000,function(){
138
-
136
+
139
- $(this).fadeIn(800)
137
+ $(this).fadeIn(800)
140
-
138
+
141
- });5000;
139
+ });5000;
142
-
140
+
143
- });
141
+ });
142
+
144
-
143
+ var Reel=document.getElementById("#reel");
144
+
145
-
145
+ //画像の配列
146
+
146
-
147
+ var img=["img/0.pmg", "img/3.pmg", "img/6.pmg", "img/9.pmg", "img/12.pmg",
148
+
147
-
149
+ "img/1.pmg", "img/4.pmg", "img/7.pmg", "img/10.pmg", "img/13.pmg",
150
+
151
+ "img/2.pmg", "img/5.pmg", "img/8.pmg", "img/11.pmg", "img/14.pmg"];
152
+
153
+
154
+
155
+ //当たりとなる変数
156
+
157
+ var set1=img[0, 1, 2];
158
+
159
+ var set2=img[3, 4, 5];
160
+
161
+ var set3=img[6, 7, 8];
162
+
163
+ var set4=img[9, 10, 11];
164
+
165
+ var set5=img[12, 13, 14];
166
+
167
+
168
+
169
+ //リーチのときの変数(3番目のリールが止まる時間を延ばすため)
170
+
171
+ var closeset=img[
172
+
173
+ [0, 1, 5], [0, 1, 8], [0, 1, 11], [0, 1, 14],
174
+
175
+ [3, 4, 2], [3, 4, 8], [3, 4, 11], [3, 4, 14],
176
+
177
+ [6, 7, 2], [6, 7, 5], [6, 7, 11], [6, 7, 14],
178
+
179
+ [9, 10, 2], [9, 10, 5], [9, 10, 8], [9, 10, 14],
180
+
181
+ [12, 13, 2], [12, 13, 5], [12, 13, 8], [12, 13, 11]
182
+
183
+ ];
184
+
185
+ //ハズレの変数(3番目のリールが止まる時間を早くするため)
186
+
187
+ var noset=img[
188
+
189
+ [0, 4, 2], [0, 4, 5], [0, 4, 8], [0, 4, 11], [0, 4, 14],
190
+
191
+ [0, 7, 2], [0, 7, 5], [0, 7, 8], [0, 7, 11], [0, 7, 14],
192
+
193
+ [0, 10, 2], [0, 10, 5], [0, 10, 8], [0, 10, 11], [0, 10, 14],
194
+
195
+ [0, 13, 2], [0, 13, 5], [0, 13, 8], [0, 13, 11], [0, 13, 14],
196
+
197
+ [3, 1, 2], [3, 1, 5], [3, 1, 8], [3, 1, 11], [3, 1, 14],
198
+
199
+ [3, 7, 2], [3, 7, 5], [3, 7, 8], [3, 7, 11], [3, 7, 14],
200
+
201
+ [3, 10, 2], [3, 10, 5], [3, 10, 8], [3, 10, 11], [3, 10, 14],
202
+
203
+ [3, 13, 2], [3, 13, 5], [3, 13, 8], [3, 13, 11], [3, 13, 14],
204
+
205
+ [6, 1, 2], [6, 1, 5], [6, 1, 8], [6, 1, 11], [6, 1, 14],
206
+
207
+ [6, 4, 2], [6, 4, 5], [6, 4, 8], [6, 4, 11], [6, 4, 14],
208
+
209
+ [6, 10, 2], [6, 10, 5], [6, 10, 8], [6, 10, 11], [6, 10, 14],
210
+
211
+ [6, 13, 2], [6, 13, 5], [6, 13, 8], [6, 13, 11], [6, 13, 14],
212
+
213
+ [9, 1, 2], [9, 1, 5], [9, 1, 8], [9, 1, 11], [9, 1, 14],
214
+
215
+ [9, 4, 2], [9, 4, 5], [9, 4, 8], [9, 4, 11], [9, 4, 14],
216
+
217
+ [9, 7, 2], [9, 7, 5], [9, 7, 8], [9, 7, 11], [9, 7, 14],
218
+
219
+ [9, 13, 2], [9, 13, 5], [9, 13, 8], [9, 13, 11], [9, 13, 14],
220
+
221
+ [12, 1, 2], [12, 1, 5], [12, 1, 8], [12, 1, 11], [12, 1, 14],
222
+
223
+ [12, 4, 2], [12, 4, 5], [12, 4, 8], [12, 4, 11], [12, 4, 14],
224
+
225
+ [12, 7, 2], [12, 7, 5], [12, 7, 8], [12, 7, 11], [12, 7, 14],
226
+
227
+ [12, 10, 2], [12, 10, 5], [12, 10, 8], [12, 10, 11], [12, 10, 14]
228
+
229
+ ];
230
+
231
+ //出現確率
232
+
233
+ var chance=Math.floor(Math.random()*(set1+set2+set3+set4+set5
234
+
235
+ +closeset+noset).length);
236
+
237
+ if(chance===0){
238
+
239
+ $("#reel").attr('src', set5);
240
+
241
+ }else if(chance>=1&&chance<=2) {
242
+
243
+ $("#reel").attr('src', set4);
244
+
245
+ }else if(chance>=3&&chance<=8) {
246
+
247
+ $("#reel").attr('src', set3);
248
+
249
+ }else if(chance>=9&&chance<=18) {
250
+
251
+ $("#reel").attr('src', set2);
252
+
253
+ }else if(chance>=19&&chance<=38) {
254
+
255
+ $("#reel").attr('src', set1);
256
+
257
+ }else{
258
+
259
+ $("#reel").attr('src', closeset && noset);
260
+
261
+ }
262
+
263
+
264
+
265
+ //リール3がストップする時の変数
266
+
267
+ var reachimg=img[
268
+
269
+ [0, 1, 2], [3, 4, 5], [6, 7, 8], [9, 10, 11], [12, 13, 14],
270
+
271
+ [0, 1, 5], [0, 1, 8], [0, 1, 11], [0, 1, 14],
272
+
273
+ [3, 4, 2], [3, 4, 8], [3, 4, 11], [3, 4, 14],
274
+
275
+ [6, 7, 2], [6, 7, 5], [6, 7, 11], [6, 7, 14],
276
+
277
+ [9, 10, 2], [9, 10, 5], [9, 10, 8], [9, 10, 14],
278
+
279
+ [12, 13, 2], [12, 13, 5], [12, 13, 8], [12, 13, 11]
280
+
281
+ ];
282
+
283
+
284
+
285
+ var num=0;
286
+
287
+ $("#btn").on("click", function(){
288
+
289
+ $(this).data("click", ++num);
290
+
291
+ var click=$(this).data("click");
292
+
293
+ if(click===1){
148
294
 
149
295
  //スタートボタンを押した時の処理
150
296
 
151
- var num=0;
152
-
153
-
154
-
155
- $("#btn").on("click", function(){
156
-
157
- $(this).data("click", ++num);
158
-
159
- var click=$(this).data("click");
160
-
161
- if(click==1){
162
-
163
- $("#txt").fadeOut(300);
164
-
165
- $("#btn").width("131.67px") .height('42px');
166
-
167
- $("#msg").html('');
168
-
169
- $("#msg").css("color", '#006');
170
-
171
- $("#btn").prop("disabled", true);
172
-
173
-
174
-
175
- //リール1の回転処理
176
-
177
- $("#reel1").slick({
178
-
179
- autoplay:true,
180
-
181
- autoplaySpeed:0,
182
-
183
- slidesToShow:1,
184
-
185
- initialSlide:0,
186
-
187
- arrows:false,
188
-
189
- speed:105,
190
-
191
- infinite:true,
192
-
193
- cssEase:"linear",
194
-
195
- pauseOnFocus:false,
196
-
197
- pauseOnHover:false,
198
-
199
- });
200
-
201
-
202
-
203
- //リール2の回転処理
204
-
205
- setTimeout(function(){
206
-
207
- $("#reel2").slick({
208
-
209
- autoplay:true,
210
-
211
- autoplaySpeed:0,
212
-
213
- slidesToShow:1,
214
-
215
- initialSlide:0,
216
-
217
- arrows:false,
218
-
219
- speed:85,
220
-
221
- infinite:true,
222
-
223
- cssEase:"linear",
224
-
225
- pauseOnFocus:false,
226
-
227
- pauseOnHover:false,
228
-
229
- });
230
-
231
- }, 800),
232
-
233
-
234
-
235
- //リール3の回転処理
236
-
237
- setTimeout(function(){
238
-
239
- $("#reel3").slick({
240
-
241
- autoplay:true,
242
-
243
- autoplaySpeed:0,
244
-
245
- slidesToShow:1,
246
-
247
- initialSlide:0,
248
-
249
- arrows:false,
250
-
251
- speed:90,
252
-
253
- infinite:true,
254
-
255
- cssEase:"linear",
256
-
257
- rtl:false,
258
-
259
- pauseOnFocus:false,
260
-
261
- pauseOnHover:false,
262
-
263
- });
264
-
265
- }, 2000),
266
-
267
-
268
-
269
- setTimeout(function(){
270
-
271
- $("#btn").prop("disabled", false);
272
-
273
- $("#txt").html('STOP');
274
-
275
- $("#txt").fadeIn(300);
276
-
277
- }, 2300)
278
-
279
-
280
-
281
-
282
-
283
- }if(click==2){
284
-
285
- $("#txt").html('CLOSE');
286
-
287
- $("#btn").prop("disabled", true);
288
-
289
- $("#btn").width("131.67px") .height('42px');
290
-
291
-
292
-
293
-     $("#reel1").slick("slickPause");
294
-
295
-
296
-
297
- setTimeout(function(){
298
-
299
- $("#reel2").slick("slickPause");
300
-
301
- }, 1000),
302
-
303
-
304
-
305
-
306
-
307
- setTimeout(function(){
308
-
309
- $("#reel3").slick("slickPause");
310
-
311
- }, 2000);
312
-
313
- }
314
-
315
-
316
-
317
-
318
-
319
-
320
-
321
-
322
-
323
-
324
-
325
-
326
-
327
- }if(click==3){
328
-
329
- window.close();
330
-
331
- }
297
+ $("#txt").fadeOut(300);
298
+
299
+ $("#btn").width("131.67px") .height('42px');
300
+
301
+ $("#msg").html('');
302
+
303
+ $("#msg").css("color", '#006');
304
+
305
+ $("#btn").prop("disabled", true);
306
+
307
+
308
+
309
+ //リール1の回転処理
310
+
311
+ $("#reel1").slick({
312
+
313
+ autoplay:true,
314
+
315
+ autoplaySpeed:0,
316
+
317
+ slidesToShow:1,
318
+
319
+ initialSlide:0,
320
+
321
+ arrows:false,
322
+
323
+ speed:105,
324
+
325
+ infinite:true,
326
+
327
+ cssEase:"linear",
328
+
329
+ pauseOnFocus:false,
330
+
331
+ pauseOnHover:false,
332
332
 
333
333
  });
334
334
 
335
335
 
336
336
 
337
+ //リール2の回転処理
338
+
339
+ setTimeout(function(){
340
+
341
+ $("#reel2").slick({
342
+
343
+ autoplay:true,
344
+
345
+ autoplaySpeed:0,
346
+
347
+ slidesToShow:1,
348
+
349
+ initialSlide:0,
350
+
351
+ arrows:false,
352
+
353
+ speed:85,
354
+
355
+ infinite:true,
356
+
357
+ cssEase:"linear",
358
+
359
+ pauseOnFocus:false,
360
+
361
+ pauseOnHover:false,
362
+
337
363
  });
338
364
 
365
+ }, 800),
366
+
367
+
368
+
369
+ //リール3の回転処理
370
+
371
+ setTimeout(function(){
372
+
373
+ $("#reel3").slick({
374
+
375
+ autoplay:true,
376
+
377
+ autoplaySpeed:0,
378
+
379
+ slidesToShow:1,
380
+
381
+ initialSlide:0,
382
+
383
+ arrows:false,
384
+
385
+ speed:90,
386
+
387
+ infinite:true,
388
+
389
+ cssEase:"linear",
390
+
391
+ rtl:false,
392
+
393
+ pauseOnFocus:false,
394
+
395
+ pauseOnHover:false,
396
+
397
+ });
398
+
399
+ }, 2000),
400
+
401
+
402
+
403
+ //ボタンの有効化
404
+
405
+ setTimeout(function(){
406
+
407
+ $("#btn").prop("disabled", false);
408
+
409
+ $("#txt").html('STOP');
410
+
411
+ $("#txt").fadeIn(300);
412
+
413
+ }, 2300)
414
+
415
+
416
+
417
+
418
+
419
+ }if(click===2){
420
+
421
+ //ストップボタンを押した時の処理
422
+
423
+ $("#txt").html('CLOSE');
424
+
425
+ $("#btn").prop("disabled", true);
426
+
427
+ $("#btn").width("131.67px") .height('42px');
428
+
429
+
430
+
431
+ //リール1の処理
432
+
433
+ $("#reel1").slick("slickPause");
434
+
435
+
436
+
437
+ //リール2の処理
438
+
439
+ setTimeout(function(){
440
+
441
+ $("#reel2").slick("slickPause");
442
+
443
+ }, 1000),
444
+
445
+
446
+
447
+ //リール3の処理
448
+
449
+ //要素に応じて最後のリールが止まる時間をずらす処理
450
+
451
+ if (reachimg===0; reachimg<25;){
452
+
453
+ setTimeout(function(){
454
+
455
+ $("#reel3").slick("slickPause");
456
+
457
+ }, 5000);
458
+
459
+ }else{
460
+
461
+ setTimeout(function(){
462
+
463
+ $("#reel3").slick("slickPause");
464
+
465
+ }, 2000);
466
+
467
+ }
468
+
469
+ //ボタンの有効化
470
+
471
+ setTimeout(function(){
472
+
473
+ $("#btn").prop("disabled", false);
474
+
475
+ }, 2000)
476
+
477
+
478
+
479
+ }if(click===3){
480
+
481
+ window.close();
482
+
483
+ }
484
+
485
+ });
486
+
487
+
488
+
489
+ });
490
+
491
+
492
+
339
493
  </script>
340
494
 
341
-
342
-
343
495
  ```
344
496
 
497
+
498
+
499
+
500
+
345
501
  ### 試したこと
346
502
 
347
503
  以下のようにランダムに画像を取得することはできましたが、