版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
1、javascript 2048游戏实例代码（简单 易懂）废话不多说了，直接给大家贴代码了，觉得很满意直接拿去。28642<!doctype html public -/wc/dtd xhtml . transitional/en" http:/www. w. org/tr/xhtml/dtd/xhtml-transitional.dtd> html xml ns=z，http: /www. w. org/xhtml><hcad><mcta http-cquiv二content-type" contcnt二text/html; charsc
2、t二utf- /> <title>无标题文档</title><style>headerdisplay:block; margin: auto; width:%; textalign:center; header hfont"size:px; font"family:arial, helvetica, sansserif; font-weight:bold;header wnewgamebuttondisplay:block; margin:px auto; width:px; padding:px px; background-co
3、lor:#fa; font-family:arial; color:white; border-radius:px; text-decoration:none;header snewgamebutton:hoverbackground-color:#fb;header pf onarial; font - sizc:px; marg in:px auto;#grid-containerwidth:px; height:px; padding:px; margin:px auto; background-color:ttbbada; border-radius:px; position:rela
4、tive; grid-cellwidth:px; height:px; border-radius:px; color:white; background-color:scccb; position:absolute; font"fami1y:arial; font-weight:bold; font-size:px; line-height:px; tcxtalign:ccnter; gameoverdisplay:block; margin: auto; width:px; text-align:center; vertical-align:middle; position ab
5、solute;gameover p font-family: arial;font-size: px;color: white;margin: px auto;margin-top: px; gameover span font-family: arial; font-size: px;color: white;margin: px auto;srestartgamebutton display: block;margin: px auto;width: px;padding: px px;background-color: #fa; font-family: arial;font-size:
6、 px;color: white;border-radius: px; text-decoration: none;srcstartgomcbutton:hover background-color: #fb;#showgameoverwidth:px; padding:px px; background-color:#fn;font-family:arial; color:white; border-radius:px; text-decoration:none; font-si7e:px; position:absolute;</style><script>wind
7、ow, onload = function ()/newgame ();var showscore = document getelementbytd('score');score 二；init(); generateonenumber(); generateonemuniber();window. onkeydown = function (e) var e = e | window. cvent;switch(e. keycode) case :i f(canmovelef t(board)moveleft ();gencratconcnumbcr (); isgameov
8、er ();break;case :if(canmovcup(boord) moveup ();generateonenumber(); isgameover();break;case :if(canmoveright(board) moveright ();£enerateonenumber (); isgameover ();break;caseif(canmovedown(board) movedowno ;generateonemuniber(); isgameover (); break;default :break;function generateonemumber()
9、 if (!nospace(board) var randx 二 parseint (math, floor(math, random() var randy = parse!nt(math, floor (math, reindom() while (true) if (boardrandxrandy = ) break;varvar););randx = parse!nt(math, floor(math, random() remdy 二 parse in t(math. floor (math, ra ndom(););varrandnumber = math, random() &l
10、t; . ?:; boardrandxrandy二 randnumber;var gridcel 1 = document.getelementbytd(，grid-cel+randx+一+randy);gridccll. irrncriitml 二 remdnumber;/ else gameover (); function newgame() window, location. reload();var board 二 new array (); function init () for(var i=;i<i+) boardi二 new array(); for (var j=;j
11、<j+) boardij=;var gridcell = document. getelementbyldc grid-cell-' +i+"+j);gridcell. style, top = (+i*)+' px ;gridcell. style, left 二(+j*)+ px'function getnumberbackgroundcolor(number) switch (number) case :return case :return case :return case :return case :return case :return c
12、ase :return case :return case :return case :return case :return case :return case :return #cccd3；break “#edec"break; "#fb"break; #f;break;break; ，#fcb，z; break; “# edcf，z; break; "#edcc"break; #c;break; #be;break; #c;break; “# acz，; break; "#c"break;function gctnum
13、bcrcolor(number) if (number <= ) return "#ereturn "white"function nospace(board) for (var i = ; i < ; i+) for (var j = ; j < ; j+) if (boardij二二) rcturn false;return true;ijfunction canmoveleft(board) for (var i = ; i < ; i+) for (var j = ; j < ; j+) if (boardij != ) if
14、 (boardi j - = | | boardi j -二二 boardi j) return true;return false;function moveleft() for (var i 二；i ； i+) for (var j = ; j < ; j+) if (boardij != ) for (var k = j-; k > -; k-) if(boardik = | boardik = boardij) boardik = boardik + boardij;boardij二;var gridccll = document. getelcmcntbyld('
15、grid-cell-'+i+'-'+j); gridcell. innerhtml 二；var gridcellk = document getelementbyid('grid-cell-'+i+'-'+k); gridcellk. innerhtml 二 boardik;gri dcel1k. style. backgroundcolor 二 gctnumbcrbackgroundcolor(boardik);gridcel 1. style.backgroundcolor = '#cccb' gridcellk. s
16、tyle, color = getnumbercolor(boardik); gridcell. style, color 二'white'score +二 boardik;var showscorc = document. getelcmcntbyld('score');showscore innerhtml = score;j 二 k;/else break; /跳出var k的for循环function canmoveup(board) for (var j 二；j ； j+) for (var i = ; i < ; i+) if (boardij
17、 != ) if (boardi - j = | | boardi - j = boardi j) return true; return false;function moveup() for (var j = ; j < ; j+) for (var i = ; i < ; i+) if (boardij != ) for (var k = i; k > -; k-) if(boardk j = | boardk j = boardij) boardkj = boardkj + boardij;boardij=;var gridcell = document. getel
18、ementbyld('grid-cell-'+i+'-'+j); gridcell. irrnerhtml 二；var gridcel ik 二 document. getelementbytd(，grid-cel 1_，+k+，_，+j); gridccllk. inncrlltml = boardk j;gridcellk style backgroundcolor = getnumberbackgroundcolor(boardkj); gridcell. style, backgroundcolor 二'#cccb' gridcelik.
19、style, color 二 getnumbercolor(boardik); gridce 11. style, color = ? whitc'score +二 boardkj;var showscore = document. getelementbyld (，score，); showscore. innerhtml 二 score;i 二 k;/else break; /跳出var k的for循环function cemmovcright(board) for (var i = ; i < ; i+) for (var j 二；j > -； j) if (boar
20、dij != ) if (boardi j + = | | boardi j + 二二 boardi j) return true; return false;function movcright () for (var i = ; i < ; i+) for (var j 二；j > -； j) if (boardij != ) for (var k = j+; k < ; k+) if(boardik = | boardik = boardij) boardik = boardik + boardij;boardij二;var gridccll = document. g
21、etelemcntbyld('grid-cell-'+i+'-'+j); gridcell. inncrlltml 二''；var gridcellk = documentgetelementbyld('grid-cell-'+i+'-'+k); gridcellk. innerhtml = boardik;gridcellk. style, backgroundcolor 二 getnumberbackgroundcolor(boardik);gridcc11.stylc. backgroundcolor = &
22、#39;#cccb' gridcellk.style. color = getnumbercolor(boardik); gridcel 1. style, color = 'white'score +二 boardik;var showscore 二 document. getelementbytd(，score');showscorc. inncrlltml = score;j = k;/else break; /跳出var k的for循环function canmovedown(board) for (var j = ; j < ; j+) for
23、(var i 二；i > -； i-) if (boardij != ) if (boardi + j = | | boardi + j = boardi j) return true; return feilsc;function movedown() for (var j = ; j < ; j+) for (var i 二；i > -； i-)if (boardij != ) for (var k = i+; k < ; k+) if (boardkj = | boardkj = boardij) boardk j = boardkj + boardij;boar
24、di j=;var gridcell = document. getelementbyld(5 grid-cell-' +i+"+j);gridcell. irrnerhtml 二；var gridcel ik = document.getelementbytd('grid-cel 1+k+j); gridccllk. inncrlltml = boardk j;gridccllk. style, backgroundcolor 二 getnumberbackgroundcolor(boardkj); gridcell.style. backgroundcolor =
25、 cccb'gridcellk. style, color 二 getnumbercolor(boardik); gridcel 1. s ty le. color 二'white'score +二 boardkj;var showscore = document. getelementb)ddc score");showscore. innerhtml 二 score;i 二 k;/else break; /跳ill var k 的 for 循环funct i on i sgameover() if (nospacc(board) && no
26、move (board) gameover (); functi on nomove(board) if (canmovcdown(boord) | canmoveleft(board) | canmoveright(board) | canmoveup(board) return false;ijreturn true;function bounce(obj, top) cl earlnterval(obj. timer);var nspeed 二；var acceleration =;var flag =; obj.timer 二 setlnterval (function () nspe
27、ed +二 acceleration;nspeed *二；if (obj. offsettop + nspeed >二 top) obj. style, top 二 top + ' px'nspeed *二-；elseif (math, abs(nspeed) < && math.abs (top-obj. offsettop) <) clearinterval(obj. timer);el se obj. stylc. top = obj.offscttop + nspeed + 'px',)；function gameovc
28、r() /alert (z，gameover!z，);var gameover = document. createelement (，div5); gameover. id = showgameover，;gameover. innerhtml 二'game 0ver，;var gridcontaincr = document. getelcmcntbyld('grid-containcr'); gridcontainer appendchi1d(gameover);var showgameover = document. getelementbyld(，showga
29、meover，); showgameover. style, left 二(gridcontainer. offsetwidth - showgameover. offsetwidth ) / + ' px'bounco (showgameover,);</script></head> <body> <hcadcr> <!<h> </h>><a href=/，javascript: newgame () ;/z id=，newgamebutton，> new game </a> <p> score: <span id二score>/spanx/p><di v <div <div <div <div <di v <div <div <div <divi d二gri d-contai ner> class二"grid-cell" clas
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论