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 相关文章推荐
Dojo 学习要点
Sep 03 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 Javascript
JS Object构造函数之Object.freeze
Apr 28 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
长波有什么东西
2021/03/01 无线电
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
PHP 动态随机生成验证码类代码
2010/04/09 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
js 操作符汇总
2014/11/08 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
nodejs更改项目端口号的方法
2018/05/13 NodeJs
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
使用python接入微信聊天机器人
2020/03/31 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
思想政治自我鉴定
2013/10/06 职场文书
人与自然的观后感
2015/06/18 职场文书
行政复议答复书
2015/07/01 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书