整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
上一篇《完成簡(jiǎn)單的HTML5的2D突圍賽之二：讓球動(dòng)起來(lái)》，我們看到小球跑出可視區(qū)域了，今天，我們就讓它留在可視區(qū)域，來(lái)回跑跳。如何實(shí)現(xiàn)呢？我們先從檢測(cè)球是否與邊緣碰撞了。
此圖片來(lái)自網(wǎng)絡(luò)
簡(jiǎn)單的碰撞檢測(cè)
為了檢測(cè)碰撞，我們要看一下球是否到canvas邊緣了，如果這樣，就改變它的運(yùn)動(dòng)軌跡。
為了計(jì)算方便，我們定義一個(gè)變量，來(lái)作為繪制圓形的半徑，代碼如下：
var ballRadius=10;
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
我們知道，有四個(gè)墻壁來(lái)反彈球，我們需要獲取球在頂部、底部、左右的條件信息。
我們之前定義的dx, dy 是縱坐標(biāo)和橫坐標(biāo)的偏移量，如果y+dy<0，則說(shuō)明球在頂部；如果y+dy>canvas.height，則說(shuō)明球在底部；同樣的x+dx<0，則說(shuō)明球在左邊；x+dx>canvas.width，則說(shuō)明球在右邊。
綜上所述，實(shí)際效果運(yùn)行時(shí)，會(huì)發(fā)現(xiàn)，球藏進(jìn)墻里一部分，說(shuō)明，球的半徑，我們沒有處理，需要把ballRadius計(jì)算進(jìn)去。
完整的實(shí)例代碼
具體的反彈墻的代碼
從完整的代碼上，我們可以看出，只是修改了一點(diǎn)上節(jié)中的代碼，就實(shí)現(xiàn)了球在canvas的范圍里運(yùn)動(dòng)的效果。我們來(lái)看一下運(yùn)行結(jié)果：
在畫布中運(yùn)行的小球，遇到墻反彈的效果
至此，就介紹完了今天的小節(jié)，如果你覺得本文章對(duì)你有點(diǎn)幫助，就請(qǐng)關(guān)注我吧。更多信息及時(shí)獲取。
作為一個(gè)小游戲，肯定要有人參與進(jìn)來(lái)的，那么鼠標(biāo)、鍵盤和小游戲，是怎么互動(dòng)的呢？歡迎留意下節(jié)。
下節(jié)預(yù)告：鍵盤操作。（基于此小游戲的系列文章，關(guān)注度不高，可能會(huì)有調(diào)整，敬請(qǐng)期待）
也歡迎大家，評(píng)論、轉(zhuǎn)發(fā)、收藏。
發(fā)語(yǔ)言：Html5
開發(fā)工具：HBuilderX
先說(shuō)一下，開發(fā)工具下載，可以直接去百度搜HBuilderX，
百度搜“HBuilder”
根據(jù)自己的系統(tǒng)點(diǎn)擊直接下載
準(zhǔn)備工作
提前準(zhǔn)備好js，css，img圖片
廢話不多說(shuō)，我們直接把代碼敲起來(lái)
開發(fā)步驟：
1、雙擊打開HBuilderX
2、點(diǎn)擊創(chuàng)建項(xiàng)目
3、 在項(xiàng)目中添加素材
1）將圖片素材拷貝至img文件夾中
2）將style.css文件拷貝至css文件夾中
3）將3d-tv.js文件拷貝至js文件夾中
4、編輯index.html
5、運(yùn)行看效果
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
小伙伴，如果你覺得不錯(cuò)，幫忙點(diǎn)贊噢
端開發(fā)的火爆興起，吸引很多人開始學(xué)習(xí)HTML5，但很多人總是不得其法，學(xué)習(xí)起來(lái)有很多困難。學(xué)習(xí)不是一蹴而就的，我們不但要花費(fèi)足夠的時(shí)間、流下足夠的汗水，更重要的是需要有合適的方法。
合理的學(xué)習(xí)方法能夠事半功倍，而不科學(xué)的學(xué)習(xí)方法很可能導(dǎo)致竹籃打水一場(chǎng)空。
零基礎(chǔ)學(xué)習(xí)HTML5在有些人看起來(lái)，可能覺得很困難，根本不可能做到，因?yàn)樽约褐案緵]有接觸過(guò)這方面的知識(shí)。其實(shí)大家只要找到方法，認(rèn)真學(xué)習(xí)，一切知識(shí)都是有規(guī)律可循的。
大家在學(xué)習(xí)的過(guò)程中，首先應(yīng)該搭建一個(gè)知識(shí)框架，它的知識(shí)體系是什么？有那些分支？好比搭建一座房子，我們得知道它大概有那些零件，像屋頂、墻壁、柱子、窗戶、門等等！
HTML5體系同樣如此，在學(xué)習(xí)HTML和CSS時(shí)，會(huì)涉及到網(wǎng)頁(yè)的搭建，我們就可以采用“由全局到細(xì)節(jié)”、“由整體到部分”、“由外及內(nèi)”的方法，先搭建一個(gè)大的體系再一步步往里面增加細(xì)節(jié)。
剛開始學(xué)習(xí)的時(shí)候千萬(wàn)不要一直抓著一個(gè)細(xì)節(jié)不放，糾結(jié)其中，我們要有整體意識(shí)，可以聯(lián)系前后內(nèi)容進(jìn)行融匯貫通。
其次，在學(xué)習(xí)的時(shí)候注意知識(shí)的匯總整理，當(dāng)發(fā)現(xiàn)相似的知識(shí)點(diǎn)時(shí)，一方面是做好辨析工作，另一方面就是可以進(jìn)行類比學(xué)習(xí)，尋找相似點(diǎn)，這樣學(xué)起來(lái)可以事半功倍。例如在學(xué)習(xí)如strong與em，塊元素與行元素，同步與異步就可以采用這種方法。
第三，學(xué)習(xí)過(guò)程中要注意知識(shí)的積累，各種酷炫的效果都是點(diǎn)滴小程序效果聚集的再放大，所以我們要打好基礎(chǔ)，才能做到融匯貫通。 最后，要注重理論聯(lián)系實(shí)際，可以借助生活中的事物去理解抽象的知識(shí)點(diǎn)，這樣可以幫助我們更好的理解吸收知識(shí)，利用生活中實(shí)際的事物去輔助抽象知識(shí)的學(xué)習(xí)，能夠讓我們更好更快的理解和吸收知識(shí)。并且要不斷實(shí)踐，理論知識(shí)固然重要，但將其運(yùn)用在具體操作中才是關(guān)鍵，更是我們的目的。前端開發(fā)工作本來(lái)就是一個(gè)將理論轉(zhuǎn)化為現(xiàn)實(shí)作品的過(guò)程，我們必須做到大量實(shí)踐聯(lián)系，才能更好的掌握，寫出出色的作品。
自學(xué)固然可行，但是一個(gè)人孤軍作戰(zhàn)，總是比不上團(tuán)隊(duì)作戰(zhàn)。不但耗時(shí)長(zhǎng)，效果差，而且可能產(chǎn)生很大失誤。千鋒替你做好學(xué)習(xí)規(guī)劃，全程100%面授，讓你無(wú)憂~
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
