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 相关文章推荐
jquery zTree异步加载简单实例分享
Feb 05 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
JS代码优化的8点建议
2020/02/04 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
python 排列组合之itertools
2013/03/20 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
表彰先进集体通报
2014/01/12 职场文书
生物科学专业自荐书
2014/06/20 职场文书
机械专业求职信范文
2014/07/15 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
python - timeit 时间模块
2021/04/06 Python
用Python远程登陆服务器的步骤
2021/04/16 Python
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js