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

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

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

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

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

Q&A

解決済

1回答

1145閲覧

Canvasの雨の跳ね返りに高さを出したい

erp

総合スコア46

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

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

0グッド

0クリップ

投稿2020/09/23 12:14

編集2020/09/24 03:22

前提・実現したいこと

Canvasの雨の跳ね返りに高さを出したい。

色々弄ってみたのですが、跳ね返りの高さが高くなりません。お力をお貸しください。
私のソースコードではこれで動いているのですが、別のページでは動きませんでした。
元となったcodepenのソースを載せます(https://codepen.io/Capse/pen/WQrJxO)です。こちらの、GUI、fpsmeterの記述を抜いて使っています。

該当のソースコード

HTML

1 <!-- baackground --> 2 <canvas id="canvas"></canvas> 3 4 <!--script--> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 6 <script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script> 7 <script src="assets/js/main.js"></script>

CSS

1#canvas { 2 position: fixed; 3 z-index: -900 !important; 4 top: 0; 5 left: 0; 6 width: 100%; 7 height: 100vh; 8}

javascript

1// rain 2window.requestAnimFrame = function () 3{ 4 return ( 5 window.requestAnimationFrame || 6 window.webkitRequestAnimationFrame || 7 window.mozRequestAnimationFrame || 8 window.oRequestAnimationFrame || 9 window.msRequestAnimationFrame || 10 function ( /* function */callback) { 11 window.setTimeout(callback, 1000 / 60); 12 }); 13 14}(); 15 16/** DAT GUI **/ 17var guiControls = new function () { 18 19 this.iMaxDrop = 2000; 20 21 this.speed = 80; 22 23 this.wind = 0; 24 25 this.mouseBlock = 100; 26 27}(); 28 29/** global vars **/ 30var oSize = { 31 h: document.body.clientHeight, 32 w: document.body.clientWidth }; 33 34var oMouse = { 35 x: -500, 36 y: -500 }; 37 38var oCanvas = document.getElementById('canvas'); 39var oCanvasCtx = oCanvas.getContext('2d'); 40 41oCanvas.height = oSize.h; 42oCanvas.width = oSize.w; 43 44 45 46 47 48 49update_mouse = function (_e) { 50 51 oMouse.y = _e.pageY; 52 oMouse.x = _e.pageX; 53 54}; 55onresize = function () { 56 oSize.w = oCanvas.width = window.innerWidth; 57 oSize.h = oCanvas.height = window.innerHeight; 58}; 59document.addEventListener('onresize', onresize, false); 60document.addEventListener('mousemove', update_mouse, false); 61window.onresize(); 62 63 64 65 66 67function drops() { 68 69 this.aDrops = []; 70 this.aExplode = []; 71 72 73 if (typeof drops.initialized == "undefined") { 74 75 drops.prototype.rand = function (min, max) 76 { 77 78 return Math.random() * (max - min) + min; 79 80 }; 81 82 drops.prototype.check_drop_collision = function (drop) 83 { 84 85 var radius = guiControls.mouseBlock; 86 87 var dx = oMouse.x - drop.x; 88 var dy = oMouse.y - drop.y; 89 var distance = Math.sqrt(dx * dx + dy * dy); 90 91 // detection collion circle 92 if (distance < radius) 93 return true;else 94 95 return false; 96 97 }; 98 99 drops.prototype.check_explode = function (drop) { 100 101 if (drop.y > oSize.h) 102 return true;else 103 104 return false; 105 106 }; 107 108 109 110 drops.prototype.add_explode = function (drop) { 111 112 var nb = this.rand(3, 10); 113 114 for (var i = 0; i < nb; i++) { 115 116 this.aExplode.push(this.build_explod(drop)); 117 118 }; 119 120 }; 121 122 drops.prototype.build_explod = function (drop) 123 { 124 125 var y = drop.y > oSize.h ? oSize.h - 1 : drop.y; 126 127 oExpl = { 128 129 x: drop.x, 130 131 speedx: this.rand(-2, 2), 132 133 y: y, 134 135 speedy: this.rand(1, 3), 136 137 r: this.rand(5, 10) / 10, 138 139 a: drop.a, 140 141 speeda: this.rand(3, 8), 142 143 intens: -5, 144 145 ampl: this.rand(6, 15), 146 147 freq: this.rand(10, 15) }; 148 149 150 151 152 return oExpl; 153 154 }; 155 156 157 158 drops.prototype.addDrop = function () 159 { 160 161 this.aDrops.push(this.build_drop()); 162 163 }; 164 165 drops.prototype.build_drop = function () 166 { 167 168 169 oDrop = { 170 171 x: this.rand(-100, oSize.w + 100), 172 173 y: -this.rand(100, 400), 174 175 h: this.rand(10, 25), 176 177 a: this.rand(10, 20), 178 179 speedy: this.rand(guiControls.speed / 2.5, guiControls.speed), 180 181 speedx: guiControls.wind }; 182 183 184 185 return oDrop; 186 187 }; 188 189 190 drops.prototype.update_rain = function () { 191 192 var resetDrop = this.build_drop.bind(this); 193 var check_exp = this.check_explode.bind(this); 194 var do_exp = this.add_explode.bind(this); 195 var check_mouse = this.check_drop_collision.bind(this); 196 var length = this.aDrops.length; 197 198 199 for (var i = this.aDrops.length - 1; i >= 0; i--) { 200 201 this.aDrops[i]; 202 203 this.aDrops[i].x = this.aDrops[i].x + this.aDrops[i].speedx; 204 205 this.aDrops[i].y = this.aDrops[i].y + this.aDrops[i].speedy / 2; 206 207 if (check_exp(this.aDrops[i])) 208 do_exp(this.aDrops[i]); 209 210 if (check_mouse(this.aDrops[i])) { 211 212 do_exp(this.aDrops[i]); 213 //drop = resetDrop(); 214 if (this.aDrops[i].x < oMouse.x) { 215 216 this.aDrops[i].x = oMouse.x - guiControls.mouseBlock; 217 this.aDrops[i].y--; 218 219 } else 220 { 221 222 this.aDrops[i].x = oMouse.x + guiControls.mouseBlock; 223 this.aDrops[i].y++; 224 225 } 226 227 } 228 229 if (check_exp(this.aDrops[i]) && length < guiControls.iMaxDrop) 230 this.aDrops[i] = resetDrop(); 231 232 if (this.aDrops[i].y > oSize.h && length >= guiControls.iMaxDrop) 233 this.aDrops.splice(i, 1); 234 235 236 }; 237 238 }; 239 240 241 242 drops.prototype.update_expl = function () 243 { 244 245 246 for (var i = this.aExplode.length - 1; i >= 0; i--) { 247 248 this.aExplode[i].x = this.aExplode[i].x + this.aExplode[i].speedx; 249 250 this.aExplode[i].y = this.aExplode[i].ampl * Math.sin(this.aExplode[i].intens / this.aExplode[i].freq) + this.aExplode[i].y; 251 252 this.aExplode[i].intens++; 253 254 this.aExplode[i].a = this.aExplode[i].a - this.aExplode[i].speeda / 10; 255 256 257 if (this.aExplode[i].a <= 0) 258 this.aExplode.splice(i, 1); 259 260 }; 261 262 }; 263 264 265 266 drops.prototype.draw = function (ctx) 267 { 268 269 for (var i = this.aDrops.length - 1; i >= 0; i--) { 270 271 272 ctx.beginPath(); 273 ctx.moveTo(this.aDrops[i].x, this.aDrops[i].y); 274 ctx.lineTo(this.aDrops[i].x + guiControls.wind, this.aDrops[i].y + this.aDrops[i].h); 275 ctx.strokeStyle = 'rgba(255,255,255,1)'; 276 ctx.stroke(); 277 278 }; 279 280 for (var i = this.aExplode.length - 1; i >= 0; i--) { 281 282 283 ctx.beginPath(); 284 ctx.arc(this.aExplode[i].x, this.aExplode[i].y, this.aExplode[i].r, 0, 3 * Math.PI); 285 ctx.fillStyle = 'rgba(255,255,255,1)'; 286 ctx.fill(); 287 288 }; 289 290 }; 291 292 293 294 295 drops.initialized = true; 296 } 297 298 299 300} 301 302var oRain = new drops(); 303 304 305/** ANIMATION **/ 306function render() { 307 308 oCanvasCtx.clearRect(0, 0, oSize.w, oSize.h); 309 310 if (oRain.aDrops.length < guiControls.iMaxDrop) 311 oRain.addDrop(); 312 313 oRain.update_rain(); 314 315 oRain.update_expl(); 316 317 oRain.draw(oCanvasCtx); 318 319 requestAnimationFrame(render); 320} 321render(); 322//# sourceURL=pen.js 323 324

試したこと

update_rainのあたりかな、と弄ってはいるのですが、変わりません。Canvasに詳しい方、ご教示ください。

補足情報

Firefox最新バージョン

ここにより詳細な情報を記載してください。

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

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

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

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

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

kuma_kuma_

2020/09/23 19:21

いただいたソースだけでは動かすことができません。 > assets/js/main.js このファイルの中身または正確なURLを教えてください。
guest

回答1

0

ベストアンサー

元となったcodepenのソースをスマホで適当に
弄ってたら見つけました。

intens : -5,

ここの数値を変更すると跳ね返りの高さが変わりました。

投稿2020/09/28 19:52

Jon_do

総合スコア1373

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

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

erp

2020/09/29 14:41

ありがとうございます。早速試したところ、思ったように動かせました。大変助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問