北京web前端開發156行程式碼實現flappybird

156行程式碼實現flappybird

--HTML5之canvas場景秀、遊戲、粒子運動等等

Flappybird是什麼呀？不知道？Oh No~

想起來了吧？風靡一時的小遊戲，可玩性極高，不知不覺時間就過去了。

現在，讓我們解密web前端canvas實現flappybird！難麼？不不不~僅僅只需要156行程式碼就可以了。十分鐘就可以自己製作一個小遊戲，怎麼樣？來來來~帶上你的鍵盤，讓我們浪跡canvas！

Canvas是什麼？

官方：HTML5<canvas>元素（畫布）使用者圖形繪製，通過指令碼完成;標籤僅僅知識圖形的容器，必須用指令碼來繪製圖形;多種方法繪製路徑、盒、圓、字元和新增影象等等。

CZS解析：說白了，canvas就是你在頁面裡面畫畫用的，畫個圓，做個折現等等，配合這JavaScript讓對應的圖形被你所控制，就這麼簡單。

CZS提示：

瀏覽器支援版本Chrome4.0、IE9.0、Firefox2.0、Safari3.1、Opera9.0；
canvas預設矩形，無邊框和內容，指定id這樣便於在指令碼中呼叫，可以有多個canvas，可以使用style新增樣式。

Canvas應用場景

網頁遊戲：運用Canvas製作的影象能夠令HTML5遊戲在流暢度和跨平臺方面發揮更大的潛力；
圖形：似於圖形編輯設計工具將能夠100%基於Web實現；
後臺工具：使用HTML/CSS完成圖示製作，其實完全可以用Canvas來實現，使資料視覺化；

網頁富媒體：網頁中內嵌的圖表、音訊、視訊，還有許多富媒體元素不再需要任何類似Flash的外掛。

Canvas基礎

繪製圖形

結構中先新增對應的canvas標籤，設定對應的大小和id，然後利用JavaScript進行編輯；

//獲取對應的元素

var $cvs0=document.getElementById("my0");

//建立context物件

var cvs0=$cvs0.getContext("2d");

//填充顏色，預設黑色，可以設定漸變、圖案和css顏色

cvs0.fillStyle="aqua";

//矩形當前填充方式fillRect(x,y,width,height);x、y起始位置，width和 height繪製圖形寬高

cvs0.fillRect(0,0,120,20);

效果圖：

你肯定有疑問說，這不就是父子級div套嵌而已，兄die兒~別急嘛~繼續往後瞅瞅！

繪製路徑（線條）

結構中先新增對應的canvas標籤，設定對應的大小和id，然後利用JavaScript進行編輯；

var $cvs1=document.getElementById("my1");

var cvs1=$cvs1.getContext("2d");

//開始座標

cvs1.moveTo(50,10);

//結束座標

cvs1.lineTo(170,120);

//繪製線條

cvs1.stroke();

效果圖：

嘿嘿~不一樣了吧~

繪製圓弧

結構中先新增對應的canvas標籤，設定對應的大小和id，然後利用JavaScript進行編輯；

var $cvs2=document.getElementById("my2");

var cvs2=$cvs2.getContext("2d");

cvs2.beginPath();

//arc(x,y,r,start,stop);x、y圓心位置，start起始位置，stop終止位置

cvs2.arc(100,100,30,1*Math.PI,1.75*Math.PI);

cvs2.stroke();

效果圖：

兄die兒，你螢幕上不是頭髮，別吹了，這是canvas繪製的哦~

繪製文字

這裡你肯定會說p標籤解決不就行了，何必要用canvas呢？那麼我們看看下面這兩張圖，瞅瞅你的p標籤能實現麼？

是不是很神奇？

讓我們瞅瞅怎麼實現的吧！

結構中先新增對應的canvas標籤，設定對應的大小和id，然後利用JavaScript進行編輯；

var $cvs3=document.getElementById("my3");

var cvs3=$cvs3.getContext("2d");

//設定字型和字號

cvs3.font="40px Arial";

//填充文字內容，下面兩週方式，其中一個就可以了

//cvs3.fillText("Hello CZS!",0,18);

cvs3.strokeText("Hello CZS!",0,40);

var $cvs31=document.getElementById("my31");

