您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“怎么使用JS+Canvas實(shí)現(xiàn)接球小游戲”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
這里我們采用疑問的句式給出實(shí)現(xiàn)的思路(步驟),因?yàn)槲覍戇@個(gè)demo的時(shí)候也是這樣去想的:
- canvas上畫一個(gè)小球,如何動(dòng)起來?
- canvas上畫一個(gè)橫條兒,如何像在DOM上那樣去拖動(dòng)它?
- 如何實(shí)現(xiàn)游戲上面的小方塊兒的繪制與刪除?
- 碰撞問題:小球與canvas邊界之間怎么去判斷碰撞?小球與小橫條之間怎么去判斷碰撞?小球與上方的小方塊兒之間怎么去判斷碰撞?(其實(shí)原理差不多)
主要就是這4步的實(shí)現(xiàn),然后把他們串接起來,你的簡(jiǎn)單接球小動(dòng)畫就實(shí)現(xiàn)了。
如何讓小球動(dòng)起來
其實(shí)這部分是比較簡(jiǎn)單的canvas動(dòng)畫,一個(gè)基本的動(dòng)畫步驟可以歸納為以下幾個(gè)過程:
1.清除canvas:在每次畫新的圖形的時(shí)候,你都必須將之前的圖形給清理掉,這樣才有那種一幀一幀的重繪的感覺。
2.保存當(dāng)前的state:在你沒走一步時(shí),你都需要將你當(dāng)前的canvas狀態(tài)給保存下來,狀態(tài)包括:當(dāng)前圖形的位置(x,y軸的信息),當(dāng)前圖形的大?。▽捀咝畔ⅲ?dāng)前圖形的變化(也就是你對(duì)他做了拉伸,角度變化等等)等信息。
3.重新渲染你在當(dāng)前位置所要繪制的圖形,也就是把你現(xiàn)在想畫的東西給它畫在你的canvas上。
4.恢復(fù)canvas的狀態(tài),因?yàn)槟阒g對(duì)canvas的信息做了入棧保存,所以此時(shí)你必須restore它。
你以為這樣就可以了嗎?哈哈哈,并沒有。加入我們把上面的四個(gè)步驟封裝在一個(gè)名字叫draw的函數(shù)中,這時(shí)要讓繪制的圖形動(dòng)起來,還需要借住下面三個(gè)函數(shù)之一:
setInterval(function, delay),setTimeout(function, delay),requestAnimationFrame(callback)
相信學(xué)習(xí)前端的小朋友對(duì)前兩個(gè)都不陌生,我就不說了,我說說后面這個(gè)函數(shù),之前我也沒接觸這個(gè)函數(shù),而且該次demo用的就是這個(gè)函數(shù):requestAnimationFrame函數(shù)會(huì)告訴瀏覽器你希望執(zhí)行動(dòng)畫,并請(qǐng)求瀏覽器調(diào)用指定的函數(shù)(也就是你傳入的回調(diào)函數(shù))在下一次重繪之前更新動(dòng)畫。如果你想做逐幀動(dòng)畫的時(shí)候,你應(yīng)該用這個(gè)方法,所以當(dāng)你把draw函數(shù)作為會(huì)調(diào)傳入requestAnimationFrame,你的draw函數(shù)就會(huì)不斷的執(zhí)行。
貼下我的部分代碼:
//ball 對(duì)象用來存儲(chǔ)一個(gè)球 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ù)里面包含了小球的繪制,小橫條兒的繪制,得分的繪制。 在每次繪制之前都會(huì)清理下整個(gè)canvas,而且講各自的狀態(tài)保存在了各自命名的對(duì)象中,小球會(huì)通過水平和垂直速度不斷改變它x和y的值來改變他的位置。也就形成了運(yùn)動(dòng)的小球。
繪制小橫條兒,怎么像操作DOM一樣去拖動(dòng)它
在canvas上是沒法兒那么自如的操作DOM元素,但是我們卻能對(duì)canvas本身進(jìn)行事件監(jiān)聽,拿到位置信息。所以跟DOM中拖拽的實(shí)現(xiàn)類似,在鼠標(biāo)移動(dòng)過程中不斷的統(tǒng)計(jì)移動(dòng)的距離,然后改變橫條兒的位置, 重新繪制它來達(dá)到拖動(dò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)然在我們開始游戲后,會(huì)繪制一次橫條兒,即頁面相應(yīng)位置會(huì)出現(xiàn)橫條兒)時(shí),我將拖拽標(biāo)志barDragJudge設(shè)置為true,表示可以進(jìn)行拖拽了。然后在鼠標(biāo)移動(dòng)過程中通過計(jì)算鼠標(biāo)移動(dòng)的距離更新橫條兒的位置,完成橫條的拖動(dòng),并且判斷當(dāng)橫條移動(dòng)到canvas邊界之后不能左拖和右拖。最后,結(jié)束點(diǎn)擊,將barDragJudge設(shè)置為false。
如何實(shí)現(xiàn)游戲上面的小方塊兒的繪制與刪除?
其實(shí),光是繪制小方塊兒并不能難,你就寫一個(gè)二維數(shù)組,存儲(chǔ)你要繪制的矩形方塊兒的信息,貼下我的代碼:
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ù)返回了一個(gè)二維數(shù)組,數(shù)組里面的元素是對(duì)象,每個(gè)對(duì)象包含了你存儲(chǔ)的小方塊兒的位置以及大小。
接下來說下小方塊兒的刪除,這里我們先假設(shè)小球碰到了我們的小方塊兒,碰到之后我們需要講該方塊兒擦除掉,
即借用clearRect函數(shù),然后問題來了,你只是降頁面的方塊兒擦除掉了,但是方塊兒還是在的,這時(shí)我采取的辦法是降方塊兒"移出"我的canvas,然后將他的寬高都設(shè)置為0。
碰撞問題
這個(gè)是本次DEMO的關(guān)鍵問題了,該如何去判斷小球和各種東西之間的碰撞呢?我們這里拿小球和底部小橫條兒的碰撞來說明下。 其實(shí)碰撞的核心在于位置,你要準(zhǔn)確的拿到橫條兒在canvas中的覆蓋區(qū)域,然后小球在進(jìn)入這個(gè)區(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) 這部分主要判斷兩個(gè)事:&&號(hào)左邊是判斷小球落在橫條兒左邊時(shí),小球的右邊緣必須在橫條所覆蓋的區(qū)域;&&號(hào)右邊是判斷小球落在橫條右邊時(shí),其左側(cè)必須在橫條覆蓋的范圍內(nèi)。接著在滿足上面這個(gè)條件下,(ball.y + ball.vy + ball.radius >= bar.y)判斷小球的高度,球心加上當(dāng)前小球的垂直移動(dòng)速度以及半徑,如果高度值大于等于橫條的垂直高度則碰撞發(fā)生。怎么樣,其實(shí)并沒有想象中的那么難吧,至于小球和canvas邊緣以及小球和上面的小方塊兒碰撞原理和這里一樣,就不再贅述。
“怎么使用JS+Canvas實(shí)現(xiàn)接球小游戲”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。