第七讲: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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Word——Word在试图打开文件时遇到错误的一种解决办法

    Word——Word在试图打开文件时遇到错误的一种解决办法Word在试图打开文件时遇到错误的一种解决办法一、遇到的情况二、解决办法 1.将此word文件压缩 2.删除此word文档 3.将压缩包解压一、遇到的情况二、解决办法 1.将此word文件压缩 2.删除此word文档 3.将压缩包解压…

    2022年6月11日
    38
  • 实现一个div的拖拽效果_js如何实现拖拽和上下移动

    实现一个div的拖拽效果_js如何实现拖拽和上下移动公司要开一个技术分享会,给我们出了几个简单的题去实现,其中有如何实现表格中列之间的拖拽,我知道html5中有个新方法可以实现,但是没有认真学习,现在闲了去学学,发现关于drag和drop的文章有很多,

    2022年8月3日
    4
  • 贴片DO-218AB封装TVS二极管SM8T33A

    贴片DO-218AB封装TVS二极管SM8T33A提及“汽车级瞬态二极管”,大多数电子工程师都会想到DO-218AB封装SM8S系列中的SM8S24V、SM8S33A、SM8S36A、SM8S36CA等等,这些物料常用于汽车12V系统和24系统中,可通过抛负载7637-5a/5b测试,为汽车电子产品安全保驾护航。关于汽车级瞬态TVS二极管SM8T系列,知道的电子工程师并不多,但是经常有客户咨询:SM8T系列型号有哪些?SM8T33A二极管参数?SM8T36A可以替代SM8S36A吗?SM8T24CA和SM8S24CA有什么区别……瞬态二极管厂家东沃电子

    2022年9月23日
    6
  • 基于C语言的图书管理系统_c语言图书管理系统课程设计报告

    基于C语言的图书管理系统_c语言图书管理系统课程设计报告该系统包括以下功能:1、注册账号2、登录账号3、修改密码4、录入功能5、添加功能6、删除功能7、修改功能8、浏览功能9、查询密码10、排序功能

    2022年10月11日
    3
  • macpycharm2022.01激活码[最新免费获取]

    (macpycharm2022.01激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.htmlCJM5ZJBPHS-eyJsaWNlbnNlSW…

    2022年3月31日
    192
  • readandwritelock_读写锁使用场景

    readandwritelock_读写锁使用场景ReadWriteLock管理一组锁,一个是只读的锁,一个是写锁。读锁可以在没有写锁的时候被多个线程同时持有,写锁是独占的。所有读写锁的实现必须确保写操作对读操作的内存影响。换句话说,一个获得了读锁的线程必须能看到前一个释放的写锁所更新的内容。读写锁比互斥锁允许对于共享数据更大程度的并发。每次只能有一个写线程,但是同时可以有多个线程并发地读数据。ReadWriteLock适用于读多写少的并发

    2022年8月12日
    8

发表回复

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

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