第七讲: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两个小球全然弹性碰撞

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

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • adfs是什么_培训与开发的概念

    adfs是什么_培训与开发的概念(如您转载本文,必须标明本文作者及出处。如有任何疑问请与我联系me@nap7.com)ADFS相关开发技术的中文资料相对匮乏,之前在弄这个东西的时候搞的比较辛苦,因此总结此文档,以解后人之忧。本文会首先介绍与联合身份验证有关的概念及相关的系统设计意图,随后会对ADFS联合身份验证的配置过程、结构及处理流程进行阐述。然后会基于已有的系统提出一个支持多ADFS联合身份验证的改进实例…

    2022年10月27日
  • Highways「建议收藏」

    Highways「建议收藏」HighwaysTimeLimit:1000MS MemoryLimit:10000KTotalSubmissions:14613 Accepted:4211 SpecialJudgeDescriptionTheislandnationofFlatopiaisperfectlyflat.

    2022年4月26日
  • docker安装Lefse和分析流程[通俗易懂]

    docker安装Lefse和分析流程[通俗易懂]linux通过docker安装lefse默认你已经安装好docker!下载lefse镜像文件dockerrun-itbiobakery/lefsebash启动docker的lefse镜像,并且把主机文件夹挂载到镜像,这样可以在镜像中看到主机中的文件夹,下面是吧主机中的Data文件夹挂在到镜像(shared文件夹需要自己建),更改Data权限shared权限也会改变…

    2022年5月28日
  • mybatiscodehelperpro官网_iphone更新一直不安装怎么办

    mybatiscodehelperpro官网_iphone更新一直不安装怎么办MyabtisCodeHelperPro1.下载MyabtisCodeHelperPro对应的压缩文件链接:https://pan.baidu.com/s/15k91_tjyiAZNa_OwRmxYkQ提取码:4orm2.解压到电脑中的任意磁盘,以我的为例3.之后,打开idea,在file-settings-plugins中installed旁边的小按钮,选择InstallPluginfromDisk4.选择对应的版本,点击ok即可安装成功5.之后,在idea中选中tools-M

    2022年9月2日
  • jquery监听浏览器刷新_jQuery刷新浏览器页面大小

    jquery监听浏览器刷新_jQuery刷新浏览器页面大小jquery监听浏览器刷新基本代码段,用于在使用JavaScript调整浏览器大小的情况下刷新页面。//refreshpageonbrowserresize$(window).bind(‘resize’,function(e){console.log(‘windowresized..’);this.location.reload(false);/*false…

    2022年7月18日
  • JVM内存结构和Java内存模型别再傻傻分不清了

    JVM内存结构和Java内存模型别再傻傻分不清了JVM内存结构和Java内存模型都是面试的热点问题,名字看感觉都差不多,网上有些博客也都把这两个概念混着用,实际上他们之间差别还是挺大的。通俗点说,JVM内存结构是与JVM的内部存储结构相关,而Java内存模型是与多线程编程相关,本文针对这两个总是被混用的概念展开讲解。文章目录JVM内存结构JVM构成JVM内存结构程序计数器虚拟机栈本地方法栈堆方法区GC垃圾回收机制1.垃圾判别方法引用计数算法可达性分析算法2.垃圾回收算法标记清除法标记整理法复制算法3.分代垃圾回收机制4.垃圾回收器5.四种引

    2022年4月28日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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