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中操作时间之getYear()方法的使用教程
Jun 11 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
javascript实现图片轮换动作方法
Aug 07 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
jquery操作select大全
2014/04/25 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
浅谈Python的异常处理
2016/06/19 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
python Timer 类使用介绍
2020/12/28 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
经理秘书找工作求职信
2013/12/19 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL