canvas畫布在畫布中繪製2個小球在畫布中做碰壁反彈,當兩小球相撞之後,兩個小球交換速度

阿新 • • 發佈：2019-01-16

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#cv{
			border:1px solid;
		}
	</style>
</head>
<body>
	<canvas id="cv" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
	var ctx = cv.getContext("2d");
	function Arc(x,y,r,d="0",z=Math.PI*2,color,s,s1){
		this.x=x;
		this.y=y;
		this.r=r;
		this.d=d;
		this.z=z;
		this.color=color;
		this.s=s;
		this.s1=s1;
	}
	Arc.prototype.draw =function(){
		ctx.beginPath();
		ctx.moveTo(this.x,this.y);
		ctx.arc(this.x,this.y,this.r,this.d,this.z,this.color,this.s,this.s1);
		ctx.fillStyle=this.color;
		ctx.fill();
	}

	//生成隨機數
	function randomNum(min,max){
		return parseInt(Math.random()*(max-min+1)+min);
	}
	//生成隨機顏色
	function randomColor(){
		return "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")";
	}

	var arr =[];
	function createbox(){
		for(var i=0;i<2;i++){
			var box = new Arc(randomNum(100,300),randomNum(100,300),randomNum(30,50),0,Math.PI*2,randomColor(),randomNum(7,20),randomNum(7,20));
			box.draw();
			arr.push(box);
		}
		return box;
	}
	createbox();
	
	//小球碰壁反彈
		setInterval(function(){
			cv.width=cv.width;
			for(var i =0;i<arr.length;i++){	
				arr[i].x+=arr[i].s;
				if(arr[i].x>=cv.width-arr[i].r){
					arr[i].s*=-1;
				}
				if(arr[i].x-arr[i].r<=0){
					arr[i].s*=-1;
				}
				arr[i].y+=arr[i].s1;
				if(arr[i].y>=cv.height-arr[i].r){
					arr[i].s1*=-1;
				}
				if(arr[i].y-arr[i].r<=0){
					arr[i].s1*=-1;
				}
				arr[i].draw();	

				var  r1x = arr[0].x;
				var  r1y = arr[0].y;
				var  r1 =  arr[0].r;

				var  r2x = arr[1].x;
				var  r2y = arr[1].y;
				var  r2 =  arr[1].r;

				//碰撞
				if(Math.pow((r2x-r1x),2)+Math.pow((r2y-r1y),2)<=Math.pow((r2+r1),2)){
					console.log("碰撞");
					var temp1 = arr[0].s;
					var temp2 = arr[0].s1;
					arr[0].s=arr[1].s;
					arr[0].s1=arr[1].s1;
					arr[1].s=temp1;
					arr[1].s1=temp2;
				}	
			}
		},50)
</script>
</html>


</script>
</html>

canvas畫布在畫布中繪製2個小球在畫布中做碰壁反彈,當兩小球相撞之後,兩個小球交換速度

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <s

老男孩教育每日一題-第84天-兩個文件，把第一個文件中的第2、3行內容添加到第二個文件的第3行後面

每日一題兩個文件如下：[[email protected]/* */ ~]# cat 1.txt 111 222 333 [[email protected]/* */ ~]# cat 2.txt AAA bbb ccc ddd要求修改後的文件[[email protect

輸入兩個整數n和m，從數列1,2,3，……n中隨意取幾個數，使其和等於m 轉載

