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

在JY1.x版本中，你要做一個pc端的小游戲，會非常的簡單，包括說，你要在低版本的瀏覽器IE8中，也不會出現明顯的卡頓現象，你只需要關心游戲的邏輯就行了，比較適合邏輯較為簡單的小游戲，在JY官網也寫了很多的小游戲demo，但後來由於工作的緣因，一直沒太去維護他，真是一轉眼，已經是移動互聯網的時代了，5年後的今天，有了重新構思JY框架的衝動，於是全新的JY2.0開始構建了。它將只適用於h5的移動端游戲開發，它將更多的去關註更複雜的js游戲，不在局限於紅白機時代。

在使用JY1時，我做了一個塔防的h5游戲，它做得有點像《保衛蘿蔔》，當然它只是個原型，如下圖所示，它的演示地址是h5塔防游戲

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

1. 第一層，view,是游戲的核心部分，整個動畫的顯示；
2. 第二層，control操作層，這一層是用來響應用戶的輸入的；
3. 第三層，model數據層，是顯示當前用戶的相關信息的，比如等級、血條等。

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

• index.ts 主入口類， class JY
• iScreen.ts 視窗介面類， interface IScreen
• sprite.ts 游戲精靈 class Sprite
• writeText.ts 文本控制 class WriteText
• control.ts 控制器,IScreen的實現  class Control implements IScreen
• stage.ts 游戲舞臺，同上
• descrition 歡迎界面，同上
• title.ts 開始界面，同上
• gameOver.ts 游戲結束界面，同上
• score.ts 積分界面，同上

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

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

游戲已經集成進app中，可以通過https://beta.bugly.qq.com/jsc7下載，或者http://www.lovewebgames.com/app/bigeatsmall/bigeatsmall.apk 和ios越獄版http://www.lovewebgames.com/app/bigeatsmall/bigeatsmall.ipa

這個游戲是使用html和js集成進app中的混合app，它有點像吞食蛇大作戰和球球大作戰。未完待續吧，記住關註我的js游戲框架JY