第七讲：HTML5中的canvas两个小球全然弹性碰撞

全栈程序员-站长 • 2021年11月29日下午4:00 • 未分类 • 阅读 36

大家好，又见面了，我是全栈君，祝每个程序员都可以多学几门语言。

<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>