JavaScript　ガラポン抽選の機械を作りたいです。

JavaScriptでボタンをクリックするとランダムで5色の玉のどれかがでてくるものを作りたいです。
jQueryとmo.jsを使用しています。

やり方がわからないところが3点あります。

①現在、”抽選スタート”ボタンを押すとそのボタン自体の色が変わるようになってしまっているので、多摩の色が変わるようにしたいです。

②また、この色は現在RGB全ての色からランダムで出るようになっているので、5色（red,blue,lime,yellow,black)展開にしたいです。

③抽選の機械と玉のアニメーションがこのページを開くとすぐに実行されるようになっているので、ボタンを押すと同時に動くようにしたいです。

html
1 <body>
2<section>
3<div class="circle" id="js-circle"></div>
4
5
6<div id="draw-shapes" class="wrapper" />
7</section>
8
9<button type="button" id="backgroundchange">抽選スタート</type><br>
10</body>

css
1svg {
2  overflow: visible;
3}
4
5
6.circle {
7  width: 30px;
8  height: 30px;
9  position: absolute;
10  background:navy;
11  top: 210px;
12  left: 64.5%;
13  margin-left: -10px;
14  margin-top: -10px;
15  border-radius:100%;
16}

JS
1(function() {
2  
3//ガラガラ本体
4new mojs.Shape({
5  parent: '#draw-shapes',
6  shape: 'polygon',
7  points: 8, // 角の数
8  fill: 'none',
9  stroke: '#998265',
10  radius: 80,
11  top: '40%',
12  left: '50%',
13  strokeWidth: 180,
14  angle: { '-180': 0 },
15    duration: 3000,
16  easing: 'bounce.out',
17})
18
19.play();  
20
21//ガラガラ支え
22new mojs.Shape({
23  parent: '#draw-shapes',
24  shape: 'polygon',
25  radiusX: 50,
26  radiusY: 100,
27  top: '70%',
28  left: '50%',
29  fill: '#998265',
30  isShowStart: true,
31});
32
33//ガラガラ台
34new mojs.Shape({
35  parent: '#draw-shapes',
36  shape: 'rect',
37  radiusX: 250,
38  radiusY: 8,
39  top: '78%',
40  left: '60%',
41  fill: '#998265',
42  isShowStart: true,
43  });
44
45
46
47//くじの丸玉
48var circle = document.querySelector('#js-circle');
49new mojs.Tween({
50    parent: '#parent',
51    delay: 300,
52    speed: 0.28,
53    onUpdate: function(progress) {
54        var bounceProgress = mojs.easing.bounce.out(progress);
55        circle.style.transform = 'translateY(' + 200 * bounceProgress + 'px)';
56
57    }
58})
59  
60  
61.play();
62  
63  })();
64
65
66$(function($){
67$("#backgroundchange").on("click",function(){
68    let r = Math.floor(Math.random() * 255);
69    let g = Math.floor(Math.random() * 255);
70    let b = Math.floor(Math.random() * 255);
71    let color = "rgb(" + r + "," + g + "," + b + ")";
72 
73  $("button").css("background-color",color);
74     $("#backgroundchange").text("抽選スタート");
75 }); 
76 });

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
https://cdn.jsdelivr.net/mojs/latest/mo.min.js
を使用しています。

プログラミング初心者で、様々なサイトを検索していろいろ試してみましたがこれが限界でした。

最後まで読んでくださりありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

①
$("button")を玉の要素に変更するといいかと思います。

②
色キーワードを配列に詰めて、添え字に乱数を使うのがいいかと思います。
配列乱数 javascript - Google 検索

③

javascript
1$("#backgroundchange").on("click",function(){
2
3// ここに書くといいかと思います。
4
5})

投稿2021/07/19 01:06

Lhankor_Mhy

総合スコア36074

aiuyo

2021/07/19 02:18

ご回答ありがとうございます。無事に上手く動かすことができました。ありがとうございます！！！

Lhankor_Mhy

2021/07/19 02:56

お役に立てたようで何よりです。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

JavaScript　ガラポン抽選の機械を作りたいです。

関連した質問