canvas做游戲?qū)嵺`分享

《canvas做游戲?qū)嵺`分享》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

1、HTML5教程

2、來(lái)自www.fanganwang.comCanvas做游戲?qū)嵺`分享1.游戲的基本內(nèi)容1.1什么是動(dòng)畫(huà)?????動(dòng)畫(huà)是通過(guò)連續(xù)播放一系列畫(huà)面，給視覺(jué)造成連續(xù)變化的圖畫(huà)。它的基本原理與電影、電視一樣，都是視覺(jué)原理。醫(yī)學(xué)已證明，人類(lèi)具有視覺(jué)暫留的特性，就是說(shuō)人的眼睛看到一幅畫(huà)或一個(gè)物體后，在1/24秒內(nèi)不會(huì)消失。利用這一原理，在一幅畫(huà)還沒(méi)有消失前播放出下一幅畫(huà)，就會(huì)給人造成一種流暢的視覺(jué)變化效果。因此，電影采用了每秒24幅畫(huà)面的速度拍攝播放，電視采用了每秒25幅（PAL制，中央電視臺(tái)的動(dòng)畫(huà)就是PAL制）或30幅（NSTC制）畫(huà)面的速度拍攝播放。如果以每秒低于24

3、幅畫(huà)面的速度拍攝播放，就會(huì)出現(xiàn)停頓現(xiàn)象。???????從播放效果上看，分為順序動(dòng)畫(huà)（連續(xù)動(dòng)作）和交互式動(dòng)畫(huà)（反復(fù)動(dòng)作）。逐幀動(dòng)畫(huà)是一種常見(jiàn)的動(dòng)畫(huà)形式（FrameByFrame），其原理是在“連續(xù)的關(guān)鍵幀”中分解動(dòng)畫(huà)動(dòng)作，也就是在時(shí)間軸的每幀上逐幀繪制不同的內(nèi)容，使其連續(xù)播放而成動(dòng)畫(huà)。1.2使用HTML5來(lái)做動(dòng)畫(huà)???????HTML5制作的動(dòng)畫(huà)主要是逐幀動(dòng)畫(huà)。目前主要有DOM,SVG與Canvas三種方式來(lái)實(shí)現(xiàn)。在此我們主要討論Canvas方式來(lái)制作動(dòng)畫(huà)。Canvas的支持???????到目前為止，基本所有瀏覽器?的最新版本均提供了對(duì)canvas的全面支持?；凇皾u近增強(qiáng)

4、，優(yōu)雅降級(jí)”的移動(dòng)互聯(lián)網(wǎng)應(yīng)用體驗(yàn)，如果用戶(hù)使用的瀏覽器版本較低，可以在canvas標(biāo)簽中寫(xiě)入信息來(lái)提示用戶(hù)升級(jí)瀏覽器。如：HTML5教程

5、來(lái)自www.fanganwang.com您的瀏覽器不支持此動(dòng)畫(huà)，請(qǐng)升級(jí)您的瀏覽器?如果要使用編程的方式來(lái)檢測(cè)對(duì)于canvas的支持程度，可以使用如下代碼：if(document.createElement(“canvas”).getContext(“2d”)){console.log(“當(dāng)前瀏覽器支持canvas”);}當(dāng)然，也可以引入第三方的開(kāi)源JavaScript庫(kù)(http://code.goog

6、le.com/p/explorercanvas/),在不支持canvas的瀏覽器中來(lái)模擬canvas的各種API。由于各個(gè)設(shè)備及瀏覽器版本的實(shí)現(xiàn)方式不同，為了保證用戶(hù)得到一致的體驗(yàn)，我們需要在盡可能多的設(shè)備及瀏覽器上對(duì)我們的游戲進(jìn)行測(cè)試及調(diào)優(yōu)。HTML5基本文檔模板?????????我們的游戲需要在一個(gè)HTML文檔中的canvas標(biāo)簽中渲染，在此我們創(chuàng)建一個(gè)最基本的HTML文檔模板。如下

7、ype=”text/css”href="style.css">window.onload=function(){};HTML5教程

8、來(lái)自www.fanganwang.com簡(jiǎn)單瀏覽一下，剛開(kāi)始我們定義了HTML5文檔類(lèi)型，之后定義了header標(biāo)簽，引用了外部的CSS文件。然后在body中定義了一個(gè)canvas標(biāo)簽來(lái)做為我們的游戲渲染容器。在

9、body標(biāo)簽結(jié)束前，我們創(chuàng)建了一個(gè)script標(biāo)簽，在其中來(lái)使用JavaScript來(lái)實(shí)現(xiàn)我們的游戲(之所以在header中使用link標(biāo)簽來(lái)加載外部css文件，或在body結(jié)束標(biāo)簽前再定義script標(biāo)簽、引入外部JavaScript文件，是為了保證頁(yè)面的逐步呈現(xiàn)速度，保證瀏覽器更高效地渲染HTML頁(yè)面，提高腳本下載的并行度，參見(jiàn)SteveSouders大神的《高性能網(wǎng)站建設(shè)指南》).?????可以看到，在腳本中我們?yōu)閣indow對(duì)象的onload事件指定了回調(diào)函數(shù)，即在所有的文檔元素加載完成后，再執(zhí)行回調(diào)函數(shù)中的程序。這可以保證canvas標(biāo)簽在我們使用之前已經(jīng)創(chuàng)建成

10、功。當(dāng)然，如果當(dāng)前的HTML文檔中有大量的資源（如圖片，音樂(lè)等）需要加載，那我們的window.onload事件會(huì)需要等待很長(zhǎng)的時(shí)間才能執(zhí)行，在這種情況下最好是使用腳本來(lái)動(dòng)態(tài)加載相應(yīng)的資源，之后會(huì)介紹到相關(guān)的知識(shí)。其它?隨著開(kāi)發(fā)游戲的復(fù)雜度增加，我們的代碼量及程序復(fù)雜度會(huì)隨之增長(zhǎng)，這就需要我們對(duì)游戲進(jìn)行建模，將代碼按一定的規(guī)則放置在外部腳本文件中引入。同時(shí)，游戲開(kāi)發(fā)中一個(gè)好的編輯器與調(diào)試工具也會(huì)得到事半功倍的效果。在此我們使用?sublimetext2?來(lái)做為編輯器，使用?chrome?中的開(kāi)發(fā)人員工具來(lái)做為調(diào)試工具。?1.3