輸出 -1 pri str spa private 組合開始 () 題目：編程求解，輸入兩個整數n和m,從數列1,2,3，……n中隨意取幾個數，使其和等於m。要求將所有的可能組合列出來。分析：分治的思想。可以把問題(m,n)拆分(m - n, n -1)和(m, n -

WebGL樹形結構的模型渲染流程原生WebGL場景中繪製多個圓錐圓柱原生WebGL場景中繪製多個圓錐圓柱

　　今天和大家分享的是webgl渲染樹形結構的流程。用過threejs，babylonjs的同學都知道，一個大模型都是由n個子模型拼裝而成的，那麼如何依次渲染子模型，以及渲染每個子模型在原生webgl中的流程是怎樣的呢，我就以osg框架為原本，為同學們展示出來。　　首先介紹osg框架，該框架是基於open

HTML5 Canvas中繪製橢圓的幾種方法

1.canvas自帶的繪製橢圓的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是後來新增的，引數的意思：(起點x.起點y,半徑x,半徑y,旋轉的角度，起始角，結果角，順時針還是逆時針)

Matlab一個視窗中繪製多個圖形

subplot指令將影象視窗分成若干個區域,在每個區域內分別繪圖. handle = subplot(m, n, p); 上述指令將影象劃分為 m*n 個子區域, p用於指向子區域. 順序為 1 2 3 … n n+1 n+2 n+3 2n ……………………………………..

在Microsoft Expression Blend 2 中繪製圓角矩形按鈕

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

Canvas中繪製貝塞爾曲線

① 什麼是貝塞爾曲線？在數學的數值分析領域中，貝濟埃曲線（英語：Bézier curve，亦作“貝塞爾”）是計算機圖形學中相當重要的引數曲線。更高維度的廣泛化貝濟埃曲線就稱作貝濟埃曲面，其中貝濟埃三角是一種特殊的例項。貝濟埃曲線於1962年，由

輸入2個字串s1和s2，並拼接成一個新的字串，新字串中只包含s1和s2中所有小寫字母，並且按照字母從小到大排序

#include<stdio.h> #include <stdlib.h> #include<string.h> char *str_merge(char *s1,

給出一個分治演算法來找出n個元素序列中第2大的元素

題目：給出一個分治演算法來找出n個元素序列中的第2大的元素。如果不是題目要求用分治法，用遍歷或排序都比這個分治法要快。下面說說解題思路吧解題思路：當序列A[1..n]中元素的個數n=2時，通過直接比較即可找出序列的第2大元素。當n>2時，先求出序列A[1..n-

canvas中繪製文字

canvas提供兩種文字渲染方式： fillText(text,x,y[,maxWidth]); // 在指定的（x,y）處填充文字，繪製的最大寬度是可選的 strokeText(text,x,y[,m

CSU 1323 求一堆數中取出2個異或使得異或值大於某個數

zzy養了一隻小怪獸和N只凹凸曼，單挑的話每隻凹凸曼都不是小怪獸的對手，所以必須由兩隻凹凸曼合作來和小怪獸戰鬥。凹凸曼A和凹凸曼B合作的戰鬥力為他們戰鬥力的異或值。現在由zzy從N只凹凸曼中選出兩隻來和小怪獸戰鬥。請問zzy能否選出兩隻凹凸曼使他們能夠戰勝小怪獸(他們的戰鬥力比小怪獸大)。

淺談struts2標籤中的2個很常用的標籤的用法（radio和select）

1.如圖所示我們需要在前臺的頁面通過radio和select將對應的資料庫中的資料顯示到選項當中，這也是我們做專案中經常需要做的，動態的顯示，而不是靜態的顯示。首先我們需要在頁面中匯入str

演算法--中興面試：輸入兩個整數 n 和 m，從數列1，2，3.......n 中隨意取幾個數, 使其和等於 m

Q題目程式設計求解輸入兩個整數 n 和 m，從數列1，2，3…….n 中隨意取幾個數, 使其和等於 m ,要求將其中所有的可能組合列出來. Answer解法這道題就是一道典型的動態規劃問題了，思路和揹包問題差不多，m就相當於揹包能容納的

深度學習（2）--深度學習中的這25個概念

神經網路基礎1）神經元（Neuron）——就像形成我們大腦基本元素的神經元一樣，神經元形成神經網路的基本結構。想象一下，當我們得到新資訊時我們該怎麼做。當我們獲取資訊時，我們一般會處理它，然後生成一個輸出。類似地，在神經網路的情況下，神經元接收輸入，處理它併產生輸出，而這個輸

程式設計求解，輸入兩個整數n和m,從數列1,2,3，……n中隨意取幾個數，使其和等於m。要求將所有的可能組合列出來（揹包問題求解） .

程式設計求解，輸入兩個整數n和m,從數列1,2,3，……n中隨意取幾個數，使其和等於m。要求將所有的可能組合列出來。實際上就是一個揹包問題。求解思路： 1.首先判斷，如果n>m，則n中大於m的數不可能參與組合，此時置n = m; 2.將最大數n加入且n == m,則

輸入兩個整數 n 和 m，從數列1，2，3.......n 中隨意取幾個數

問題描述：輸入兩個整數n和m，從數列1，2.......n中隨意取幾個數，使其和等於m，要求將其中所有的可能組合列出來。思路：這個問題其實揹包問題的變形，本文給出兩種解法。解法一：用遞迴，效率可能低了點。假設問題的解為F(n, m)，可分解為兩個子

一個qml檔案用來在另外一個qml檔案中生成2個物件，重用qml檔案作為元件

在工作中遇到一些情況，寫了一個 Dialog.qml檔案，想在Use.qml中多次使用他，並改變Dialog.qml中的一些控制元件的各種屬性，上網瞭解了一些資料和自己實踐總結出3中方法吧。 1. ** 如果想要在A.qml中呼叫B.qml中的butt

HTML5 Canvas中繪製線段

繪製線段呼叫lineTo()方法繪製線段。lineTo(x, y)方法把當前點和lineTo()方法指定的點(x, y)用線段連線起來。如果要繪製多條線段，可以重複呼叫該方法。第一次呼叫，當前點為子路徑的起點，以後每次呼叫，都會把上一次的終點作為本次的起點。我們使用lineT

《已測試通過》輸入兩個整數 n 和 m，從數列1，2，3.......n 中隨意取幾個數,使其和等於m ,要求將其中所有的可能組合列出來，並且按每個組合的字典序排列輸出,每行輸出一種組合

參考網上很多，瑪德都不測試的嗎？就貼出來了？浪費時間。網際網路精神在哪！！！ import java.util.ArrayList; import java.util.Comparator; import java.util.LinkedList; import java.util.Scanne

canvas畫布在畫布中繪製2個小球在畫布中做碰壁反彈,當兩 小球相撞之後,兩個小球交換速度

相關推薦

canvas畫布在畫布中繪製2個小球在畫布中做碰壁反彈,當兩小球相撞之後,兩個小球交換速度