Q&A
クリックするとボールが上から落ちていきます。落ちたあとのボールの軌道をランダムにしたいです。複数のボールを落とせるようにしたいです。
発生している問題・エラーメッセージ
特になし
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <link rel="stylesheet" href="style.css"> 8 <title>ボールを床に落下させる</title> 9</head> 10<body> 11 <canvas id="canvas" width="600" height="500"> 12 ブラウザが対応していません。 13 </canvas> 14 <script src="gravity.js"></script> 15 16</body> 17</html> 18
javascript
1 window.addEventListener('click', draw, false); 2function draw(){ 3 var x = 300, y = 0; // ボールの初期値 4 var vy = 0; // y軸方向の初期値 5 var R = 20; // ボールの半径 6 var gravity = 3; // 重力 7 var FRICTION = 0.75; // 跳ね返り係数 8 9 // キャスバス上の図形を消す 10 var canvas = document.getElementById('canvas'); 11 var ctx = canvas.getContext('2d'); 12 13 function loop(){ 14 ctx.clearRect(0, 0, canvas.clientWidth, canvas.height); // キャンバスの上の図形をクリアにする 15 16 vy += gravity; // 重力による速度の変化 17 y += vy; // y座標を動かす 18 19 if(y > canvas.height-R) { // 地面に到達したら 20 vy *= -1 * FRICTION; // 速度を反転して減速 21 y = canvas.height-R; // 座標を画面に戻す 22 if(Math.abs(vy) < gravity) { // 速度がある程度小さくなったら強制的に０にする 23 vy = 0; 24 } 25 } 26 ctx.beginPath(); 27 ctx.fillStyle = 'green'; 28 ctx.arc(x, y, R, 0, Math.PI * 2.0, true); 29 ctx.fill(); 30 requestAnimationFrame(loop); 31 } 32 loop(); 33} 34 35
css
1* { 2 margin: 0px; 3 padding: 0px 4} 5 6#canvas{ 7 background: #000; 8} 9
補足情報（FW/ツールのバージョンなど）
editor: Visual Studio code
browser: Google Chrome
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー
