基于HTML5的益智游戲2048的實(shí)現(xiàn)

21/21HTML5選修課期末論文題目：基于HTML5的益智游戲2048的實(shí)現(xiàn)學(xué)院：信息工程學(xué)院專業(yè)：姓名：指導(dǎo)教師：

摘要《2048》是比較流行的一款數(shù)字游戲。原版2048首先在GitHub上發(fā)布，原作者是GabrieleCirulli。它是基于《1024》和《小3傳奇》的玩法開(kāi)發(fā)而成的新型數(shù)字游戲。2014年GabrieleCirulli利用周末的時(shí)間寫2048這個(gè)游戲的程序，僅僅只是好玩而已。他想用一種不同的視覺(jué)展現(xiàn)效果和更快速的動(dòng)畫來(lái)創(chuàng)造屬于我自己的游戲版本。作者的初衷就是覺(jué)得好玩，在將其開(kāi)源版本放到Github上后，意外在網(wǎng)絡(luò)上走紅。各大平臺(tái)的開(kāi)發(fā)者基于原版的2048開(kāi)發(fā)出了各種各樣的2048版本，有傳統(tǒng)版，六邊形版，朝代版，20483D中文版，2048后宮版等等。但是，美中不足的是該游戲的是作為移動(dòng)游戲開(kāi)發(fā)的，PC玩家起初是無(wú)法玩的，這次，我便把2048的原版游戲在PC通過(guò)HTML5和javascript技術(shù)來(lái)實(shí)現(xiàn)。該游戲保持了原版游戲的規(guī)則，由于PC端操作方式的限制，游戲暫時(shí)無(wú)法通過(guò)觸控的方式來(lái)玩，玩家可以通過(guò)用鼠標(biāo)模擬手指操作手機(jī)的方式來(lái)玩這個(gè)游戲。該游戲是在瀏覽器端實(shí)現(xiàn)的，推薦使用Chrome或火狐瀏覽器的較新的版本，這樣游戲的體驗(yàn)性會(huì)達(dá)到最好。本游戲主要采用當(dāng)前最為流行的html5技術(shù)，CSS技術(shù)和javascript技術(shù)開(kāi)發(fā)。Html5和CSS3主要用來(lái)開(kāi)發(fā)游戲界面，javascript主要用來(lái)編寫游戲的代碼，實(shí)現(xiàn)游戲用到的各種算法。關(guān)鍵字：HTML5,CSS,javascript,2048,游戲目錄緒論1.1開(kāi)發(fā)背景································41.2開(kāi)發(fā)內(nèi)容································5游戲開(kāi)發(fā)的相關(guān)技術(shù)2.1開(kāi)發(fā)工具介紹····························62.1.1visualstudio2013介紹·················62.2開(kāi)發(fā)運(yùn)用技術(shù)介紹························72.2.1HTML5介紹··························72.2.2javascript介紹························82.2.3jquery介紹··························8功能3.1游戲功能結(jié)構(gòu)圖·························103.2游戲代碼結(jié)構(gòu)···························11設(shè)計(jì)內(nèi)容2048游戲代碼·····························12運(yùn)行測(cè)試游戲過(guò)程截圖·····························20參考文獻(xiàn)···································211.緒論1.1開(kāi)發(fā)背景伴隨著技術(shù)的革新，手機(jī)也面臨著一次次的更新?lián)Q代，每一次的技術(shù)革新，都將被很多人關(guān)注，手機(jī)更新的浪潮也是不斷襲來(lái)。第一代iPhone于2007年發(fā)布，2008年7月11日，蘋果公司推出iPhone3G。自此，智能手機(jī)的發(fā)展開(kāi)啟了新的時(shí)代。緊隨其后，谷歌發(fā)布了Android智能手機(jī)操作系統(tǒng)。隨后，智能手機(jī)席卷全球，在全球各地區(qū)掀起了一股換機(jī)熱潮。智能手機(jī)，顧名思義，“智能”兩個(gè)字是其最大的特點(diǎn)。智能手機(jī)，是指像個(gè)人電腦一樣，具有獨(dú)立的操作系統(tǒng)，獨(dú)立的運(yùn)行空間，可以由用戶自行安裝軟件、游戲、導(dǎo)航等第三方服務(wù)商提供的程序，并可以通過(guò)移動(dòng)通訊網(wǎng)絡(luò)來(lái)實(shí)現(xiàn)無(wú)線網(wǎng)絡(luò)接入手機(jī)類型的總稱。在第三方應(yīng)用程序中，游戲占據(jù)了很大的比重。正是因此，全球的開(kāi)發(fā)者近幾年越來(lái)越多的轉(zhuǎn)向移動(dòng)游戲的開(kāi)發(fā)。GabrieleCirulli利用周末的時(shí)間寫2048這個(gè)游戲的程序，起初僅僅只是好玩而已，但沒(méi)想到上傳到網(wǎng)絡(luò)以后使其意外走紅。但是，該游戲是為手機(jī)端開(kāi)發(fā)的。鑒于有些玩家跟喜歡在PC端玩游戲，這次，我便想把2048這個(gè)風(fēng)靡全球的小游戲在PC端通過(guò)瀏覽器在本地實(shí)現(xiàn)?！?.2開(kāi)發(fā)內(nèi)容本游戲在PC端的實(shí)現(xiàn)主要是依靠瀏覽器實(shí)現(xiàn)。開(kāi)發(fā)平臺(tái)主要采用visualstudio2013和谷歌chrome瀏覽器。語(yǔ)言主要采用了還HTML5和javascript相結(jié)合的方式，目的是為了達(dá)到更好的游戲效果。HTML5和CSS相結(jié)合構(gòu)建游戲界面，借用javascript和jquery庫(kù)來(lái)對(duì)游戲進(jìn)行編碼。2.游戲開(kāi)發(fā)的相關(guān)技術(shù)2.1開(kāi)發(fā)工具介紹本游戲的開(kāi)發(fā)工具選擇visualstudio2013來(lái)進(jìn)行來(lái)發(fā)。用HTML5和javascript作為主要語(yǔ)言，其中還用到了CSS的排版布局以及調(diào)用jquery類庫(kù)。2.1.1visualstudio2013介紹VisualStudio2013美國(guó)軟件巨頭微軟開(kāi)發(fā)的一款功能強(qiáng)大的IDE，適用于各種開(kāi)發(fā)人員。通過(guò)使用單個(gè)IDE，可以創(chuàng)建面向Windows、iOS、Android等的多平臺(tái)應(yīng)用。Web、移動(dòng)和云開(kāi)發(fā)工具構(gòu)建面向Windows、Android和iOS的應(yīng)用集成的設(shè)計(jì)器、編輯器、調(diào)試器和探查器采用C#、C++、JavaScript、Python、TypeScript、VisualBasic、F#等進(jìn)行編碼能夠部署、調(diào)試和管理MicrosoftAzure服務(wù)成千上萬(wàn)的擴(kuò)展（從PHP到游戲）2.2開(kāi)發(fā)運(yùn)用技術(shù)介紹2.2.1HTML5介紹HTML5是HTML最新的修訂版本，2014年10月由萬(wàn)維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定。目標(biāo)是取代1999年所制定的HTML

