站长资源 网络编程

javascript版2048小游戏

整理:jimmy2026/8/5浏览2次

简介没有技术含量，只是用来练习代码逻辑的。为了代码结构清晰，我把逻辑控制部分写在全局变量里，用户界面操作封装在UI对象里，大概就这样了。仅供参考。工作时候，我的编码风格有人吐槽太乱了，所以我想试着写一个不是那么乱的东西出来。。复制代码代码如下:2048 D</div> <div class="news_infos"><div id="MyContent"><p>没有技术含量，只是用来练习代码逻辑的。为了代码结构清晰，我把逻辑控制部分写在全局变量里，用户界面操作封装在UI对象里，大概就这样了。仅供参考。工作时候，我的编码风格有人吐槽太乱了，所以我想试着写一个不是那么乱的东西出来。。</p> <p><U>复制代码</U> 代码如下:<br> <HTML><br> <head><br> <title>2048 DEMO</title><br> <meta charset='utf-8' /><br> <br> <head><br> <div id='box'><br> MSIE is SB<br> <script><br> //全局方法用于逻辑控制<br> function x4(n){<br> var t=[];<br> while(n-->0)t.push([]);<br> return t;<br> }<br> function xx(f){<br> for(var i=0;i<UI.nw;i++){<br> for(var j=0;j<UI.nw;j++){<br> f(i,j);<br> }<br> }<br> }<br> function make(n){<br> return {<br> number:n,<br> moveStep:0,<br> newNumber:n,<br> needKill:0<br> };<br> }<br> function tran(_arr,md){<br> var undo=x4(UI.nw);<br> var out=x4(UI.nw);<br> var ud=UI.undo;<br> if(ud.push(undo)>32)ud.shift();<br> for(var i=0;i<UI.nw;i++){<br> var t=[],o=md%2^1;<br> for(var k=0;k<UI.nw;k++){<br> undo[i][k]=_arr[i][k].number;<br> if(md<3)t.push(_arr[i][k]);else t.push(_arr[k][i]);<br> }<br> o && t.reverse();<br> t=trans(t);<br> if(o)t[0].reverse(),t[1].reverse();<br> for(var j=0;j<UI.nw;j++){<br> var x=i,y=j;<br> if(md>2)x=j,y=i;<br> _arr[x][y]=t[0][j];<br> out[x][y]=t[1][j];<br> }<br> }<br> return [_arr,out];<br> }<br> function trans(arr){<br> for(var i=0,m=0;i<UI.nw;i++){<br> if(arr[i].number===0)m++;else arr[i].moveStep+=m;<br> var _i=arr[i];<br> for(var j=i-1;j>=0;j--){<br> if(!arr[j].number)continue;<br> if(arr[j].needKill)break;<br> if(arr[j].number==_i.number){<br> arr[j].needKill=1;<br> arr[i].newNumber*=2;<br> arr[i].moveStep++;<br> m++;<br> }<br> }<br> }<br> var out=[];<br> for(var i=UI.nw;i--;){<br> !arr[i].needKill && arr[i].number && out.unshift(arr[i].newNumber);<br> }<br> while(out.length<UI.nw)out.push(0);<br> return [arr,out];<br> }<br> //界面操作开始，界面操作的参数通过全局方法来获得<br> function $(a){return document.getElementById(a);}<br> UI={};<br> UI.update=function(d){<br> if(UI.locked)return;<br> var map=this.map;<br> var n=this.times;<br> UI.locked=1;//未完成动画之前阻止用户动作<br> var out=tran(map,d)[1];<br> var _n=0,_begin=x4(UI.nw);<br> (function(){<br> if(_n>n){<br> var _q=0;<br> xx(function(i,j){<br> _q=_q||this.map[i][j].moveStep;<br> var o=$('i'+i+'j'+j);<br> o.innerHTML=out[i][j]||'';<br> o.className='x r'+o.innerText;<br> this.map[i][j]=make(out[i][j]);<br> o=o.style;<br> o.display='block';<br> o.left=UI.size*j+"px";<br> o.top=UI.size*i+"px";<br> });<br> return _q "<div class='x' id='i"+i+"j"+j+"'\<br> style='left:"+(UI.size*j)+"px;top:"+(UI.size*i)+"px;'></div>\<br> <div class='y' \<br> style='left:"+(UI.size*j)+"px;top:"+(UI.size*i)+"px;'></div>");<br> });<br> UI.addNew();<br> UI.addNew();<br> };<br> UI.init(6,3,100,20);<br> //自动播放，仅用来做演示的。没有做事件绑定<br> setInterval(function(){UI.update([1,2,3,4][Math.random()*4|0]);},200);<br> </script><br> </div><br> <style><br> #box{position:absolute;left:50%;top:50%;margin-left:-300px;margin-top:-300px;}<br> .x,.y{background:#ddd;position:absolute;width:80px;height:80px;font-size:30px;text-align:center;line-height:80px;font-weight:700;font-family:arial;z-index:1;}<br> .x{z-index:30;}<br> .r2{background: #eee4da;}<br> .r4{background: #ede0c8;}<br> .r8{color: #f9f6f2;background: #f2b179;}<br> .r16{ color: #f9f6f2;<br> background: #f59563; }<br> .r32{color: #f9f6f2;<br> background: #f67c5f; }<br> .r64{ color: #f9f6f2;<br> background: #f65e3b; }<br> .r128{ color: #f9f6f2;<br> background: #edcf72;}<br> .r256{ color: #f9f6f2;<br> background: #edcc61;}<br> .r512{ color: #f9f6f2;<br> background: #edc850;}<br> .r1024{ color: #f9f6f2;<br> background: #edc53f;}<br> .r2048{ color: #f9f6f2;<br> background: #edc22e;}<br> </style><br> </p> <p>以上就是本文所述的全部内容了，希望大家能够喜欢。</p></div> </div> </div> <div class="share"> </div> <div class="nextinfo"> <p>上一篇：<a href="/3g/1/114804.html" title="javascript实现ecshop搜索框键盘上下键切换控制">javascript实现ecshop搜索框键盘上下键切换控制</a></p> <p>下一篇：<a href="/3g/1/114806.html" title="JavaScript判断用户是否对表单进行了修改的方法">JavaScript判断用户是否对表单进行了修改的方法</a></p> </div> <div class="otherlink"> <h2>最新资源</h2> <ul> <li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场第2期》[FLAC/分轨]">群星《奔赴！万人现场第2期》[FLAC/分轨]</a></li> <li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li> <li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li> <li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li> <li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li> <li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li> <li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边电影原声专辑》[32">群星《欢迎来到我身边电影原声专辑》[32</a></li> <li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边电影原声专辑》[FL">群星《欢迎来到我身边电影原声专辑》[FL</a></li> <li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li> <li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li> </ul> </div> </div> <div class="sidebar"> </div> <div class="sidebar"> 友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a> </div> </article> <footer> <p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p> </footer> <script src="/images3g/nav.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(function() { var elm = jQuery('#left_flow2'); var startPos = jQuery(elm).offset().top; jQuery.event.add(window, "scroll", function() { var p = jQuery(window).scrollTop(); jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : ''); jQuery(elm).css('top', ((p) > startPos) ? '0' : ''); }); }); </script> </body> </html>