var cvs31=$cvs31.getContext("2d");

//先繪製漸變的模組大小和起始點終止點

var grdCvs31=cvs31.createLinearGradient(0,0,200,50);

//設定起始點的顏色

grdCvs31.addColorStop(0,"red");

//設定終止點的顏色

grdCvs31.addColorStop(1,"aqua");

//將漸變塊新增到對應的文字內容樣式中

cvs31.fillStyle=grdCvs31;

cvs31.font="40px Arial";

//只能應用fillText()進行設定

cvs31.fillText("Hello CZS!",0,40);

漸變

上面既然說了漸變，那麼我們來完善一下漸變的應用吧！

結構中先新增對應的canvas標籤，設定對應的大小和id，然後利用JavaScript進行編輯；

var $cvs4=document.getElementById("my4");

var cvs4=$cvs4.getContext("2d");

//繪製漸變線條createLinearGradient(x,y,x1,y1);x、y起始位置；x1、y1終止位置

var grdCvs4=cvs4.createLinearGradient(0,0,150,150);

grdCvs4.addColorStop(0,"salmon");

grdCvs4.addColorStop(0.5,"transparent");

grdCvs4.addColorStop(1,"rgb(14,144,144)");

cvs4.fillStyle=grdCvs4;

cvs4.fillRect(0,0,150,150);

繪製圖片

最後要繪製一張圖片啦~

結構中先新增對應的canvas標籤，設定對應的大小和id，然後利用JavaScript進行編輯；

var $cvs5=document.getElementById("my5");

var cvs5=$cvs5.getContext("2d");

var czs=document.getElementById("czs");

czs.onload=function(){

cvs5.drawImage(czs,0,0,150,200);

}

效果圖：

Canvas實現Flappybird

首先現將結構搭建完整

<style>

*{margin: 0;padding: 0;}

</style>

<canvas id="canvas" width="400" height="600" style="margin: 0 auto;display: block;">Your browser is not support canvas! </canvas>

</body>

難以置信麼？對！就是這麼簡單的結構。下面才是重頭戲哦~

我們的JavaScript模組：

var ctx;

var cwidth = 400;

var cheight = 600;

var objects = [];

var birdIndex = 0;

var ver1 = 10;

var ver2;

var gravity = 2;

var pipe_height = 200;

var velocity = 10;

var tid;

var score = 0;

var isScore = false;

var birds = ["./images/0.gif", "./images/1.gif", "./images/2.gif"];

var back = new Background(0, 0, 400, 600, "./images/bg.png");

var up_pipe = new UpPipe(0, 0, 100, 200, "./images/pipe.png");

var down_pipe = new DownPipe(0, 400, 100, 200, "./images/pipe.png");

var ground = new Background(0, 550, 400, 200, "./images/ground.png");

var bird = new Bird(80, 300, 40, 40, birds);

objects.push(back);

objects.push(up_pipe);

objects.push(down_pipe);

objects.push(ground);

objects.push(bird);

function UpPipe(x, y, width, height, img_src) {

this.px = x;

this.py = y;

this.pwidth = width;

this.pheight = height;

this.img_src = img_src;

this.draw = drawUpPipe;

}

function DownPipe(x, y, width, height, img_src) {

this.px = x;

this.py = y;

this.pwidth = width;

this.pheight = height;

this.img_src = img_src;

this.draw = drawDownPipe;

}

function drawUpPipe() {

var image = new Image();

image.src = this.img_src;

ctx.drawImage(image, 150, 500, 150, 800, this.px, this.py, this.pwidth, this.pheight);

}

function drawDownPipe() {

var image = new Image();

image.src = this.img_src;

ctx.drawImage(image, 0, 500, 150, 500, this.px, this.py, this.pwidth, this.pheight);

}

function Background(x, y, width, height, img_src) {

this.bgx = x;

this.bgy = y;

this.bgwidth = width;

this.bgheight = height;

var image = new Image();

image.src = img_src;

this.img = image;

this.draw = drawbg;

}

function drawbg() {

ctx.drawImage(this.img, this.bgx, this.bgy, this.bgwidth, this.bgheight);

}

