javascript版2048小游戏


Posted in Javascript onMarch 18, 2015

没有技术含量,只是用来练习代码逻辑的。为了代码结构清晰,我把逻辑控制部分写在全局变量里,用户界面操作封装在UI对象里,大概就这样了。仅供参考。工作时候,我的编码风格有人吐槽太乱了,所以我想试着写一个不是那么乱的东西出来。。

<HTML>

<head>

<title>2048 DEMO</title>

<meta charset='utf-8' />

<!--

 708616 javascript present

 http://treemonster.sinaapp.com

 1696292264@qq.com

-->

<head>

<div id='box'>

MSIE is SB

<script>

//全局方法用于逻辑控制

function x4(n){

    var t=[];

    while(n-->0)t.push([]);

    return t;

}

function xx(f){

    for(var i=0;i<UI.nw;i++){

        for(var j=0;j<UI.nw;j++){

            f(i,j);

        }

    }

}

function make(n){

    return {

        number:n,

        moveStep:0,

        newNumber:n,

        needKill:0

    };

}

function tran(_arr,md){

    var undo=x4(UI.nw);

    var out=x4(UI.nw);

    var ud=UI.undo;

    if(ud.push(undo)>32)ud.shift();

    for(var i=0;i<UI.nw;i++){

        var t=[],o=md%2^1;

        for(var k=0;k<UI.nw;k++){

            undo[i][k]=_arr[i][k].number;

            if(md<3)t.push(_arr[i][k]);else t.push(_arr[k][i]);

        }

        o && t.reverse();

        t=trans(t);

        if(o)t[0].reverse(),t[1].reverse();

        for(var j=0;j<UI.nw;j++){

            var x=i,y=j;

            if(md>2)x=j,y=i;

            _arr[x][y]=t[0][j];

            out[x][y]=t[1][j];

        }

    }

    return [_arr,out];

}

function trans(arr){

    for(var i=0,m=0;i<UI.nw;i++){

        if(arr[i].number===0)m++;else arr[i].moveStep+=m;

        var _i=arr[i];

        for(var j=i-1;j>=0;j--){

            if(!arr[j].number)continue;

            if(arr[j].needKill)break;

            if(arr[j].number==_i.number){

                arr[j].needKill=1;

                arr[i].newNumber*=2;

                arr[i].moveStep++;

                m++;

            }

        }

    }

    var out=[];

    for(var i=UI.nw;i--;){

        !arr[i].needKill && arr[i].number && out.unshift(arr[i].newNumber);

    }

    while(out.length<UI.nw)out.push(0);

    return [arr,out];

}

//界面操作开始,界面操作的参数通过全局方法来获得

function $(a){return document.getElementById(a);}

UI={};

UI.update=function(d){

    if(UI.locked)return;

    var map=this.map;

    var n=this.times;

    UI.locked=1;//未完成动画之前阻止用户动作

    var out=tran(map,d)[1];

    var _n=0,_begin=x4(UI.nw);

    (function(){

        if(_n>n){

            var _q=0;

            xx(function(i,j){

                _q=_q||this.map[i][j].moveStep;

                var o=$('i'+i+'j'+j);

                o.innerHTML=out[i][j]||'';

                o.className='x r'+o.innerText;

                this.map[i][j]=make(out[i][j]);

                o=o.style;

                o.display='block';

                o.left=UI.size*j+"px";

                o.top=UI.size*i+"px";

            });

            return _q ? UI.addNew():(UI.locked=0);

        }

        xx(function(i,j){

            var o=$('i'+i+'j'+j),t,o1=o.style,s=d<3?'left':'top';

            if(t=map[i][j][_n==n?'newNumber':'number'])o.innerHTML=t;else o1.display='none';

            if(_begin[i][j]===undefined)_begin[i][j]=parseInt(o1[s]);

            o1[s]=(_begin[i][j]+(map[i][j].moveStep*100/n*_n)*Math.pow(-1,d))+'px';

        });

        _n++;

        setTimeout(arguments.callee,10);

    })();

}

UI.undo=[];

UI.addNew=function(_q){

    UI.locked=1;

    var r=[];

    xx(function(i,j){

        this.map[i][j].number || r.push([i,j]);

    });

    if(!r.length)return UI.locked=0;

    var q=new Date%r.length;q=r[q];

    var b=$('i'+q[0]+'j'+q[1]);

    var m=this.map[q[0]][q[1]];

    b.innerHTML=m.number=m.newNumber=2<<new Date%2;

    b.className='x r'+b.innerText;

    var o=0,q=5;

    (function(){

        if(o<100)setTimeout(arguments.callee,10);

        b.style.opacity=Math.min(o+=q++,100)/100;

    })();

    UI.locked=0;//解除锁定

};

//创建

UI.init=function(nw,maxUndo,size,times){

    UI.times=times||8;//动画过度次数

    UI.nw=nw||5;//方阵边长

    UI.map=map=x4(UI.nw);//创建数字块对象

    UI.size=size||100;//单元格宽度

    UI.maxUndo=maxUndo||5;//最大撤销步数

    $('box').innerHTML='';

    xx(function(i,j){

        map[i][j]=make(0);

        document.write("<div class='x' id='i"+i+"j"+j+"'\

         style='left:"+(UI.size*j)+"px;top:"+(UI.size*i)+"px;'></div>\

         <div class='y' \

         style='left:"+(UI.size*j)+"px;top:"+(UI.size*i)+"px;'></div>");

    });

    UI.addNew();

    UI.addNew();

};

UI.init(6,3,100,20);

//自动播放,仅用来做演示的。没有做事件绑定

setInterval(function(){UI.update([1,2,3,4][Math.random()*4|0]);},200);

</script>

</div>

<style>

#box{position:absolute;left:50%;top:50%;margin-left:-300px;margin-top:-300px;}

.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;}

.x{z-index:30;}

.r2{background: #eee4da;}

.r4{background: #ede0c8;}

.r8{color: #f9f6f2;background: #f2b179;}

.r16{ color: #f9f6f2;

    background: #f59563; }

.r32{color: #f9f6f2;

    background: #f67c5f; }

.r64{ color: #f9f6f2;

    background: #f65e3b; }

.r128{    color: #f9f6f2;

    background: #edcf72;}

.r256{    color: #f9f6f2;

    background: #edcc61;}

.r512{   color: #f9f6f2;

    background: #edc850;}

.r1024{ color: #f9f6f2;

    background: #edc53f;}

.r2048{    color: #f9f6f2;

    background: #edc22e;}

</style>

以上就是本文所述的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 #Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 #Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 #Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 #Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 #Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 #Javascript
jQuery实现列表的全选功能
Mar 18 #Javascript
You might like
PHP 网页过期时间的控制代码
2009/06/29 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
validator验证控件使用代码
2010/11/23 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
python+mysql实现简单的web程序
2014/09/11 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
Linux的文件类型
2016/07/05 面试题
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
大一军训感言
2014/01/09 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
个人典型事迹材料
2014/12/30 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
讲座新闻稿
2015/07/18 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
python Tkinter模块使用方法详解
2022/04/07 Python