JavaScript操做canvas製做前端H5小遊戲——Flappy Bird
遊戲查看javascript
源碼和素材下載css
博主學習前端一年多一點，仍是個新手，不過敢於嘗試，才能不斷進步，若是代碼質量很差，歡迎提意見，下面開始講解，首先貼張遊戲界面圖：html
遊戲使用canvas畫圖製做，分析遊戲肯定有這幾個元素：前端
- 天空背景不動
- 小鳥上下移動，左右不動
- 地板和水管向左移動（形成小鳥向前移動的錯覺）
canvas畫圖是覆蓋畫圖，因此畫圖順序很重要，它的api我就很少說了，只有用到如下內容：java
<!-- html代碼 -->
<canvas id="canvas">您的瀏覽器不支持canvas</canvas>
/* js相關 */
var canvas = document.getElementById('canvas'), //獲取canvas節點
ctx = canvas.getContext('2d'); //獲取畫布上下文畫圖環境
//畫圖（只舉了一種，還有另外一種傳參方式）
ctx.drawImage(img, imgx, imgy, imgw, imgh, canx, cany, canw, canh);
//參數的含義依次爲：圖片資源、圖片的x座標、y座標、寬度、高度、畫布中x座標、y座標、寬度、高度
//由於我把全部的圖片都合成一張，因此須要用截取圖像的傳參方式
下面簡單說說整個遊戲的運行代碼結構：ios
var img = new Image(); //加載圖像
img.src = './img.png';
img.onload = start; //圖像加載完成就運行start函數，因此start是入口
function start(){
//檢查是否碰撞到地板，水管
check();
if(是否遊戲結束){
//遊戲結束的操做而後退出
return;
}
//畫背景
...
if(isStarted){ //isStarted爲是否開始遊戲的變量，是全局的，默認爲false
//開始遊戲就畫小鳥，水管
}else{
//不然就畫準備開始的圖像
}
//畫分數（默認爲0，準備階段畫的是0）
...
//畫地板
...
//設置定時器，保證動畫在遊戲中不斷進行
timer = requestAnimationFrame(start); //和setTimeout(start, 16)效果差很少
}
document.ontouchstart = document.onmousedown = function(e){
//點擊屏幕時小鳥進行跳躍等處理
}
總體結構就是這樣，而後咱們一部分一部分完成就能夠了。web
第一步：獲取設備的屏幕大小，兼容各類屏幕設備canvas
var viewSize = (function(){
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != 'number') {
pageHeight = document.documentElement.clientHeight;
pageWidth = document.documentElement.clientWidth;
};
if(pageWidth >= pageHeight){
pageWidth = pageHeight * 360 / 640;
}
pageWidth = pageWidth > 414 ? 414 : pageWidth;
pageHeight = pageHeight > 736 ? 736 : pageHeight;
return {
width: pageWidth,
height: pageHeight
};
})();
//而後就設置畫布寬高
canvas.width = viewSize.width;
canvas.height = viewSize.height;
//定義原圖像與遊戲界面的像素比
var k = viewSize.height / 600 //我找的背景圖高度爲600px，因此比例就是屏幕高除以600
第二步：完成遊戲進行中的部分（沒有gameover檢查，isStarted爲true時）api
1）畫背景（沒有難點，主要是圖像大小的計算要想清楚）數組
//清除
ctx.clearRect(0,0,viewSize.width,viewSize.height);
//畫背景
ctx.drawImage(img, 0, 0, 800, 600, 0, 0, Math.ceil(k * 800), viewSize.height);
2）畫小鳥：我在全局定義了一個小鳥類，以下：
function Bird(){
//小鳥拍翅膀有三種狀態，因此畫圖相關大多用一個數組來表示
this.imgX = [170, 222, 275]; //在原圖中x的座標
this.imgY = [750, 750, 750]; //在原圖中y的座標
this.imgW = [34, 34, 34]; //在原圖中寬度
this.imgH = [24, 24, 24]; //在原圖中高度
var canX = Math.ceil(110 / 450 * viewSize.width); //在畫布中x的座標
this.canX = [canX, canX, canX];
var canY = Math.ceil(380 / 800 * viewSize.height); //在畫布中y的初始座標
this.canY = [canY, canY, canY];
var canW = Math.ceil(34 * k); //在畫布中的寬度
this.canW = [canW, canW, canW];
var canH = Math.ceil(24 * k); //在畫布中的高度
this.canH = [canH, canH, canH];
//下面三個變量是用來協助記住是在三個狀態中的哪一個狀態，後面一看就知道了
this.index = 0;
this.count = 0;
this.step = 1;
//表示小鳥飛行的時間，後面知道用途
this.t = 0;
//記住初始y座標，也是後面一看就知道了
this.y = [canY, canY, canY];
}
定義類的好處就是能夠不用設置那麼多的全局變量，你能夠直接定義小鳥爲一個對象，接着定義小鳥畫圖方法：
Bird.prototype.draw = function(){
var index = this.index;
//翅膀拍動, this.count就是用來控制拍動的頻率，記住定時器1秒運行16幀，頻率很快的
this.count++;
if(this.count == 6){
this.index += this.step;
this.count = 0;
}
//this.index的變化過程爲0、一、二、一、0、一、二、1...因此須要this.index +1和-1變化
if((this.index == 2 && this.step == 1) || (this.index == 0 && this.step) == -1){
this.step = - this.step;
}
//計算垂直位移，使用公式 y = a * t * (t - c)，這裏就知道了this.t是表明着小鳥起跳後到如今的時間
//我使用了拋物線的函數方程，你也能夠本身選擇，代碼下面我會給出函數座標圖就很清除了
var c = 0.7 * 60;
var minY = - 85 * viewSize.height / 800;
var a = -minY * 4 / (c * c);
var dy = a * this.t * (this.t - c); //dy是小鳥的位移
//下面是小鳥飛到頂部的狀況，個人處理是，使再點擊失效，要小鳥飛下來才能繼續點擊
if(this.y[0] + dy < 0){
canClick = false;
}else{
canClick = true;
}
//而後小鳥在畫布的y座標就等於原先的y座標加上位移
for(var i = 0; i < 3; i++){
this.canY[i] = this.y[i] + Math.ceil(dy);
}
this.t++;
ctx.drawImage(img, this.imgX[index], this.imgY[index], this.imgW[index],
this.imgH[index], this.canX[index], this.canY[index],
this.canW[index], this.canH[index]);
};
給出小鳥計算方程的座標圖
由於canvas的y正方向是向下的，因此跳躍應該位移是先負後正，自由落體又是拋物線，接下來就是數學知識了，圖中能夠看出：
若是this.t > c，dy > 0，因此能夠得出，當this.t = c小鳥到最高點，選c的大小就能夠控制上升和下落的速度
在this.t = c/2時，dy達到了最小值，因此，控制Ymin能夠肯定小鳥的垂直移動最大距離。
要畫小鳥就能夠：
var bird = new Bird();
bird.draw();
3）畫水管：
遊戲畫面中最多出現兩組水管，當第一組水管到中間時，第二組開始出現，當第一組水管從遊戲界面的左邊出去了，第二組水管剛剛到達中間，而最右邊又開始有水管進來，以此類推，不斷重複。
先解決一組水管的畫法，仍然先定義水管類，分爲上水管和下水管：
//基類，屬性的含義同小鳥類
function Pie(){
this.imgY = 751;
this.imgW = 52;
this.imgH = 420;
this.canX = viewSize.width; //默認在畫布的最右邊
this.canW = Math.ceil(80 / 450 * viewSize.width);
this.canH = Math.ceil(this.canW * 420 / 52);
}
//其中top咱們隨機生成，表明的是同一組水管中，上水管的左下角在畫布中的y座標
//上水管類
function UpPie(top){
Pie.call(this); //繼承相同的屬性
this.imgX = 70; //上水管在原圖中的x座標
this.canY = top - this.canH; //上水管在畫布中的y座標計算
this.draw = drawPie;
};
//下水管類
function DownPie(top){
Pie.call(this);
this.imgX = 0;
this.canY = top + Math.ceil(150 / 800 * viewSize.height); //上水管和下水管的距離固定，大小可調
this.draw = drawPie;
}
function drawPie(){
var speed = 2 * k;
this.canX -= speed; //每畫一次就向左邊走
ctx.drawImage(img, this.imgX, this.imgY, this.imgW, this.imgH,
this.canX, this.canY, this.canW, this.canH);
}
而後開始畫水管：
//用一個數組存在畫面中的水管
var Pies = [];
//建立水管函數，首先隨機生成top，而後分別實例化上、下水管而後存進Pies裏
function createPie(){
var minTop = Math.ceil(90 /800 * viewSize.height),
maxTop = Math.ceil(390 /800 * viewSize.height),
top = minTop + Math.ceil(Math.random() * (maxTop - minTop));
Pies.push(new UpPie(top));
Pies.push(new DownPie(top));
};
//畫水管時，首先判斷
//第一組水管出左邊屏幕，移除水管
if(Pies[0].canX <= -Pies[0].canW && Pies.length == 4){
Pies[0] = null;
Pies[1] = null;
Pies.shift();
Pies.shift();
canCount = true;
}
//第一組水管到達中間時建立水管
if(Pies[0].canX <= 0.5 * (viewSize.width - Pies[0].canW) && Pies.length == 2){
createPie();
}
//而後就能夠畫水管
for(var i = 0, len = Pies.length; i < len; i++){
Pies[i].draw();
}
4）畫分數，比較簡單，主要是須要計算居中：
/** * 分數類 */
function Score(){
this.imgX = 900;
this.imgY = 400;
this.imgW = 36;
this.imgH = 54;
this.canW = Math.ceil(36 * k);
this.canH = Math.ceil(54 * k);
this.canY = Math.ceil(50 / 800 * viewSize.height);
this.canX = Math.ceil(viewSize.width / 2 - this.canW / 2);
this.score = 0;
}
Score.prototype.draw = function(){
var aScore = ('' + this.score).split('');
var len = aScore.length;
//計算一下居中
this.canX = 0.5 * (viewSize.width - (this.canW + 10) * len + 10);
for(var i = 0; i < len; i++){
var num = parseInt(aScore[i]);
if(num < 5){
var imgX = this.imgX + num * 40;
var imgY = 400;
}else{
var imgX = this.imgX + (num - 5) * 40;
var imgY = 460;
}
var canX = this.canX + i * (this.canW + 2);
ctx.drawImage(img, imgX, imgY, this.imgW, this.imgH, canX, this.canY, this.canW, this.canH);
}
};
而後畫就簡單了
var score = new Score();
score.draw();
5）畫地板，主要是須要讓它向左移動
//地板類
function Ground(){
this.imgX = 0;
this.imgY = 600;
this.imgH = 112;
this.imgW = 600;
this.canH = Math.ceil(112 * k);
this.canW = Math.ceil(k * 800);
this.canX = 0;
this.canY = viewSize.height - this.canH;
}
Ground.prototype.draw = function(){
if(this.imgX > 24) this.imgX = 0; //由於無限滾動，因此須要無痕接上
ctx.drawImage(img, this.imgX, this.imgY, this.imgW, this.imgH,
this.canX, this.canY, this.canW, this.canH);
this.imgX += 2;
};
畫的時候實例就能夠了：
var ground = new Ground();
ground.draw();
到這裏你就能夠看到水管和地板能夠向後走了，小鳥也能飛起來了，只是會不斷下落，因此咱們要設置點擊彈跳。
第三步：點擊處理
//touchstart是手機端，mousedown是PC端
document.ontouchstart = document.onmousedown = function(e){
//遊戲若是結束點擊無效
if(gameover) return;
if(isStarted){
//遊戲若是開始了，那麼久開始
//剛纔在小鳥飛出頂部我作了點擊屏蔽，
if(canClick){
//當咱們點擊的時候，咱們應該恢復初始狀態，初始狀態就是this.t=0, bird.y[i]儲存了初始高度
for(var i = 0; i < 3; i++){
bird.y[i] = bird.canY[i];
}
bird.t = 0;
}else{
return;
}
}else{
//遊戲沒有開始說明在準備，因此開始
isStarted = true;
}
//在ios客戶端，touch事件以後還會觸發click事件，阻止默認事件就能夠屏蔽了
var e = e || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
};
如今你已經可使小鳥跳躍了，勝利就在前方。
第四步：check函數
檢測小鳥和地板是否碰撞最爲簡單：
//地板碰撞，小鳥的y座標 + 小鳥的高度 >= 地板的y座標，表示撞了地板
if(bird.canY[0] + bird.canH[0] >= ground.canY){
gameover = true;
return;
}
檢測小鳥和水管是否碰撞，能夠化成兩個矩形是否重合，重合的狀況比較複雜，咱們能夠看不重合的狀況：只有4種，如圖：
（1） （2）
（3） （4）
只要符合上面一種狀況就不重合，其他狀況就是重合，因此：
//檢測兩個矩形是否重合，能夠反着看，先找出矩形不重合的狀況，
function isOverLay(r1, r2){
var flag = false;
if(r1.top > r2.bottom || r1.bottom < r2.top || r1.right < re2.left || r1.left > r2.right){
flag = true;
}
//反之就是重合
return !flag;
}
//水管碰撞
var birdRect = {
top: bird.canY[0],
bottom: bird.canY[0] + bird.canH[0],
left: bird.canX[0],
right: bird.canX[0] + bird.canW[0]
};
for(var i = 0, len = Pies.length; i < len; i++){
var t = Pies[i];
var pieRect = {
top: t.canY,
bottom: t.canY + t.canH,
left: t.canX,
right: t.canX + t.canW
};
if(isOverLay(birdRect,pieRect)){
gameover = true;
return;
}
}
還須要檢查是否得分
if(Math.floor(bird.canX[0]) > Math.floor(Pies[0].canX + Pies[0].canW) && canCount){
//小鳥的左邊出了第一組水管的右邊就得分，得分之後，第一組水管還沒出屏幕左邊時不能計算得分
canCount = false;
score.score++;
};
因此check函數爲：
function check(){
function isOverLay(r1, r2){
var flag = false;
if(r1.top > r2.bottom || r1.bottom < r2.top || r1.right < re2.left || r1.left > r2.right){
flag = true;
}
//反之就是重合
return !flag;
}
//地板碰撞
if(bird.canY[0] + bird.canH[0] >= ground.canY){
console.log(viewSize)
console.log(bird.canY[0],bird.canH[0],ground.canY)
gameover = true;
return;
}
//水管碰撞
var birdRect = {
top: bird.canY[0],
bottom: bird.canY[0] + bird.canH[0],
left: bird.canX[0],
right: bird.canX[0] + bird.canW[0]
};
for(var i = 0, len = Pies.length; i < len; i++){
var t = Pies[i];
var pieRect = {
top: t.canY,
bottom: t.canY + t.canH,
left: t.canX,
right: t.canX + t.canW
};
if(isOverLay(birdRect,pieRect)){
gameover = true;
return;
}
}
//是否得分
if(Math.floor(bird.canX[0]) > Math.floor(Pies[0].canX + Pies[0].canW) && canCount){
canCount = false;
score.score++;
};
}
如今遊戲已經能夠玩了，就是還差gameover處理，和從新開始處理了
第五步：gameover處理：
//畫gameover字樣
ctx.drawImage(img, 170, 990, 300, 90, Math.ceil(viewSize.width * 0.5 - k * 277 * 0.5),
Math.ceil(200 / 800 * viewSize.height), 277 * k, 75 * k);
//畫從新開始點擊按鈕
ctx.drawImage(img, 550, 1005, 160, 90, Math.ceil(viewSize.width * 0.5 - k * 160 * 0.5),
Math.ceil(400 / 800 * viewSize.height), 160 * k, 90 * k)
//由於有從新點擊開始，因此在html中有個隱藏的div用來點擊從新開始，如今讓它出現
startBtn.style.display = 'block';
startBtn.style.width = 160 * k + 'px';
startBtn.style.height = 90 * k + 'px';
startBtn.style.left = Math.ceil(viewSize.width * 0.5 - k * 160 * 0.5) + 'px';
startBtn.style.top = Math.ceil(400 / 800 * viewSize.height) + 'px';
//消除定時器
cancelAnimationFrame(timer); //若是用setTimeout就是：cleatTimeout(timer)
//回收資源
ground = null;
bird = null;
score = null;
for(var i = 0, len = Pies.length; i < len; i++){
Pies[i] = null;
}
Pies = [];
第六步：從新開始遊戲處理
startBtn.ontouchstart = startBtn.onmousedown = function(e){
//初始化參數
canClick = true;
gameover = false;
canCount = true;
isStarted = false;
startBtn.style.display = 'none';
ground = new Ground();
bird = new Bird();
score = new Score();
Pies = [];
createPie();
//開定時器
timer = requestAnimationFrame(start); //或者timer = setTimeout(start, 16);
//阻止冒泡到document
var e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = false;
}
}
到此結束，貼上所有代碼，有耐心看完的估計沒有幾個，哈哈哈
html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flappy Bird</title>
<meta name="viewport" content="width=device-width"/>
<style> body,html{ padding:0; margin:0; height:100%; width:100%; backgroung:#f1f1f1; cursor:pointer; overflow: hidden; } canvas{ position:relative; z-index:998; } #restart{ position:absolute; top:0;left:0; z-index:999; display:none; } </style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="restart"></div>
<script src="index.js"></script>
</body>
</html>
js代碼
var viewSize = (function(){
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != 'number') {
if (document.compatMode == 'CSS1Compat') {
pageHeight = document.documentElement.clientHeight;
pageWidth = document.documentElement.clientWidth;
} else {
pageHeight = document.body.clientHeight;
pageWidth = document.body.clientWidth;
}
};
if(pageWidth >= pageHeight){
pageWidth = pageHeight * 360 / 640;
}
pageWidth = pageWidth > 414 ? 414 : pageWidth;
pageHeight = pageHeight > 736 ? 736 : pageHeight;
return {
width: pageWidth,
height: pageHeight
};
})();
(function(){
var lastTime = 0;
var prefixes = 'webkit moz ms o'.split(' '); //各瀏覽器前綴
var requestAnimationFrame = window.requestAnimationFrame;
var cancelAnimationFrame = window.cancelAnimationFrame;
var prefix;
//經過遍歷各瀏覽器前綴，來獲得requestAnimationFrame和cancelAnimationFrame在當前瀏覽器的實現形式
for( var i = 0; i < prefixes.length; i++ ) {
if ( requestAnimationFrame && cancelAnimationFrame ) {
break;
}
prefix = prefixes[i];
requestAnimationFrame = requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ];
cancelAnimationFrame = cancelAnimationFrame || window[ prefix + 'CancelAnimationFrame' ] || window[ prefix + 'CancelRequestAnimationFrame' ];
}
//若是當前瀏覽器不支持requestAnimationFrame和cancelAnimationFrame，則會退到setTimeout
if ( !requestAnimationFrame || !cancelAnimationFrame ) {
requestAnimationFrame = function( callback, element ) {
var currTime = new Date().getTime();
//爲了使setTimteout的儘量的接近每秒60幀的效果
var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );
var id = window.setTimeout( function() {
callback( currTime + timeToCall );
}, timeToCall );
lastTime = currTime + timeToCall;
return id;
};
cancelAnimationFrame = function( id ) {
window.clearTimeout( id );
};
}
//獲得兼容各瀏覽器的API
window.requestAnimationFrame = requestAnimationFrame;
window.cancelAnimationFrame = cancelAnimationFrame;
})()
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
img = new Image(),
k= viewSize.height / 600,
canClick,
gameover,
canCount,
isStarted,
timer,
ground,
bird,
score,
Pies,
startBtn = document.getElementById('restart');
//導入圖像
img.onload = start;
img.src = './img.png';
//設置畫布寬高
canvas.width = viewSize.width;
canvas.height = viewSize.height;
init();
function init(){
canClick = true;
gameover = false;
canCount = true;
isStarted = false;
startBtn.style.display = 'none';
ground = new Ground();
bird = new Bird();
score = new Score();
Pies = [];
createPie();
}
function destroy(){
ground = null;
bird = null;
score = null;
for(var i = 0, len = Pies.length; i < len; i++){
Pies[i] = null;
}
Pies = [];
}
/** * 開始遊戲 */
function start(){
check();
if(gameover){
console.log(1)
ctx.drawImage(img, 170, 990, 300, 90, Math.ceil(viewSize.width * 0.5 - k * 277 * 0.5), Math.ceil(200 / 800 * viewSize.height), 277 * k, 75 * k)
ctx.drawImage(img, 550, 1005, 160, 90, Math.ceil(viewSize.width * 0.5 - k * 160 * 0.5), Math.ceil(400 / 800 * viewSize.height), 160 * k, 90 * k)
startBtn.style.width = 160 * k + 'px';
startBtn.style.height = 90 * k + 'px';
startBtn.style.left = Math.ceil(viewSize.width * 0.5 - k * 160 * 0.5) + 'px';
startBtn.style.top = Math.ceil(400 / 800 * viewSize.height) + 'px';
startBtn.style.display = 'block';
cancelAnimationFrame(timer);
destroy();
}else{
//清除
ctx.clearRect(0,0,viewSize.width,viewSize.height);
//畫背景
ctx.drawImage(img, 0, 0, 800, 600, 0, 0, Math.ceil(k * 800), viewSize.height);
if(isStarted){
//第一組水管出左邊屏幕，移除水管
if(Pies[0].canX <= -Pies[0].canW && Pies.length == 4){
Pies[0] = null;
Pies[1] = null;
Pies.shift();
Pies.shift();
canCount = true;
}
//畫小鳥
bird.draw();
//建立水管
if(Pies[0].canX <= 0.5 * (viewSize.width - Pies[0].canW) && Pies.length == 2){
createPie();
}
//畫水管
for(var i = 0, len = Pies.length; i < len; i++){
Pies[i].draw();
}
}else{
//畫ready
ctx.drawImage(img, 170, 900, 300, 90, Math.ceil(viewSize.width * 0.5 - k * 277 * 0.5), Math.ceil(200 / 800 * viewSize.height), 277 * k, 75 * k)
ctx.drawImage(img, 170, 1150, 230, 150, Math.ceil(viewSize.width * 0.5 - k * 200 * 0.5), Math.ceil(400 / 800 * viewSize.height), 200 * k, 150 * k)
}
//畫分數
score.draw();
//畫地板
ground.draw();
//設置定時器
timer = requestAnimationFrame(start);
}
};
/** * 檢查是否碰撞、得分 */
function check(){
function isOverLay(rect1, rect2){
var flag = false;
if(rect1.top > rect2.bottom || rect1.bottom < rect2.top || rect1.right < rect2.left || rect1.left > rect2.right) flag = true;
return !flag;
}
//地板碰撞
if(bird.canY[0] + bird.canH[0] >= ground.canY){
console.log(viewSize)
console.log(bird.canY[0],bird.canH[0],ground.canY)
gameover = true;
return;
}
//水管碰撞
var birdRect = {
top: bird.canY[0],
bottom: bird.canY[0] + bird.canH[0],
left: bird.canX[0],
right: bird.canX[0] + bird.canW[0]
};
for(var i = 0, len = Pies.length; i < len; i++){
var t = Pies[i];
var pieRect = {
top: t.canY,
bottom: t.canY + t.canH,
left: t.canX,
right: t.canX + t.canW
};
if(isOverLay(birdRect,pieRect)){
gameover = true;
return;
}
}
//是否得分
if(Math.floor(bird.canX[0]) > Math.floor(Pies[0].canX + Pies[0].canW) && canCount){
canCount = false;
score.score++;
};
}
/** * 點擊 */
document.ontouchstart = document.onmousedown = function(e){
if(gameover) return;
if(isStarted){
if(canClick){
for(var i = 0; i < 3; i++){
bird.y[i] = bird.canY[i];
}
bird.t = 0;
}else{
return;
}
}else{
isStarted = true;
}
var e = e || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
};
startBtn.ontouchstart = startBtn.onmousedown = function(e){
var e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = false;
}
init();
timer = requestAnimationFrame(start);
}
/** * 分數類 */
function Score(){
this.imgX = 900;
this.imgY = 400;
this.imgW = 36;
this.imgH = 54;
this.canW = Math.ceil(36 * k);
this.canH = Math.ceil(54 * k);
this.canY = Math.ceil(50 / 800 * viewSize.height);
this.canX = Math.ceil(viewSize.width / 2 - this.canW / 2);
this.score = 0;
}
Score.prototype.draw = function(){
var aScore = ('' + this.score).split('');
var len = aScore.length;
this.canX = 0.5 * (viewSize.width - (this.canW + 10) * len + 10);
for(var i = 0; i < len; i++){
var num = parseInt(aScore[i]);
if(num < 5){
var imgX = this.imgX + num * 40;
var imgY = 400;
}else{
var imgX = this.imgX + (num - 5) * 40;
var imgY = 460;
}
var canX = this.canX + i * (this.canW + 2);
ctx.drawImage(img, imgX, imgY, this.imgW, this.imgH, canX, this.canY, this.canW, this.canH);
}
};
/** * 小鳥類 */
function Bird(){
this.imgX = [170, 222, 275];
this.imgY = [750, 750, 750];
this.imgW = [34, 34, 34];
this.imgH = [24, 24, 24];
this.index = 2;
this.count = 0;
this.step = 1;
var canX = Math.ceil(110 / 450 * viewSize.width);
this.canX = [canX, canX, canX];
var canY = Math.ceil(380 / 800 * viewSize.height);
this.canY = [canY, canY, canY];
var canW = Math.ceil(34 * k);
this.canW = [canW, canW, canW];
var canH = Math.ceil(24 * k);
this.canH = [canH, canH, canH];
this.t = 0;
this.y = [canY, canY, canY];
}
Bird.prototype.draw = function(){
var index = this.index;
//翅膀拍動
this.count++;
if(this.count == 6){
this.index += this.step;
this.count = 0;
}
if((this.index == 2 && this.step == 1) || this.index == 0 && this.step == -1) this.step = - this.step;
//計算垂直位移，使用公式 y = a * t * (t - c)
var c = 0.7 * 60;
var minY = - 85 * viewSize.height / 800;
var a = -minY * 4 / (c * c);
var dy = a * this.t * (this.t - c);
if(this.y[0] + dy < 0){
canClick = false;
}else{
canClick = true;
}
for(var i = 0; i < 3; i++){
this.canY[i] = this.y[i] + Math.ceil(dy);
}
this.t++;
ctx.drawImage(img, this.imgX[index], this.imgY[index], this.imgW[index], this.imgH[index], this.canX[index], this.canY[index], this.canW[index], this.canH[index])
};
/** * 水管基類 */
function Pie(){
this.imgY = 751;
this.imgW = 52;
this.imgH = 420;
this.canX = viewSize.width;
this.canW = Math.ceil(80 / 450 * viewSize.width);
this.canH = Math.ceil(this.canW * 420 / 52);
}
/** * 上水管類 */
function UpPie(top){
Pie.call(this);
this.imgX = 70;
this.canY = top - this.canH;
this.draw = drawPie;
};
UpPie.prototype = new Pie();
/** * 下水管類 */
function DownPie(top){
Pie.call(this);
this.imgX = 0;
this.canY = top + Math.ceil(150 / 800 * viewSize.height);
this.draw = drawPie;
}
DownPie.prototype = new Pie();
function drawPie(){
var speed = 2 * k;
this.canX -= speed;
ctx.drawImage(img, this.imgX, this.imgY, this.imgW, this.imgH, this.canX, this.canY, this.canW, this.canH);
}
/** * 建立水管 */
function createPie(){
var minTop = Math.ceil(90 /800 * viewSize.height),
maxTop = Math.ceil(390 /800 * viewSize.height),
top = minTop + Math.ceil(Math.random() * (maxTop - minTop));
Pies.push(new UpPie(top));
Pies.push(new DownPie(top));
};
/** * 地板類 */
function Ground(){
this.imgX = 0;
this.imgY = 600;
this.imgH = 112;
this.imgW = 600;
this.canH = Math.ceil(112 * k);
this.canW = Math.ceil(k * 800);
this.canX = 0;
this.canY = viewSize.height - this.canH;
}
Ground.prototype.draw = function(){
if(this.imgX > 24) this.imgX = 0;
ctx.drawImage(img, this.imgX, this.imgY, this.imgW, this.imgH, this.canX, this.canY, this.canW, this.canH);
this.imgX += 2;
};
相關文章
- 1. JavaScript操做canvas製做前端H5小遊戲——Flappy Bird
- 2. canvas小遊戲——flappy bird
- 3. JavaScript 實現flappy bird小遊戲
- 4. 6.HTML5--製做Flappy Bird
- 5. canvas 製做flappy bird（像素小鳥）全流程
- 6. 用Phaser來製做一個html5遊戲——flappy bird （一）
- 7. 用Phaser來製做一個html5遊戲——flappy bird （二）
- 8. h5遊戲製做
- 9. 遊戲製做（h5）
- 10. 統統制做Html5小遊戲——第二彈（仿flappy bird像素鳥）
- 更多相關文章...
- • JavaScript 指南 - 網站建設指南
- • WSDL 端口 - WSDL 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 漫談MySQL的鎖機制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. JavaScript操做canvas製做前端H5小遊戲——Flappy Bird
- 2. canvas小遊戲——flappy bird
- 3. JavaScript 實現flappy bird小遊戲
- 4. 6.HTML5--製做Flappy Bird
- 5. canvas 製做flappy bird（像素小鳥）全流程
- 6. 用Phaser來製做一個html5遊戲——flappy bird （一）
- 7. 用Phaser來製做一個html5遊戲——flappy bird （二）
- 8. h5遊戲製做
- 9. 遊戲製做（h5）
- 10. 統統制做Html5小遊戲——第二彈（仿flappy bird像素鳥）