書き起こしたJSが動きません。どこに問題があるか知りたいです。

とある既存のJavascriptを実際に自分の手で打ってみたのですが、どこを見直しても動きません。
自分で解決できなかったので、どこに問題があるかをご教授いただけますと幸いです。

完成すると雪のアニメーションが見られるみたいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>雪のアニメーション</title>
8</head>
9<body>
10  <script src="ryan.js"></script>
11</body>
12</html>

JavaScript
1var canvas = document.querySelector('.snow'),
2ctx = canvas.getContext('2d'),
3windowW = window.innerWidth,
4windowH = window.innerHeight,
5numFlakes = 200,
6flakes = [];
7
8function Flake(x,y){
9  var maxWeight = 5,
10  maxSpeed = 3;
11
12
13this.x = x;
14this.y = y;
15this.r = randomBetween(0,1),
16this.a = randomBetween(0,Math.PI);
17this.aStep = 0.01;
18
19this.weight = randomBetween(2,maxWeight);
20this.alpha = (this.weight/maxWeight);
21this.speed = (this.weight/maxWeight) * maxSpeed;
22
23this.update = function(){
24  this.x += Math.cos(this.a)* this.r;
25  this.a += this.aStep;
26
27  this.y += this.speed;
28}
29
30}
31
32function init(){
33  var i = numFlakes,
34  flake,
35  x,
36  y;
37
38  while(i--){
39    x = randomBetween(0,windowW,true);
40    y = randomBetween(0,windowH,true);
41
42    flake = new Flake(x,y);
43    flakes.push(flake);
44  }
45
46  scaleCanvas();
47  loop;
48}
49
50function scaleCanvas(){
51  canvas.width = windowW;
52  canvas.height = windowH;
53}
54
55function loop(){
56  var i = flakes.length,
57  z,
58  dist,
59  flakeA;
60  flakeB;
61
62  // clear canvas
63  ctx.save();
64  ctx.setTransform(1,0,0,1,0,0);
65  ctx.clearRect(0,0,windowW,windowH);
66  ctx.restore();
67
68  //loop of hell
69  while(i--){
70    
71    flakeA = flakes[i];
72    flakeA.update();
73
74  ctx.beginPath();
75  ctx.arc(flakeA.x,flakeA.y,flakeA.weight,0,2*Math.PI,false);
76  ctx.fillStyle = 'rgba(255,255,255)' + flakeA.alpha + ')';
77  ctx.fill();
78
79  if(flakeA.y >= windowH){
80    flakeA.y = -flakeA.weight;
81  }
82  }
83
84  requestAnimationFrame(loop);
85  }
86
87  function randomBetween(min,max,round){
88    var num = Math.random() *(max - min + 1) + min;
89
90    if(round){
91      return Math.floor(num);
92    }else{
93      return num;
94    }
95  }
96  function distanceBetween(vector1,vector2){
97    var dx = vector2.x - vector1.x,
98    dy = vector2.y - vector1.y;
99
100    return Math.sqrt(dx*dx + dy*dy);
101  }
102
103  init();
104  var canvas = document.querySelector('.snow'),
105  ctx = canvas.getContext('2d'),
106  windowW = window.innerWidth,
107  windowH = window.innerHeight,
108  numFlakes = 200,
109  flakes = [];
110
111  function Flake(x,y){
112    var maxWeight = 5,
113    maxSpeed = 3;
114
115this.x = x;
116this.y = y;
117this.r = randomBetween(0,1),
118this.a = randomBetween(0,Math.PI);
119this.aStep = 0.01;
120
121this.weight = randomBetween(2,maxWeight);
122this.alpha = (this.weight/maxWeight);
123this.speed = (this.weight/maxWeight) * maxSpeed;
124
125this.update = function(){
126  this.x += Math.cos(this.a)* this.r;
127  this.a += this.aStep;
128
129  this.y += this.speed;
130  }
131
132}
133
134function init(){
135  var i = numFlakes,
136  flake,
137  x,
138  y;
139
140  while(i--){
141    x = randomBetween(0,windowW,true);
142    y = randomBetween(0,windowH,true);
143
144    flake = new Flake(x,y);
145    flakes.push(flake);
146  }
147  scaleCanvas();
148  loop();
149}
150
151function scaleCanvas(){
152  canvas.width = windowW;
153  canvas.height = windowH;
154}
155
156function loop(){
157  var i = flakes.length,
158  z,
159  dist,
160  flakeA,
161  flakeB;
162
163  ctx.save();
164  ctx.setTransform(1,0,0,1,0,0);
165  ctx.clearRect(0,0,windowW,windowH);
166  ctx.restore();
167
168  while(i--){
169    flakeA = flakes[i];
170    flakeA.update();
171
172    
173  ctx.beginPath();
174  ctx.arc(flakeA.x,flakeA.y,flakeA.weight,0,2*Math.PI,false);
175  ctx.fillStyle = 'rgba(255,255,255)' + flakeA.alpha + ')';
176  ctx.fill();
177
178  if(flakeA.y >= windowH){
179    flakeA.y = -flakeA.weight;
180  }
181  }
182
183  requestAnimationFrame(loop);
184  }
185
186  function randomBetween(min,max,round){
187    var num = Math.random() *(max - min + 1) + min;
188
189    if(round){
190      return Math.floor(num);
191  }else{
192    return num;
193  }
194}
195
196function distanceBetween(vector1,vector2){
197  var dx = vector2.x - vector1.x,
198  dy = vector2.y - vector1.y;
199
200  return Math.sqrt(dx*dx + dy*dy);
201}
202
203init();
204
205

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

回答1件

ベストアンサー

canvasを追加すればよいと思います。

html
1略
2<body>
3  <canvas class="snow"></canvas>
4  <script src="ryan.js"></script>
5</body>
6略

投稿2022/08/07 04:08

編集2022/08/07 04:08

退会済みユーザー

総合スコア0

kyouyuushimasu

2022/08/07 06:40

動きました！ありがとうございます！！！！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

書き起こしたJSが動きません。どこに問題があるか知りたいです。

関連した質問