大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。
<html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script> </head> <body> <canvas id="mc" width="1200px" height="600px"> </canvas> <script type="text/javascript"> var canvas = document.getElementById('mc'); var cxt = canvas.getContext('2d'); //设置画布背景颜色 cxt.fillStyle = "#030303"; cxt.fillRect(0, 0, canvas.width, canvas.height); var cyc = 20; var balls = []; //定义一个向x轴正前方运动 var ball_1 = { x:100, y:550, r:50, vx:500, vy:0 }; //定义一个向x轴反方向运动 var ball_2 = { x:1000, y:550, r:50, vx:-400, vy:0 }; balls.push(ball_1); balls.push(ball_2); cxt.fillStyle = "#030303"; cxt.fillRect(0,0,canvas.width,canvas.height); //画出两个小球 function init () { cxt.fillStyle = "#fff"; for(var i in balls){ cxt.beginPath(); cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); } } init(); var ct //动态绘出小球相碰撞的情形 var somethingAsync = eval(Jscex.compile("async", function (ct) { while (true) { cxt.fillStyle = "rgba(0,0,0,1)"; cxt.fillRect(0,0,canvas.width,canvas.height); cxt.fillStyle = "#fff"; //小球运动 for(var i in balls){ balls[i].x += balls[i].vx *cyc /1000; cxt.beginPath(); cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); //小球触碰左右两个墙壁 if(balls[i].x + balls[i].r >= canvas.width || balls[i].x <= balls[i].r){ balls[i].vx *= -1; } } //推断两个小球是否相互碰撞 if(Math.abs(ball_1.x - ball_2.x) <= 2*50){ var temp = ball_1.vx; ball_1.vx = ball_2.vx; ball_2.vx = temp; } $await(Jscex.Async.sleep(cyc,ct)); } })); //手动控制小球的运动 function Button1_onclick() { ct.cancel(); } function Button2_onclick() { ct = new Jscex.Async.CancellationToken(); somethingAsync(ct).start(); } </script> <br> <br /> <br /> <input id="Button2" class="css3btn" type="button" value="run" onclick="return Button2_onclick()" /> <input id="Button1" class="css3btn" type="button" value="stop" onclick="return Button1_onclick()" /> </body> </html>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118899.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...