4.01和XHTML

1.0標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求。廣義論及HTML5時(shí)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少網(wǎng)頁(yè)瀏覽器對(duì)于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)（Plug-in-BasedRichInternetApplication，RIA），例如：Adobe

Flash、Microsoft

Silverlight與OracleJavaFX的需求，并且提供更多能有效加強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。具體來(lái)說(shuō)，HTML5添加了許多新的語(yǔ)法特征，其中包括<video>、<audio>和<canvas>元素，同時(shí)集成了SVG內(nèi)容。這些元素是為了更容易的在網(wǎng)頁(yè)中添加和處理多媒體和圖片內(nèi)容而添加的。其它新的元素如<section>、<article>、<header>和<nav>則是為了豐富文檔的數(shù)據(jù)內(nèi)容。新的屬性的添加也是為了同樣的目的。同時(shí)也有一些屬性和元素被移除掉了。一些元素，像<a>、<cite>和<menu>被修改，重新定義或標(biāo)準(zhǔn)化了。同時(shí)APIs和DOM已經(jīng)成為HTML5中的基礎(chǔ)部分了。HTML5還定義了處理非法文檔的具體細(xì)節(jié)，使得所有瀏覽器和客戶端程序能夠一致地處理語(yǔ)法錯(cuò)誤。2.2.2javascript介紹JavaScript是一種互聯(lián)網(wǎng)終端的擴(kuò)建的語(yǔ)言。它由網(wǎng)景的LiveScript進(jìn)化而來(lái)，具有原模原樣的繼承、面向?qū)ο蟆⒎庆o態(tài)類型、分辨大小寫等特點(diǎn)。解決服務(wù)器端語(yǔ)言問(wèn)題是其主要的目的。增添JavaScript可以為網(wǎng)景的網(wǎng)頁(yè)查看器Navigator供給檢驗(yàn)數(shù)據(jù)的一些最基礎(chǔ)的功用。2.2.3jquery介紹jQuery是開(kāi)源軟件，使用MIT許可證授權(quán)。

