寫在最前

看了canvas的動畫系列，已經(jīng)抑制不住內(nèi)心的沖動想寫個小游戲了，還是那個套路——多寫寫，你才能了解它。加上這兩天下班后我都沒有機會去摸摸籃球，所以就寫了個接球的小游戲（準(zhǔn)確的說不能叫游戲，太簡單了，叫動畫吧...）。 都是一些基礎(chǔ)的實現(xiàn)，有時間你也可以試試，廢話說到這里，我們開始吧。

git地址

https://github.com/ry928330/ballGame.git

成果展示

實現(xiàn)思路

這里我們采用疑問的句式給出實現(xiàn)的思路（步驟），因為我寫這個demo的時候也是這樣去想的：

- canvas上畫一個小球，如何動起來？

- canvas上畫一個橫條兒，如何像在DOM上那樣去拖動它？

- 如何實現(xiàn)游戲上面的小方塊兒的繪制與刪除？

- 碰撞問題：小球與canvas邊界之間怎么去判斷碰撞？小球與小橫條之間怎么去判斷碰撞？小球與上方的小方塊兒之間怎么去判斷碰撞？（其實原理差不多）

主要就是這4步的實現(xiàn)，然后把他們串接起來，你的簡單接球小動畫就實現(xiàn)了。

詳細說明

如何讓小球動起來

其實這部分是比較簡單的canvas動畫，一個基本的動畫步驟可以歸納為以下幾個過程：

1.清除canvas：在每次畫新的圖形的時候，你都必須將之前的圖形給清理掉，這樣才有那種一幀一幀的重繪的感覺。

2.保存當(dāng)前的state：在你沒走一步時，你都需要將你當(dāng)前的canvas狀態(tài)給保存下來，狀態(tài)包括：當(dāng)前圖形的位置（x,y軸的信息），當(dāng)前圖形的大小（寬高信息），當(dāng)前圖形的變化（也就是你對他做了拉伸，角度變化等等）等信息。

3.重新渲染你在當(dāng)前位置所要繪制的圖形，也就是把你現(xiàn)在想畫的東西給它畫在你的canvas上。

4.恢復(fù)canvas的狀態(tài)，因為你之間對canvas的信息做了入棧保存，所以此時你必須restore它。

你以為這樣就可以了嗎？哈哈哈，并沒有。加入我們把上面的四個步驟封裝在一個名字叫draw的函數(shù)中，這時要讓繪制的圖形動起來，還需要借住下面三個函數(shù)之一：

setInterval(function, delay)，setTimeout(function, delay)，requestAnimationFrame(callback)

相信學(xué)習(xí)前端的小朋友對前兩個都不陌生，我就不說了，我說說后面這個函數(shù)，之前我也沒接觸這個函數(shù)，而且該次demo用的就是這個函數(shù)：requestAnimationFrame函數(shù)會告訴瀏覽器你希望執(zhí)行動畫，并請求瀏覽器調(diào)用指定的函數(shù)（也就是你傳入的回調(diào)函數(shù)）在下一次重繪之前更新動畫。如果你想做逐幀動畫的時候，你應(yīng)該用這個方法，所以當(dāng)你把draw函數(shù)作為會調(diào)傳入requestAnimationFrame，你的draw函數(shù)就會不斷的執(zhí)行。

貼下我的部分代碼：

//ball 對象用來存儲一個球
var ball = {
	x: 150,
	y: 200,
	vx: 5, //水平速度
	vy: 5, //垂直速度
	radius: 20,
	color: 'blue',
	draw: function() {
		ctx.beginPath();
		ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
		ctx.closePath();
		ctx.fillStyle = this.color;
		ctx.fill();
	}
};
function draw() {
	ctx.clearRect(0,0, canvas.width, canvas.height);
	ball.draw();
	bar.draw();
	scores.draw();
	targetRectangle.draw();
	ball.x += ball.vx;
	ball.y += ball.vy;
	animationJudge = window.requestAnimationFrame(draw);
	...
}

draw()函數(shù)里面包含了小球的繪制，小橫條兒的繪制，得分的繪制。 在每次繪制之前都會清理下整個canvas，而且講各自的狀態(tài)保存在了各自命名的對象中，小球會通過水平和垂直速度不斷改變它x和y的值來改變他的位置。也就形成了運動的小球。

繪制小橫條兒，怎么像操作DOM一樣去拖動它

在canvas上是沒法兒那么自如的操作DOM元素，但是我們卻能對canvas本身進行事件監(jiān)聽，拿到位置信息。所以跟DOM中拖拽的實現(xiàn)類似，在鼠標(biāo)移動過程中不斷的統(tǒng)計移動的距離，然后改變橫條兒的位置， 重新繪制它來達到拖動的效果，照例貼代碼：