function Bird(x, y, width, height, img_srcs) {

this.bx = x;

this.by = y;

this.bwidth = width;

this.bheight = height;

this.imgs = img_srcs;

this.draw = drawbird;

}

function drawbird() {

birdIndex++;

var image = new Image();

image.src = this.imgs[birdIndex % 3];

ctx.drawImage(image, this.bx, this.by, this.bwidth, this.bheight);

}

function calculator() {

if(bird.by + bird.bheight > ground.bgy ||

((bird.bx + bird.bwidth > up_pipe.px) && (bird.by > up_pipe.py) && (bird.bx + bird.bwidth < up_pipe.px + up_pipe.pwidth) && (bird.by < up_pipe.py + up_pipe.pheight)) ||

((bird.bx > down_pipe.px) && (bird.by > down_pipe.py) && (bird.bx < down_pipe.px + down_pipe.pwidth) && (bird.by < down_pipe.py + down_pipe.pheight)) ||

((bird.bx > down_pipe.px) && (bird.by + bird.bheight > down_pipe.py) && (bird.bx < down_pipe.px + down_pipe.pwidth) && (bird.by + bird.bheight < down_pipe.py + down_pipe.pheight))) {

clearInterval(tid);

ctx.fillStyle = "rgb(255,255,255)";

ctx.font = "30px Accent";

ctx.fillText("You got " + score + "!", 110, 100)

return;

}

ver2 = ver1 + gravity;

bird.by += (ver2 + ver1) * 0.5;

if(up_pipe.px + up_pipe.pwidth > 0) {

up_pipe.px -= velocity;

down_pipe.px -= velocity;

} else {

up_pipe.px = 400;

down_pipe.px = 400;

up_pipe.pheight = 100 + Math.random() * 200;

down_pipe.py = up_pipe.pheight + pipe_height;

down_pipe.pheight = 600 - down_pipe.py;

isScore = true;

}

if(isScore && bird.bx > up_pipe.px + up_pipe.pwidth) {

score += 1;

isScore = false;

if(score > 0 && score % 10 === 0) {

velocity++;

}

ctx.fillStyle = "rgb(255,255,255)";

ctx.font = "30px Accent";

if(score > 0) {

score % 10 !== 0 ? ctx.fillText(score, 180, 100) : ctx.fillText("Great!" + score, 120, 100);

}

function drawall() {

ctx.clearRect(0, 0, cwidth, cheight);

var i;

for(i = 0; i < objects.length; i++) {

objects[i].draw();

}

calculator();

}

function keyup(e) {

var e = e || event;

var currKey = e.keyCode || e.which || e.charCode;

switch(currKey) {

case 32:

bird.by -= 80;

break;

}

function init() {

ctx = document.getElementById('canvas').getContext('2d');

document.onkeyup = keyup;

document.onclick = function(){

bird.by -= 80;

};

drawall();

tid = setInterval(drawall, 80);

}

</script>

北京web前端開發156行程式碼實現flappybird

北京web前端開發156行程式碼實現flappybird

北京web前端開發工程師，別讓這個習慣毀了你

北京web前端開發工程師，不走捷徑其實你已經選擇了彎路

原生JS實現tab切換--web前端開發

《編寫高質量程式碼--web前端開發修煉之道》筆記-CSS

編寫高質量程式碼:Web前端開發修煉之道（三）

微信網頁開發的一些感想，順便附上微信中呼叫掃一掃史上最簡便的方法 5行程式碼實現H5掃一掃 HTML5掃一掃最簡便的辦法

WEB前端開發：輪播圖的實現（H5+C3+JavaScript）(JQuery)

Web前端開發實戰6：CSS實現導航選單結合二級下拉式選單的簡單變換

web端設計和web前端開發的區別

移動前端開發和 Web 前端開發的區別

學web前端開發，哪個機構好呢

Web前端開發實戰4：導航菜單(一)

web前端開發前景

做Web前端開發，需要熟悉計算機專業課嗎?

愛創課堂----Web前端開發的工資如何？都要學習哪些技術？

王者九段你屬於哪個段位的web前端開發工程師

web前端開發面試題（未完待續）

Web前端開發規範收集

我的IT夢——web前端開發之HTML,CSS（一）

北京web前端開發156行程式碼實現flappybird

相關推薦