diff options
| author | zhang <zch921005@126.com> | 2022-06-27 22:53:39 +0800 |
|---|---|---|
| committer | zhang <zch921005@126.com> | 2022-06-27 22:53:39 +0800 |
| commit | 9f484de76dde29c22237c8acad21fb27263b79a4 (patch) | |
| tree | baa867f1311b40385604dda1a576ac7ba78db429 /web/simu | |
| parent | 462bd2c944beed1667df30aa7fa626b972a5dfc9 (diff) | |
bert model
Diffstat (limited to 'web/simu')
| -rw-r--r-- | web/simu/gravity.html | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/web/simu/gravity.html b/web/simu/gravity.html new file mode 100644 index 0000000..8ea6df5 --- /dev/null +++ b/web/simu/gravity.html @@ -0,0 +1,118 @@ +<html lang=en> +<head> +<meta charset=utf-8> + <title>Javascript gravity</title> + </head> + <body onload="init()"> + + +<script> + var canvas, ctx, container; + canvas = document.createElement( 'canvas' ); + ctx = canvas.getContext("2d"); + var ball; + var message = "gravity simulator"; + + + // Velocity x + var vx = 5.0; + // Velocity y - randomly set + var vy; + + var gravity = 0.5; + var bounce = 0.7; + var xFriction = 0.1; + + function init(){ + setupCanvas(); + vy = (Math.random() * -15) + -5; + ball = {x:canvas.width / 2, y:100, radius:20, status: 0, color:"red"}; + + }//end init method + + function draw() { + ctx.clearRect(0,0,canvas.width, canvas.height); + //display some text + ctx.fillStyle = "blue"; + ctx.font = "20px Arial"; + ctx.fillText(message, 20,20); + + + + //draw cirlce + ctx.beginPath(); + ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2, false); + ctx.fillStyle = ball.color; + ctx.fill(); + ctx.closePath(); + + ballMovement(); + + } + + setInterval(draw, 1000/35); + + + + + function ballMovement(){ + ball.x += vx; + ball.y += vy; + vy += gravity; + + //If either wall is hit, change direction on x axis + if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0){ + vx *= -1; + } + + // Ball hits the floor + if (ball.y + ball.radius > canvas.height){// || + + // Re-positioning on the base + ball.y = canvas.height - ball.radius; + //bounce the ball + vy *= -bounce; + //do this otherwise, ball never stops bouncing + if(vy<0 && vy>-2.1) + vy=0; + //do this otherwise ball never stops on xaxis + if(Math.abs(vx)<1.1) + vx=0; + + xF(); + + } + + + } + + function xF(){ + if(vx>0) + vx = vx - xFriction; + if(vx<0) + vx = vx + xFriction; + } + + + + + + + function setupCanvas() {//setup canvas + + + container = document.createElement( 'div' ); + container.className = "container"; + + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + document.body.appendChild( container ); + container.appendChild(canvas); + + ctx.strokeStyle = "#ffffff"; + ctx.lineWidth =2; +} + + </script> + </body> +</html>
\ No newline at end of file |