整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

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

          完成簡單的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、運行看效果

          <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%面授,讓你無憂~


          主站蜘蛛池模板: 成人精品视频一区二区三区尤物 | 痴汉中文字幕视频一区| 亚洲成av人片一区二区三区| 91久久精品午夜一区二区| 国产高清视频一区二区| 亚洲AV无码一区二区三区网址| 国产色情一区二区三区在线播放| 一区二区三区高清视频在线观看| 在线免费视频一区| 性色av闺蜜一区二区三区| 国偷自产av一区二区三区| 丰满爆乳一区二区三区| 色噜噜AV亚洲色一区二区| 国产一区二区三区免费观在线 | 亚洲日韩激情无码一区| 国产成人高清精品一区二区三区| 国产伦精品一区二区三区免.费| 亚洲一区二区三区成人网站| 在线精品亚洲一区二区| 在线精品亚洲一区二区| 无码av中文一区二区三区桃花岛| 天堂成人一区二区三区| 精品国产天堂综合一区在线| 国产SUV精品一区二区88L| 视频精品一区二区三区| 国产激情无码一区二区三区| 人妻内射一区二区在线视频| 精品乱子伦一区二区三区高清免费播放| 日本精品夜色视频一区二区| 亚洲国产成人久久综合一区77| 一级毛片完整版免费播放一区| 国产乱码伦精品一区二区三区麻豆 | 免费看无码自慰一区二区| 国产色欲AV一区二区三区| 成人在线一区二区| 国产一区二区三区免费观看在线 | 精品视频一区二区三三区四区| 亚洲天堂一区二区三区四区| 国模无码一区二区三区| 亚洲片国产一区一级在线观看| 日韩免费视频一区二区|