canvas.addEventListener('mousedown', function(e) {
		if (!beginGame) {
			draw();
			beginGame = true;
		}
		var x = e.clientX;
		var y = e.clientY;
		//判斷拖拽的位置
		if ((x >=bar.x && x <= bar.x + bar.width) && (y >= bar.y && y <= bar.y + bar.height) ) {
			bar.barDragJudge = true;
			bar.xDistance = x;
		}

	})
	canvas.addEventListener('mousemove', function(e) {
		if (bar.barDragJudge) {
			var x = e.clientX;
			var distance = x - bar.xDistance;
			if (bar.x + distance + 60 >= canvas.width) {
				if (distance >= 0) {
					distance = 0;
				}
			} else if (bar.x + distance <= 10) {
				if (distance <= 0) {
					distance = 0;
				}
			}
			bar.x += distance;
			bar.xDistance = x;


		}
	})
	window.addEventListener('mouseup', function(e) {
		bar.barDragJudge = false;
	})

監(jiān)聽mousedown事件，當(dāng)鼠標(biāo)按下并且鼠標(biāo)位置是和橫條所覆蓋的位置重合（當(dāng)然在我們開始游戲后，會繪制一次橫條兒，即頁面相應(yīng)位置會出現(xiàn)橫條兒）時，我將拖拽標(biāo)志barDragJudge設(shè)置為true，表示可以進行拖拽了。然后在鼠標(biāo)移動過程中通過計算鼠標(biāo)移動的距離更新橫條兒的位置，完成橫條的拖動，并且判斷當(dāng)橫條移動到canvas邊界之后不能左拖和右拖。最后，結(jié)束點擊，將barDragJudge設(shè)置為false。

如何實現(xiàn)游戲上面的小方塊兒的繪制與刪除？

其實，光是繪制小方塊兒并不能難，你就寫一個二維數(shù)組，存儲你要繪制的矩形方塊兒的信息，貼下我的代碼：

function initialTargetRectangleArr() {
		var targetRectangleArr = [];
		for (var i = 0; i < 4; i++) {
			targetRectangleArr[i] = [];
			for (var j = 0; j < 4; j++) {
				targetRectangleArr[i][j] = {};
				targetRectangleArr[i][j].x = 35 + j*(50 + 10);
				targetRectangleArr[i][j].y = 35 + i*(20 + 10);
				targetRectangleArr[i][j].width = 50;
				targetRectangleArr[i][j].height = 20;
			}
		}
		return targetRectangleArr;
	}

上面的函數(shù)返回了一個二維數(shù)組，數(shù)組里面的元素是對象，每個對象包含了你存儲的小方塊兒的位置以及大小。

接下來說下小方塊兒的刪除，這里我們先假設(shè)小球碰到了我們的小方塊兒，碰到之后我們需要講該方塊兒擦除掉，

即借用clearRect函數(shù)，然后問題來了，你只是降頁面的方塊兒擦除掉了，但是方塊兒還是在的，這時我采取的辦法是降方塊兒"移出"我的canvas，然后將他的寬高都設(shè)置為0。

碰撞問題

這個是本次DEMO的關(guān)鍵問題了，該如何去判斷小球和各種東西之間的碰撞呢？我們這里拿小球和底部小橫條兒的碰撞來說明下。 其實碰撞的核心在于位置，你要準(zhǔn)確的拿到橫條兒在canvas中的覆蓋區(qū)域，然后小球在進入這個區(qū)域后就當(dāng)作是發(fā)生了碰撞。照理，貼下代碼(關(guān)鍵部分就一句話)：

if ((ball.x + ball.vx >= bar.x - ball.radius && ball.x + ball.vx - ball.radius <= bar.x + bar.width) && (ball.y + ball.vy + ball.radius >= bar.y)) {
		ball.vy = -ball.vy;
	}

我們稍微來解析下，(ball.x + ball.vx >= bar.x - ball.radius && ball.x + ball.vx - ball.radius <= bar.x + bar.width) 這部分主要判斷兩個事：&&號左邊是判斷小球落在橫條兒左邊時，小球的右邊緣必須在橫條所覆蓋的區(qū)域；&&號右邊是判斷小球落在橫條右邊時，其左側(cè)必須在橫條覆蓋的范圍內(nèi)。接著在滿足上面這個條件下，(ball.y + ball.vy + ball.radius >= bar.y)判斷小球的高度，球心加上當(dāng)前小球的垂直移動速度以及半徑，如果高度值大于等于橫條的垂直高度則碰撞發(fā)生。怎么樣，其實并沒有想象中的那么難吧，至于小球和canvas邊緣以及小球和上面的小方塊兒碰撞原理和這里一樣，就不再贅述。

關(guān)于計分以及碰到紅色小塊兒加速問題都是比較簡單的，可以直接看我的代碼，寫到這里整個demo差不多就實現(xiàn)了吧。

寫在最后

剛想到寫這個demo的時候還感覺有點困難，主要就是想到碰撞可能不好實現(xiàn)。直到完成后，誒，其實也挺簡單的哈。各位大佬如果有時間玩兒玩兒這個小demo的話（現(xiàn)在只能從git上靠代碼，自己在頁面玩兒），如果存在什么bug之類的歡迎指出哈。（其實我有點擔(dān)心碰撞邊界的問題，設(shè)置不好會不會有什么bug出現(xiàn)）接下來，我想試試難度升級，如果有多個小球呢，不停的重繪 會不會導(dǎo)致頁面卡頓，恩，當(dāng)然，這是后話了。

到此這篇關(guān)于JS+Canvas實現(xiàn)接球小游戲的示例代碼的文章就介紹到這了,更多相關(guān)JS Canvas接球游戲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論