const window_size = [window.innerWidth, window.innerHeight]; const meter = Math.min(...window_size)*0.2; const meter_mark_0 = 0.3; const ball_radius = 0.15; const ball_original_position = [meter_mark_0, 0.5+ball_radius]; var ball_position; var interval_time = 0.02; //seconds var ball_speed = 10; //m/s var g = 9.81; //m/s² var ball_velocity = []; var interval; var aiming = false; var simulating_throw = false; var throwing_angle; var pc; var first_throw = true; window.onload = function() { ball.style.width = ball.style.height = 2*ball_radius*meter+"px"; ground.style.height = 0.5*meter+"px"; ball.style.bottom = ball_original_position[1]*meter+"px" ball.style.left = angle_div.style.left = ball_original_position[0]*meter+"px"; angle_div.style.bottom = 1.6*meter+"px"; change_ground_width(); aim_line.style.height = 1*meter+"px"; aim_line.style.width = 0.02*meter+"px"; aim_line.style.left = (ball_original_position[0]-0.01)*meter+"px"; aim_line.style.bottom = ball_original_position[1]*meter+"px"; }; function throw_ball(angle=throwing_angle) { //0° = straight upwards; 90° = straight forward if(simulating_throw) return; simulating_throw = true; ball_velocity[0] = Math.sin(angle/180*Math.PI) * ball_speed; ball_velocity[1] = Math.cos(angle/180*Math.PI) * ball_speed; ball_position = [...ball_original_position]; aim_btn.innerHTML = "Simulating throw ..."; let bounces = 0; let highest_position; interval = setInterval(function(){ let bv = ball_velocity[1]; ball_velocity[1] -= g * interval_time; if(bv>=0 && ball_velocity[1] < 0) highest_position = Math.round(ball_position[1]*1000)/1000; ball_position[1] += ball_velocity[1] * interval_time; ball_position[0] += ball_velocity[0] * interval_time; ball.style.left = ball_position[0]*meter+"px"; ball.style.bottom = ball_position[1]*meter+"px"; if((ball_position[0] + ball_radius)*meter > window_size[0]*0.9) window.scrollTo((ball_position[0] - ball_radius)*meter - window_size[0]*0.9, 0); if(ball_position[1] <= 0.5+ball_radius) { ball.style.bottom = (0.5+ball_radius)*meter+"px"; ball_position[1] = 0.5+ball_radius; ball_velocity[1] *= -0.5; ball_velocity[0] *= 0.5; if(bounces == 0) ground.innerHTML += "

"+Math.round((ball_position[0]-ball_original_position[0])*100)/100+" m

"; bounces++; if(Math.hypot(...ball_velocity) < ball_speed*0.01 || bounces >= 15) { clearInterval(interval); aim_btn.innerHTML = (pc ? "Click":"Tap") + " here to start aiming."; if(first_throw) { first_throw = false; alert((pc ? "Click":"Tap") + " on the sign to see how high the ball flew."); } simulating_throw = false; settings_btn.style.display = "block"; } } }, interval_time*1000); } function start_aiming() { if(aiming || simulating_throw) return; aiming = true; ball.style.bottom = ball_original_position[1]*meter+"px" ball.style.left = ball_original_position[0]*meter+"px"; aim_btn.innerHTML = pc ? "Press the mouse button and move the mouse to aim." : "Move your finger to aim."; disable_scrolling(); settings_btn.style.display = "none"; } window.addEventListener("touchstart", function(event){ pc = false; if(!aiming || event.target.id == "aim_btn" || event.target.id == "settings_btn") return; let x = event.touches[0].clientX - ball_original_position[0]; let y = window_size[1] - event.touches[0].clientY - ball_original_position[1]; throwing_angle = Math.atan(x/y)*180/Math.PI; aim_line.style.display = angle_div.style.display = "block"; aim_line.style.transform = "rotate("+throwing_angle+"deg)"; angle_div.innerHTML = Math.round(throwing_angle*10)/10+"°"; }); window.addEventListener("touchmove", function(event){ if(!aiming || event.target.id == "aim_btn" || event.target.id == "settings_btn") return; let x = event.touches[0].clientX - ball_original_position[0]; let y = window_size[1] - event.touches[0].clientY - ball_original_position[1]; throwing_angle = Math.atan(x/y)*180/Math.PI; aim_line.style.transform = "rotate("+throwing_angle+"deg)"; angle_div.innerHTML = Math.round(throwing_angle*10)/10+"°"; }); window.addEventListener("touchend", function(event){ if(!aiming || event.target.id == "aim_btn" || event.target.id == "settings_btn") return; aiming = false; aim_line.style.display = angle_div.style.display = "none"; throw_ball(); disable_scrolling(false); }); window.addEventListener("mousedown", function(event){ if(pc === undefined) pc = true; if(!aiming || event.target.id == "aim_btn") return; let x = event.clientX - ball_original_position[0]; let y = window_size[1] - event.clientY - ball_original_position[1]; throwing_angle = Math.atan(x/y)*180/Math.PI; aim_line.style.display = angle_div.style.display = "block"; aim_line.style.transform = "rotate("+throwing_angle+"deg)"; angle_div.innerHTML = Math.round(throwing_angle*10)/10+"°"; }); window.addEventListener("mousemove", function(event){ if(!aiming || event.target.id == "aim_btn") return; let x = event.clientX - ball_original_position[0]; let y = window_size[1] - event.clientY - ball_original_position[1]; throwing_angle = Math.atan(x/y)*180/Math.PI; aim_line.style.transform = "rotate("+throwing_angle+"deg)"; angle_div.innerHTML = Math.round(throwing_angle*10)/10+"°"; }); window.addEventListener("mouseup", function(event){ if(!aiming || event.target.id == "aim_btn") return; aiming = false; aim_line.style.display = angle_div.style.display = "none"; throw_ball(); disable_scrolling(false); }); function disable_scrolling(value = true) { let divs = document.getElementsByTagName("div"); for(let i=0, l=divs.length; i old_speed) change_ground_width(); } function change_gravity() { let old_g = g; g = parseFloat(gravity_input.value); if(g < old_g) change_ground_width(); } function change_ground_width() { let gw = Math.ceil(ball_speed**2/g * (1+1/3)); let html = ""; for(let a=0; a<=gw; a++) html += "

"+a+"

"; ground.innerHTML += html; ground.style.width = (gw+0.5)*meter+"px"; } function change_interval_time() { interval_time = interval_time_input.value/1000; }

Ball throw simulation