完成簡單的HTML5的2D突圍賽之三：反彈的墻

上一篇《完成簡單的HTML5的2D突圍賽之二：讓球動起來》，我們看到小球跑出可視區域了，今天，我們就讓它留在可視區域，來回跑跳。如何實現呢？我們先從檢測球是否與邊緣碰撞了。

此圖片來自網絡

簡單的碰撞檢測

為了檢測碰撞，我們要看一下球是否到canvas邊緣了，如果這樣，就改變它的運動軌跡。

為了計算方便，我們定義一個變量，來作為繪制圓形的半徑，代碼如下：

var ballRadius=10;
ctx.arc(x, y, ballRadius, 0, Math.PI*2);

我們知道，有四個墻壁來反彈球，我們需要獲取球在頂部、底部、左右的條件信息。

我們之前定義的dx, dy 是縱坐標和橫坐標的偏移量，如果y+dy<0，則說明球在頂部；如果y+dy>canvas.height，則說明球在底部；同樣的x+dx<0，則說明球在左邊；x+dx>canvas.width，則說明球在右邊。

綜上所述，實際效果運行時，會發現，球藏進墻里一部分，說明，球的半徑，我們沒有處理，需要把ballRadius計算進去。

完整的實例代碼

具體的反彈墻的代碼

從完整的代碼上，我們可以看出，只是修改了一點上節中的代碼，就實現了球在canvas的范圍里運動的效果。我們來看一下運行結果：

在畫布中運行的小球，遇到墻反彈的效果

至此，就介紹完了今天的小節，如果你覺得本文章對你有點幫助，就請關注我吧。更多信息及時獲取。

作為一個小游戲，肯定要有人參與進來的，那么鼠標、鍵盤和小游戲，是怎么互動的呢？歡迎留意下節。

下節預告：鍵盤操作。（基于此小游戲的系列文章，關注度不高，可能會有調整，敬請期待）

也歡迎大家，評論、轉發、收藏。

發語言：Html5

開發工具：HBuilderX

先說一下，開發工具下載，可以直接去百度搜HBuilderX，

百度搜“HBuilder”

根據自己的系統點擊直接下載

準備工作

提前準備好js，css，img圖片

廢話不多說，我們直接把代碼敲起來

開發步驟：

1、雙擊打開HBuilderX

2、點擊創建項目

3、在項目中添加素材

1）將圖片素材拷貝至img文件夾中

2）將style.css文件拷貝至css文件夾中

3）將3d-tv.js文件拷貝至js文件夾中

4、編輯index.html

5、運行看效果

小伙伴，如果你覺得不錯，幫忙點贊噢

端開發的火爆興起，吸引很多人開始學習HTML5，但很多人總是不得其法，學習起來有很多困難。學習不是一蹴而就的，我們不但要花費足夠的時間、流下足夠的汗水，更重要的是需要有合適的方法。

合理的學習方法能夠事半功倍，而不科學的學習方法很可能導致竹籃打水一場空。

零基礎學習HTML5在有些人看起來，可能覺得很困難，根本不可能做到，因為自己之前根本沒有接觸過這方面的知識。其實大家只要找到方法，認真學習，一切知識都是有規律可循的。

大家在學習的過程中，首先應該搭建一個知識框架，它的知識體系是什么？有那些分支？好比搭建一座房子，我們得知道它大概有那些零件，像屋頂、墻壁、柱子、窗戶、門等等！

HTML5體系同樣如此，在學習HTML和CSS時，會涉及到網頁的搭建，我們就可以采用“由全局到細節”、“由整體到部分”、“由外及內”的方法，先搭建一個大的體系再一步步往里面增加細節。

剛開始學習的時候千萬不要一直抓著一個細節不放，糾結其中，我們要有整體意識，可以聯系前后內容進行融匯貫通。

其次，在學習的時候注意知識的匯總整理，當發現相似的知識點時，一方面是做好辨析工作，另一方面就是可以進行類比學習，尋找相似點，這樣學起來可以事半功倍。例如在學習如strong與em，塊元素與行元素，同步與異步就可以采用這種方法。

第三，學習過程中要注意知識的積累，各種酷炫的效果都是點滴小程序效果聚集的再放大，所以我們要打好基礎，才能做到融匯貫通。最后，要注重理論聯系實際，可以借助生活中的事物去理解抽象的知識點，這樣可以幫助我們更好的理解吸收知識，利用生活中實際的事物去輔助抽象知識的學習，能夠讓我們更好更快的理解和吸收知識。并且要不斷實踐，理論知識固然重要，但將其運用在具體操作中才是關鍵，更是我們的目的。前端開發工作本來就是一個將理論轉化為現實作品的過程，我們必須做到大量實踐聯系，才能更好的掌握，寫出出色的作品。

自學固然可行，但是一個人孤軍作戰，總是比不上團隊作戰。不但耗時長，效果差，而且可能產生很大失誤。千鋒替你做好學習規劃，全程100%面授，讓你無憂~

在線咨詢

上一篇：西餐行業借移動互聯網實現跨界發展
下一篇：python實現dubbo接口調用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

完成簡單的HTML5的2D突圍賽之三：反彈的墻

您的項目需求