微信小程序之坦克大战学习
1.問題一:在menu.js中需要使用到const.js文件中的變量,怎么辦?如下圖:
?
解決:在const.js文件中寫上module.exports={},大括號里面寫對應的變量對,如下圖:
?然后在menu.js文件中,使用require引入,如下圖:
這樣,一個文件就可以使用另一個文件定義的變量了,class的訪問是通過import來訪問的。
2.開始頁面顯示出來了,接下來是選擇player的數目。在Main中初始化事件監聽,看下面的代碼:
? 然后看一下initEvent()的內容,這里監聽了touchstart事件,實現的效果是點擊屏幕任意一點,改變palyer的位置(1還是2):
??
??
? 3.后續的工作內容大致上跟上面的一樣,這里貼一下最終的開發進度圖:
? 整體的流程是先繪制出來地圖塊,玩家坦克,敵方坦克,然后敵方坦克隨機的移動和射擊,敵方坦克的邊界檢測部分卡住的事件最長,然后一點一點的打印,搞清楚了里面的機制和流程,接下來是方向鍵控制玩家坦克的移動和射擊,圖中的A鍵是玩家1的射擊鍵。最后再加一個游戲結束的功能基本上就把主流程開發完成了。
4.由于沒有一步一步的開發和記錄文檔,這里就記錄一下開發中的難點和問題
? 4.1 微信小程序中的eval不支持,所以暫時先用的是注釋掉的代碼行,如下面的程序:
setMapLevel(level) {this.level = level;var tempMap = eval("map" + this.level); //這里就是拼接,然后獲取到真正的array,但微信不支持eval函數//var tempMap = LEVEL.map1;console.log("tempMap length is "+LEVEL.map1); //for testthis.mapLevel = new Array();for (var i=0;i<tempMap.length; i++) {this.mapLevel[i] = new Array();for (var j=0; j<tempMap[i].length; j++) {this.mapLevel[i][j] = tempMap[i][j];}}}? ?4.2 在tank.js中,玩家坦克、主界面中的選擇坦克、敵方坦克都會有一句代碼是(這里拿PlayTank舉例 ):
? ? PlayTank.prototype = new Tank()
? ? 初步的理解是跟繼承差不多,用了Tank類中的屬性和方法,如果PlayTank定義了同名方法和屬性,則執行PlayTank中的方法和屬性。
? ?4.3 export和import中也有一些問題,在使用isGameOver變量的時候,現在main.js 中export了isGameOver,然后在Collision.js中使用了isGameOver,這時候編譯器報了isGameOver是read-only屬性,最后解決辦法是在main.js中定義了方法并export,然后方法中設置isGameOver的值,最后在Collision.js中import此方法并調用。
?
總結
以上是生活随笔為你收集整理的微信小程序之坦克大战学习的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 《深入理解LINUX网络技术内幕》小记1
- 下一篇: c语言中的jsonpath的处理