北京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="my0" width="200" height="200" style="background: gainsboro;"></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="my1" width="200" height="200" style="background: gainsboro;"></canvas>
結構中先新增對應的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="my2" width="200" height="200" style="background: gainsboro;"></canvas>
結構中先新增對應的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="my3" width="200" height="200" style="background: gainsboro;"></canvas>
<canvas id="my31" width="200" height="200" style="background: gainsboro;"></canvas>
結構中先新增對應的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="my4" width="200" height="200" style="background: gainsboro;"></canvas>
結構中先新增對應的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="my5" width="200" height="200" style="background: gainsboro;"></canvas>
<img src="img/zm.jpg" id="czs"/>
結構中先新增對應的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
首先現將結構搭建完整
<body onLoad="init();">
<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模組:
<script type="text/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 + 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
156行程式碼實現flappybird --HTML5之canvas場景秀、遊戲、粒子運動等等 Flappybird是什麼呀?不知道?Oh No~ 想起來了吧?風靡一時的小遊戲,可玩性極高,不知不覺時間就過去了。 現在,讓我們解密web前端canvas實現flap
北京web前端開發工程師,別讓這個習慣毀了你
ZUI近,我發現周圍一些朋友有個共性:做事有激情,很積極,也有自己的目標,但是總是對待目標沒有進展,因為他們覺得現在做不能做得很好,反而就不去做了。 大家可能覺得這個理由很莫名其妙,但其實這是很常見的一種現象。大家都會報一些有意義有價值的網課在週末學習,但為什麼有的人報了
北京web前端開發工程師,不走捷徑其實你已經選擇了彎路
腳踏實地,一步一個腳印,不要想著捷徑,天上不會掉餡餅。這句大多人聽得都應該起繭子了,從小我們也是這麼被老師父母教育過來的,我昨天看到有人說了一句:“所有你以為的捷徑,ZUI後都變成彎路” 大家可能對捷徑有著深深的誤解,捷徑並不是真的等天
原生JS實現tab切換--web前端開發
soft 楊冪 microsoft hidden isp 老婆 tex oct rip tab切換非常常見,應用非常廣泛,比較實用,一般來說是一個網站必不可少的一個效果。例如:https://123.sogou.com/中的一個tab部分: 1、案例源代碼 <!DO
《編寫高質量程式碼--web前端開發修煉之道》筆記-CSS
此篇為本筆記的第二篇 標準模式與怪異模式(模擬老式瀏覽器的行為) 如果漏寫了DTD宣告,Firefox仍然會按照標準模式來解析網頁,但在IE中(包括IE6,IE7,IE8)就會觸發怪異模式 IE盒模型的解析 標準模式:網頁元素的寬度有padding,bo
編寫高質量程式碼:Web前端開發修煉之道(三)
第五章:高質量的Javascript 這章的內容我看的最久,這是跟我js基礎沒打好有著莫大的關係,但是還是耐著性子看完了, 不懂的東西都是百度上搜索,理解後再繼續。下面是記錄下來的筆記。 1)如何避免JS衝突 A:匿名函式 在多人合作一個網站時,每個人都會寫自己的
微信網頁開發的一些感想,順便附上微信中呼叫掃一掃史上最簡便的方法 5行程式碼實現H5掃一掃 HTML5掃一掃最簡便的辦法
呼叫範例完整程式碼下載: csdn的這個博文寫的有點囉嗦,建議移步這裡: 在網頁上點一個按鈕或者連結呼叫微信掃一掃然後返回結果我們繼續處理,很多人應該都會有這樣的需求,不過微信對這個空子比較嚴格,需要你的網頁有簽名,而簽名生成需要有一個微信公眾號的appk
WEB前端開發:輪播圖的實現(H5+C3+JavaScript)(JQuery)
一、輪播圖的概念 輪播圖就是一種網站在介紹自己的主打產品或重要資訊的傳播方式。說的簡單點就是將承載著重要資訊的幾張圖片,在網頁的某一部位進行輪流的呈現,從而做到讓瀏覽者很快的瞭解到網站想要表達的主要資訊。例如:淘寶,京東,等大型的購物平臺。以及各種新聞網站的頭版頭條都是用這
Web前端開發實戰6:CSS實現導航選單結合二級下拉式選單的簡單變換
前面幾篇博文都在講導航選單和二級下拉式選單,其實有很多方法都可以實現的,具體的情況還要視情況而定。 在後面學習到jQuery框架之後,會有更豐富的動畫效果,由於在學習Ajax和jQuery的初步階段,對於很多的複雜的導 航菜單和二級下拉式選單沒法做,但是學習了
web端設計和web前端開發 的區別
mage ima cnblogs 前端開發 src web前端開發 log alt .cn web端設計和web前端開發 的區別
移動前端開發和 Web 前端開發的區別
平臺 所有 ref 答案 關聯 工程師 禁止 全屏 分享 pc,我們需要考慮什麽呢?有點開發經驗的同學都知道,ie6-11,firefox,chrome,safari都得兼容的吧。哪個都夠你吃一壺的,無論是css還是js。mobile的網頁開發,我們需要考慮什麽呢?就目前
學web前端開發,哪個機構好呢
是否 高效 規範 隨著 深入 十分 目前 前端工程師 深入淺出 學習web前端開發已然成為一種潮流,甚至有很多做後臺的轉行來學。學習web開發,選擇一家好的web前端開發機構至關重要。但是,現在各類的web前端開發機構如雨後春筍般迅速崛起,這也增加了我們的選擇難度。那麽,學
Web前端開發實戰4:導航菜單(一)
pan 解決 博文 xmlns 背景圖 20px mar 水平 經典 在前面的博文中我們提到橫向一級菜單,這裏我們來看看導航菜單。導航菜單種類非常多,可是制作原理都是大同 小異的。這裏看的比二級下拉式菜單還簡單。來看一些站點上的導航菜單:
web前端開發前景
前途 註意 在家 避免 的人 其他 而不是 來源 模仿 老是有人喜歡討論說做前端開發有前途沒有,前幾天還有一個剛畢業的大學生問我。說實話我也不知道怎麽樣,但是我很喜歡做前端開發。要說做業務是挑戰自己,做前端開發也是很挑戰自己的,因為信息更新速度很快,要斷的學習,去研究。下面
做Web前端開發,需要熟悉計算機專業課嗎?
Web前端需要熟悉大學裏[高大上]計算機專業課嗎? 這裏說的『高大上』的專業課,主要指算法、數據結構、操作系統、編譯原理、線性結構、離散數學等等。 對於大學不是計算機專業,但以後想要從事前端開發工作的同學來說,這些『高大上』的計算機專業課是否有必要花時間去了解呢? 以下內容整
愛創課堂----Web前端開發的工資如何?都要學習哪些技術?
node 互聯網 前端 今天來和大家講講Web前端開發需要學習什麽?前端開發又需要用到哪些開發工具?然後分享一些前端開發的免費課程給大家,然後也簡單的和大家介紹下前端開發的前景和薪水工資情況,下面就簡單和大家介紹一下。1. Web前端的職能Web前端工程師其實在不同的公司,有不同的職能,但是稱呼都
王者九段你屬於哪個段位的web前端開發工程師
web開發 前端工程師 大概在很多人眼裏,前端就是切切圖,只要自學能夠將設計師的PSphotoshop圖轉換成網頁就能找到一份月薪不錯的工作。然而真的是這樣嗎?前端自學就可以勝任嗎?前端開發簡單嗎?後來入行前端才發現,前端真的不是只有切圖而已,你那只能算是青銅段位的按圖索驥,真正的前端按著段位
web前端開發面試題(未完待續)
tex ora 相對 設置 erl 思路 實現 多列 寬度 一、HTML與XHTML的不同:1)XHTML元素必須被正確地嵌套 2)元素必須被關閉 如:<h1>……&l
Web前端開發規範收集
mod 流量 idt jquery version 目的 文件夾 -i service 在Web開發中,後端跟前端配合非常easy出現故障。這時我們就須要一些規則來約束前端任意的編寫。 CSS編程規範 1. 屬性書寫基本順序 a. 先位置屬
我的IT夢——web前端開發之HTML,CSS(一)
jpg 標記語言 方便 add body 前端 input cti 列表 HTML HTML全稱HyperText Markup Language(超文本標記語言) 標簽成對出現 <!DOCTYPE html> 文檔類型定義 < > 標