帶你使用h5開發移動端小遊戲

2021-04-17 14:56:41 字數 760 閱讀 1589

在使用jy1時,我做了乙個塔防的h5遊戲,它做得有點像《保衛蘿蔔》,當然它只是個原型,如下圖所示,它的演示位址是h5塔防遊戲

它的設計是canvas加上div混合的一種形式,這也就是jy2.0的起步,在乙個遊戲中,我們通常會劃分三層結構:

第一層,view,是遊戲的核心部分,整個動畫的顯示;

第二層,control操作層,這一層是用來響應使用者的輸入的;

第三層,model資料層,是顯示當前使用者的相關資訊的,比如等級、血條等。

方便記憶,你可以理解成mvc,當然實際上是沒有半毛線關係的。 這個是jy1.x版本的玩法,如果有興趣的可以去github上把**down下來看下。在jy2裡,我把canvas做得更簡單了,所有的遊戲元素都繼承sprite類,我把整個jy庫初步劃分成了10個類:

可能會有人產生疑問,這是js麼,怎麼有class和inte***ce啊,為了增加js的語法,所以我是用typescript來編寫的,typescript是一類更像c#的js實現,比es6更完善吧,特別是有強型別。

有了這些後,我們就可以開始構建一款純h5的遊戲了,由於時間原因,我就先把遊戲的截圖放出來吧!

移動端h5開發基礎

移動端h5開發基礎知識 一.手機端開發頁面必須要加一段 注 這段 的主要意思是 讓頁面寬度等於裝置寬度,縮放比例為1,禁止使用者縮放。用於檢測視口,主要的效果就是取消下面的滾動條,讓頁面適應螢幕。二.為自己的頁面設定最大寬度和最小寬度 主要作用是在螢幕足夠大的時候,頁面也不會失真。三.相容手機螢幕大...

h5移動端css開發總結

font size 12px transform scale 10 12 需要注意這個方式雖然縮小了字型,但該文字元素所佔據的原寬高大小並不會跟著縮小,所以很多時候還需要考慮文字位置和間距的問題。一般文字位置需要結合 transform origin 屬性來設定。例如設定文字水平居左 垂直居中 tr...

移動端 h5 開發筆記

1.禁止縮放 禁止快取 2.webkit 定製css 更多參考 webkit touch callout none webkit user select none webkit text size adjust none webkit tap highlight color rgba 0,0,0,1...