jQuery的語(yǔ)法設(shè)計(jì)使得許多操作變得容易，如操作文檔對(duì)象（document）、選擇文檔對(duì)象模型（DOM）元素、創(chuàng)建動(dòng)畫效果、處理\o"事件(計(jì)算機(jī))（頁(yè)面不存在）"事件、以及開(kāi)發(fā)Ajax程序。jQuery也提供了給開(kāi)發(fā)人員在其上創(chuàng)建插件的能力。這使開(kāi)發(fā)人員可以對(duì)底層交互與動(dòng)畫、高級(jí)效果和高級(jí)主題化的組件進(jìn)行抽象化。模塊化的方式使jQuery函數(shù)庫(kù)能夠創(chuàng)建功能強(qiáng)大的動(dòng)態(tài)網(wǎng)頁(yè)以及網(wǎng)絡(luò)應(yīng)用程序。jQuery有下列特色：跨瀏覽器的DOM元素選擇DOM巡訪與更改：支持CSS1-3事件（Events）CSS操縱特效和動(dòng)畫（移動(dòng)顯示位置、淡入、淡出）Ajax延伸性（Extensibility）工具：例如瀏覽器版本（已取消內(nèi)置，改由jQueryMigrateplugin外掛提供）和each函數(shù)。JavaScript插件輕量級(jí)jQuery1.8.0版時(shí)（內(nèi)置Sizzle.js）：文件行數(shù)大小jquery-1.8.0.min.js291KBjquery-1.8.0.js9228254KBDHTML

DOM選擇器與鏈?zhǔn)秸Z(yǔ)法經(jīng)由jQuery的DHTMLDOM選擇器，可以更容易的操作在復(fù)雜的樹(shù)狀HTML中的任何DHTMLDOM對(duì)象，并可用鏈?zhǔn)秸Z(yǔ)法對(duì)同一對(duì)象的不同屬性進(jìn)行操作。例如：$("p.surprise").addClass("ohmy").show("slow");相當(dāng)于查找HTML的<p>標(biāo)簽，且其class為"surprise"的DHTMLDOM對(duì)象將其Class屬性多加上一個(gè)"ohmy"（通常是配CSS的定義做顯示時(shí)的配色修改）打開(kāi)顯示CSS1-3選擇器：支持CSS選擇器選定DOM對(duì)象?？鐬g覽器：跨瀏覽器的AJAX解決方式，支持InternetExplorer6.0+、Opera

9.0+、Firefox

2+、Safari

2.0+、GoogleChrome

