建立第乙個屬於自己的canvas小遊戲（開始創作）

建立html：建立乙個canvas標籤，指定高度與寬度，並在標籤中對不支援的瀏覽器給出相應的提示

your browser shall not pass! download google chrome to review this。

準備工作：把所有的js**都放在這個自執行的函式中，從而防止變數洩露到全域性範圍

(function(),
init:function(){},
draw:function(){},
animate:function(){},
rungame:function(){},
restartgame: function(){}
}})()

建立專門為h5優化的動畫

window.requestanimationframe=(function()
})();

var game=
},init:function(),
//draw用來處理所有更新並繪製物件的邏輯
draw:function(),
animate:function(),
}

備註：由於animate（）是個在game物件之外觸發的子引用函式，所以必須引用game物件，而非this,

遊戲背景

var background=
},draw:function()
}};

小球

var ball=,
draw:function(),
move:function(){}
}

擋板

var paddle=,
draw:function(),
move:function(){},
gradient:function()
this.gradientcache=ctx.createlineargradient(this.x,this.y,this.x,this.y+20);
this.gradientcache.addcolorstop(0,"#eee");
this.gradientcache.addcolorstop(1,"#999");
return this.gradientcache;
} };

磚塊

var bricks=
},draw:function()}}
},x:function(row),
y:function(col), 
gradient:function(row)
},makegradient:function (row,color1,color2)
};

讓擋板動起來

var paddle=
};

讓小球動起來

var ball=
};

監測球拍與canvas邊界是否發生碰撞

var paddle=else if(this.y>game.height)
if(this.x<1)else if(this.x>game.width)
}

小球與球拍接觸

當小球與球拍發生碰撞時，小球的垂直方向改變，球拍位置不發生改變

var ball=
}}

去除被小球擊中的磚塊

var bricks=
continue;
}ctx.fillstyle=this.gradient(i);
//下乙個**清單將根據磚塊所述的行號，使同一列磚塊的顏色變成漂亮的漸變
ctx.fillrect(this.x(j),this.y(i),this.w,this.h);}}
}}}
//如果重疊，將其設定為false，並將小球的y座標取-
collide:function(i,j)

var ctrl=,
keydown:function(event)
},keyup:function(event)
},}

最後一步，將ctrl.left與ctrl.right加入到球拍運動的判斷中

ps:更詳細**

建立第乙個屬於自己的canvas小遊戲（基礎知識）

canvas元素用於圖形的繪製，通過指令碼 js 來完成。canvas元素用於圖形的繪製，通過指令碼 js 來完成。1.ctx.fillstyle eee 2.ctx.fillrect x座標，y座標，寬度值，高度值 1.ctx.strokestyle eee 2.ctx.strokerect x座...

建立乙個屬於自己的shell

1 寫乙個屬於自己的微型myshell 2 功能 myshell ls 3 能夠執行基礎linux 命令 4 5 6 include7 include8 include9 include10 include11 1 獲取終端輸入 12 2 解析輸入按空格解析到乙個乙個的命令引數 13 3 建立乙個...

如何建立自己的第乙個gem

1 使用bundle gem hhg10建立乙個名為hhg10的資料夾 2 修改檔案為hhg10.gemsepc檔案。在相應的lib hhg10下完成相關功能的rb檔案寫 3 執行打包gem build hhg10.gemspec 會出現success built rubygem字眼成功接下來就是...

建立第乙個屬於自己的canvas小遊戲（開始創作）

建立第乙個屬於自己的canvas小遊戲（基礎知識）

建立乙個屬於自己的shell

如何建立自己的第乙個gem

相關推薦