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

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

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

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


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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118899.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Python一键导入所有第三方库requirements

    Python一键导入所有第三方库requirements

  • parallel循环java_Java 8 lambda stream forEach parallel 等循环与Java 7 for each 循环耗时测试…[通俗易懂]

    parallel循环java_Java 8 lambda stream forEach parallel 等循环与Java 7 for each 循环耗时测试…[通俗易懂]Java8里面的stream有串行流和并行流之分。说高级的stream就是那个并行流。下面是那个并行流的简单实现。只要是继承Collection类的都可以这么用。list.stream().parallel()list.parallelStream()先看代码和运行结果,再解释一下,这个并行串行流之间的差别。packagecom.lxk.lambdaTest;importcom.goog…

  • 【OpenCV 例程200篇】02. 图像的保存(cv2.imwrite)

    【OpenCV 例程200篇】02. 图像的保存(cv2.imwrite)2.图像的保存函数cv2.imwrite()用于将图像保存到指定的文件。函数说明:retval=cv2.imwrite(filename,img[,paras])cv2.imwrite()将OpenCV图像保存到指定的文件。cv2.imwrite()基于保存文件的扩展名选择保存图像的格式。cv2.imwrite()只能保存BGR3通道图像,或8位单通道图像、或PNG/JPEG/TIFF16位无符号单通道图像。参数说明:filename:要保

  • phpstorm激活码 、[最新免费获取]

    (phpstorm激活码 、)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~C…

  • Wi-Fi 2.4G 和 5G 信道列表

    Wi-Fi 2.4G 和 5G 信道列表美洲(FCC)2.412~2.462GHz:11个信道5.15~5.35GHz,5.725~5.825GHz;12个信道中国2.412~2.472GHz:13个信道5.725~5.825GHz:4个信道ETSI2.412~2.472GHz:13个信道5.15~5.35GHz:8个信道5470

  • 利用flex实现元素水平垂直居中[通俗易懂]

    利用flex实现元素水平垂直居中[通俗易懂]首先介绍一下flex布局。采用Flex布局的元素,称为Flex容器(flexcontainer),简称“容器”。它的所有子元素自动成为容器成员,成为flex项目(flexitem),简称“项目”。容器默认存在两根轴:水平的主轴(mainaxis)和垂直的交叉轴(crossaxis)。主轴的开始位置(与边框的交叉点)叫做mainstart,结束位置叫做mainend;交叉轴的开始…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号