Shulou(Shulou.com)06/01 Report--

Editor to share with you how to achieve bouncing ball html5, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

The code is as follows:

Jumping ball / / boxvar box_x=0;var box_y=0;var box_width=300;var box_height=300;// Note: the central var ball_x=10;var ball_y=10;var ball_radius=10;var ball_vx=5;var ball_vy=3;var box_bound_left=box_x+ball_radius;var box_bound_right=box_x+box_width-ball_radius;var box_bound_top=box_y+ball_radius;var box_bound_bottom=box_y+box_height-ball_radius;//ball//contextvar ctx of the ball is used for set-pieces. Function init () {ctx=document.getElementById ('canvas'). GetContext (' 2d'); ctx.lineWidth=ball_radius;ctx.fillStyle= "rgb (200Yue0Power50)"; move_ball (); setInterval (move_ball,100); / / note} function move_ball () {ctx.clearRect (box_x,box_y,box_width,box_height); move_and_check (); ctx.beginPath (); ctx.arc (ball_x,ball_y,ball_radius,0,Math.PI*2,true) Ctx.fill (); ctx.strokeRect (box_x,box_y,box_width,box_height);} function move_and_check () {var cur_ball_x=ball_x+ball_vx;var cur_ball_y=ball_y+ball_vy;if (cur_ball_xbox_bound_right) {ball_vx=-ball_vx;cur_ball_x=box_bound_right;} if (cur_ball_ybox_bound_bottom) {ball_vy=-ball_vy;cur_ball_y=box_bound_bottom;} ball_x=cur_ball_x Ball_y=cur_ball_y;} these are all the contents of the article "how to achieve bouncing Ball in html5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.