上一篇《完成簡單的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、運行看效果
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
小伙伴,如果你覺得不錯,幫忙點贊噢
端開發的火爆興起,吸引很多人開始學習HTML5,但很多人總是不得其法,學習起來有很多困難。學習不是一蹴而就的,我們不但要花費足夠的時間、流下足夠的汗水,更重要的是需要有合適的方法。
合理的學習方法能夠事半功倍,而不科學的學習方法很可能導致竹籃打水一場空。
零基礎學習HTML5在有些人看起來,可能覺得很困難,根本不可能做到,因為自己之前根本沒有接觸過這方面的知識。其實大家只要找到方法,認真學習,一切知識都是有規律可循的。
大家在學習的過程中,首先應該搭建一個知識框架,它的知識體系是什么?有那些分支?好比搭建一座房子,我們得知道它大概有那些零件,像屋頂、墻壁、柱子、窗戶、門等等!
HTML5體系同樣如此,在學習HTML和CSS時,會涉及到網頁的搭建,我們就可以采用“由全局到細節”、“由整體到部分”、“由外及內”的方法,先搭建一個大的體系再一步步往里面增加細節。
剛開始學習的時候千萬不要一直抓著一個細節不放,糾結其中,我們要有整體意識,可以聯系前后內容進行融匯貫通。
其次,在學習的時候注意知識的匯總整理,當發現相似的知識點時,一方面是做好辨析工作,另一方面就是可以進行類比學習,尋找相似點,這樣學起來可以事半功倍。例如在學習如strong與em,塊元素與行元素,同步與異步就可以采用這種方法。
第三,學習過程中要注意知識的積累,各種酷炫的效果都是點滴小程序效果聚集的再放大,所以我們要打好基礎,才能做到融匯貫通。 最后,要注重理論聯系實際,可以借助生活中的事物去理解抽象的知識點,這樣可以幫助我們更好的理解吸收知識,利用生活中實際的事物去輔助抽象知識的學習,能夠讓我們更好更快的理解和吸收知識。并且要不斷實踐,理論知識固然重要,但將其運用在具體操作中才是關鍵,更是我們的目的。前端開發工作本來就是一個將理論轉化為現實作品的過程,我們必須做到大量實踐聯系,才能更好的掌握,寫出出色的作品。
自學固然可行,但是一個人孤軍作戰,總是比不上團隊作戰。不但耗時長,效果差,而且可能產生很大失誤。千鋒替你做好學習規劃,全程100%面授,讓你無憂~
*請認真填寫需求信息,我們會在24小時內與您取得聯系。