1.0+簡(jiǎn)單：較其它JavaScript庫(kù)更易于入門。3.功能3.1游戲功能結(jié)構(gòu)圖3.2游戲代碼結(jié)構(gòu)：4.設(shè)計(jì)內(nèi)容2048游戲代碼：<scripttype="text/javascript">$(function(){$("#wrap").height($(document).height());functiongame2048(){this.data=[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];this.startX=0;this.startY=0;this.endX=0;this.level=[];//等級(jí)this.bestscore=0;this.endY=0;this.score=0;//得分this.slide=false;//是否是可滑動(dòng)的，默認(rèn)是不可以滑動(dòng)的，產(chǎn)生一個(gè)隨機(jī)數(shù)this.init();}totype={numImage:function(num){return"<imgsrc='./images/"+num+".gif'/>";},/*0的位置隨機(jī)生成一個(gè)隨機(jī)的2或4*/randomNum:function(){varrand=Math.ceil(Math.random()*4);//產(chǎn)生0-4的隨機(jī)整數(shù)if(rand!=4){//返回隨機(jī)數(shù)為2和4的整數(shù),2的概率是4概率的3倍rand=2;}//此處還有一種方法是生成一個(gè)0-15的隨機(jī)數(shù)，從左到右，從上到下對(duì)數(shù)組元素位置編號(hào)varx=Math.floor(Math.random()*4);vary=Math.floor(Math.random()*4);if(this.data[x][y]==0){this.data[x][y]=rand;}else{this.randomNum();}},/*返回移動(dòng)方向*/moveDirection:function(x,y){vardirection="";if(x==0&&y==0)return;if(Math.abs(x)>Math.abs(y)){//左右滑動(dòng)if(x>0)direction="right";elsedirection="left";}else{//上下滑動(dòng)if(y>0)//瀏覽器的y坐標(biāo)軸向下是正的，向上是負(fù)的direction="down";elsedirection="up";}returndirection;},/*根據(jù)移動(dòng)方向做處理*/move:function(direction){switch(direction){case"up":this.moveUp();break;case"right":this.moveRight();break;case"down":this.moveDown();break;case"left":this.moveLeft();break;}},/*重繪界面*/repraint:function(){varnum=0;//表示第幾個(gè)方塊for(vari=0;i<4;i++){for(varj=0;j<4;j++){num=i*4+j;if(this.data[i][j]!=0){$(".div_wrapdiv").eq(num).removeClass();$(".div_wrapdiv").eq(num).addClass("num"+this.data[i][j]).html(this.data[i][j]);//$(".div_wrapdiv").eq(num).addClass("num"+this.data[i][j]).html(this.numImage(this.data[i][j]));}else{$(".div_wrapdiv").eq(num).removeClass().html("");}}}$("#currentScore").html(this.score);},moveUp:function(){//i代表行號(hào)，j代表列號(hào)for(varj=0;j<4;j++){for(varm=0;m<3;m++){//最差的情況是[2,0,0,0]移動(dòng)到最右側(cè)需要3次，所有在列上做一個(gè)3次循環(huán)for(vari=0;i<3;i++){//把非0數(shù)字依次往上排if(this.data[i][j]==0&&this.data[i+1][j]!=0){this.data[i][j]=this.data[i+1][j];this.data[i+1][j]=0;this.slide=true;//有移動(dòng)說(shuō)明是可以滑動(dòng)的}}}}for(varj=0;j<4;j++){for(vari=0;i<3;i++){if(this.data[i][j]!=0&&(this.data[i][j]==this.data[i+1][j])){this.data[i][j]=2*this.data[i][j];//合并this.data[i+1][j]=0;this.score+=this.data[i][j];this.slide=true;//有合并的就說(shuō)明產(chǎn)生的新的0位置}}}for(varj=0;j<4;j++){for(varm=0;m<2;m++){//最差的情況是[0,4,0,0]移動(dòng)到最右側(cè)需要2次，所有在列上做一個(gè)2次循環(huán)for(vari=0;i<3;i++){//把非0數(shù)字依次往上排if(this.data[i][j]==0&&this.data[i+1][j]!=0){this.data[i][j]=this.data[i+1][j];this.data[i+1][j]=0;}}}}if(this.slide){//滑動(dòng)后,0的位置生成一個(gè)隨機(jī)數(shù)this.randomNum();}this.slide=false;this.repraint();},moveDown:function(){//i代表行號(hào)，j代表列號(hào)for(varj=0;j<4;j++){for(varm=0;m<3;m++){//最差的情況是[2,0,0,0]移動(dòng)到最右側(cè)需要3次，所有在列上做一個(gè)3次循環(huán)for(vari=3;i>0;i--){//把非0數(shù)字依次往下排if(this.data[i][j]==0&&this.data[i-1][j]!=0){this.data[i][j]=this.data[i-1][j];this.data[i-1][j]=0;this.slide=true;//有移動(dòng)說(shuō)明是可以滑動(dòng)的}}}}for(varj=0;j<4;j++){for(vari=3;i>0;i--){if(this.data[i][j]!=0&&(this.data[i][j]==this.data[i-1][j])){this.data[i][j]=2*this.data[i][j];//合并this.data[i-1][j]=0;this.score+=this.data[i][j];this.slide=true;//有合并的就說(shuō)明產(chǎn)生的新的0位置}}}for(varj=0;j<4;j++){for(varm=0;m<2;m++){//最差的情況是[0,4,0,0]移動(dòng)到最右側(cè)需要2次，所有在列上做一個(gè)2次循環(huán)for(vari=3;i>0;i--){//把非0數(shù)字依次往下排if(this.data[i][j]==0&&this.data[i-1][j]!=0){this.data[i][j]=this.data[i-1][j];this.data[i-1][j]=0;}}}}if(this.slide){//滑動(dòng)后,0的位置生成一個(gè)隨機(jī)數(shù)this.randomNum();}this.slide=false;this.repraint();},moveRight:function(){//i代表行號(hào)，j代表列號(hào)for(varj=0;j<4;j++){for(varm=0;m<3;m++){for(vari=3;i>0;i--){if(this.data[j][i]==0&&this.data[j][i-1]!=0){this.data[j][i]=this.data[j][i-1];this.data[j][i-1]=0;this.slide=true;//有移動(dòng)說(shuō)明是可以滑動(dòng)的}}}}for(varj=0;j<4;j++){for(vari=3;i>0;i--){if(this.data[j][i]!=0&&(this.data[j][i]==this.data[j][i-1])){this.data[j][i]=2*this.data[j][i];//合并兩個(gè)想的數(shù)，即其中任意一個(gè)數(shù)的值乘以2this.data[j][i-1]=0;this.score+=this.data[j][i];this.slide=true;//有合并的就說(shuō)明產(chǎn)生的新的0位置}}}for(varj=0;j<4;j++){for(varm=0;m<2;m++){for(vari=3;i>0;i--){if(this.data[j][i]==0&&this.data[j][i-1]!=0){this.data[j][i]=this.data[j][i-1];this.data[j][i-1]=0;}}}}if(this.slide){//滑動(dòng)后,0的位置生成一個(gè)隨機(jī)數(shù)this.randomNum();}this.slide=false;this.repraint();},moveLeft:function(){//i代表行號(hào)，j代表列號(hào)for(varj=0;j<4;j++){for(varm=0;m<3;m++){for(vari=0;i<3;i++){if(this.data[j][i]==0&&this.data[j][i+1]!=0){this.data[j][i]=this.data[j][i+1];this.data[j][i+1]=0;this.slide=true;//有移動(dòng)說(shuō)明是可以滑動(dòng)的}}}}for(varj=0;j<4;j++){for(vari=0;i<3;i++){if(this.data[j][i]!=0&&(this.data[j][i]==this.data[j][i+1])){this.data[j][i]=2*this.data[j][i];//合并,即將兩個(gè)相同的數(shù)字相加this.data[j][i+1]=0;this.score+=this.data[j][i];this.slide=true;}}}for(varj=0;j<4;j++){for(varm=0;m<2;m++){for(vari=0;i<3;i++){if(this.data[j][i]==0&&this.data[j][i+1]!=0){this.data[j][i]=this.data[j][i+1];this.data[j][i+1]=0;}}}}if(this.slide){//滑動(dòng)后,0的位置生成一個(gè)隨機(jī)數(shù)this.randomNum();}this.slide=false;this.repraint();},touchOrMouse:function(){var_self=this;varsUserAgent=navigator.userAgent.toLowerCase();try{document.getElementById("wrap").addEventListener('mousedown',function(e){e.preventDefault();this.startX=Number(e.pageX);this.startY=Number(e.pageY);this.endX=this.startX;this.endY=this.startY;});document.