1.一開始的兩個步驟不變

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

//封裝一個獲取繪圖環(huán)境的函數(shù)function getCxt(){    var myCanvas = document.getElementById('floor'),
       myContext = myCanvas.getContext('2d');    return myContext;
}//為了防止重復(fù)地獲取節(jié)點影響性能,我們將獲取到的繪圖環(huán)境(也就是畫筆對象)存起來var oCxt = getCxt();

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

  2.接下來對畫坦克的函數(shù)進(jìn)行適當(dāng)改寫,因為函數(shù)里重復(fù)代碼過多,同時,增加兩個顏色的參數(shù),方便后面畫出不同的坦克:

電腦培訓(xùn),計算機(jī)培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

//封裝一個畫坦克的函數(shù),傳兩個參數(shù)x,y,分別代表左上角的橫縱坐標(biāo)//再增加一個參數(shù)dir來表示方向 上下左右分別傳"u" "d" "l" "r"//再增加兩個參數(shù)color1與color2,用來表示坦克身上的兩種顏色,方便造出不同的坦克function drawTank(x,y,dir,color1,color2){    switch(dir){        case "u":                             
        case "d": 
            oCxt.fil
        
		

網(wǎng)友評論