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 相关文章推荐
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
Vue.js对象转换实例
Jun 07 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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下对字符串的递增运算代码
2010/08/21 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
浅析vue-router原理
2018/10/19 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Python编写登陆接口的方法
2017/07/10 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
Python装饰器语法糖
2019/01/02 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python3的socket使用方法详解
2020/02/18 Python
Python数据可视化图实现过程详解
2020/06/12 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
致铅球运动员广播稿精选
2014/01/12 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python