2048小游戏（javascript代码）

最新推荐文章于 2023-10-29 11:47:03 发布
最新推荐文章于 2023-10-29 11:47:03 发布
阅读量856 收藏
点赞数
分类专栏： 小游戏=============
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanghui07216/article/details/51619631
版权 
<html>
<head>
    <title>2048</title>
    <meta http-equiv='content-type' content='text/html;charset=gb2312' />
    <style type="text/css">
        body, div, ul, li, p {
            padding: 0;
            margin: 0;
            border-radius: 10px;
        }

        body {
            font-family: "Microsoft YaHei",微软雅黑,Arial,Simsun,sans-serif;
            background: #FFFCEC;
        }

        .game_box {
            margin: 20px auto;
            width: 400px;
        }

        .info {
            height: 60px;
            color: #333;
            font-size: 32px;
        }

        .main_box {
            border: 2px solid #8E8E8E;
            background-color: #8E8E8E;
            height: 396px;
            color: #333;
            font-size: 36px;
            font-weight: 700;
            text-align: center;
            line-height: 100px;
        }

            .main_box li {
                float: left;
                background: #d0d0d0;
                border: 4px solid #8E8E8E;
                height: 91px;
                width: 91px;
            }

        .rule {
            color: #333;
            font-size: 16px;
        }
    </style>
</head>
<body οnlοad="init();" οnkeyup="run();">
    <div class="game_box">
        <div class="info">
            <p style="float:right;">得分：<span id="score">0</span></p>
            最大值：<span id="max_value">0</span>
        </div>
        <ul class="main_box">
            <li id="11"></li>
            <li id="12"></li>
            <li id="13"></li>
            <li id="14"></li>
            <li id="21"></li>
            <li id="22"></li>
            <li id="23"></li>
            <li id="24"></li>
            <li id="31"></li>
            <li id="32"></li>
            <li id="33"></li>
            <li id="34"></li>
            <li id="41"></li>
            <li id="42"></li>
            <li id="43"></li>
            <li id="44"></li>
        </ul>
        <div style="clear:both;"></div>
        <p class="rule">玩法：</p>
        <p class="rule">1.用键盘上下左右键控制数字走向</p>
        <p class="rule">2.当点击了一个方向时，格子中的数字会全部往那个方向移动，直到不能再移动，如果有相同的数字则会合并</p>
        <p class="rule">3.当格子中不再有可移动和可合并的数字时，游戏结束</p>
    </div>
</body>
<script type="text/javascript">
    var table = {
        11: 0, 12: 0, 13: 0, 14: 0,
        21: 0, 22: 0, 23: 0, 24: 0,
        31: 0, 32: 0, 33: 0, 34: 0,
        41: 0, 42: 0, 43: 0, 44: 0
    };//整个表格
    var cur_queue = null;//由于移动时是一行或一列移动的，此变量代表需要处理的当前行和列
    var direction = 0;//当前操作移动的方向
    var max_value = 0;//最大值
    var score = 0;//最高分数

    function is_num_exist() {//判断当前处理行（列）是否有数字，有则进行处理，无则不用处理
        if (table[cur_queue[1]] + table[cur_queue[2]] + table[cur_queue[3]] + table[cur_queue[4]] > 0) {
            return true;
        } else {
            return false;
        }
    }

    function need_move() {//当前行（列）是否需要移动（不包括合并）
        if (Boolean(table[cur_queue[4]]) >= Boolean(table[cur_queue[3]]) && Boolean(table[cur_queue[3]]) >= Boolean(table[cur_queue[2]]) && Boolean(table[cur_queue[2]]) >= Boolean(table[cur_queue[1]])) {
            return false;
        } else {
            return true;
        }
    }

    function need_merge() {//当前行（列）是否需要合并
        if ((table[cur_queue[4]] == table[cur_queue[3]]) && table[cur_queue[4]] && table[cur_queue[3]] || (table[cur_queue[3]] == table[cur_queue[2]]) && table[cur_queue[3]] && table[cur_queue[2]] || (table[cur_queue[2]] == table[cur_queue[1]]) && table[cur_queue[2]] && table[cur_queue[1]]) {
            return true;
        } else {
            return false;
        }
    }

    function move() {//对当前行（列）的数字进行移动
        for (var i = 4; i >= 2; i--) {
            if (Boolean(table[cur_queue[i]] < Boolean(table[cur_queue[i - 1]]))) {
                table[cur_queue[i]] = table[cur_queue[i - 1]];
                table[cur_queue[i - 1]] = 0;
                break;
            }
        }
    }

    function merge() {//对当前行（列）的数字进行合并
        for (var i = 4; i >= 2; i--) {
            if (table[cur_queue[i]] == table[cur_queue[i - 1]]) {
                score = score + table[cur_queue[i]];
                table[cur_queue[i]] = table[cur_queue[i]] + table[cur_queue[i - 1]];
                table[cur_queue[i - 1]] = 0;
                document.getElementById("score").innerHTML = score;//更新最高分
                break;
            }
        }
    }

    function run() {//点击上下左右键时开始执行
        var done = false;
        if (event.keyCode >= 37 && event.keyCode <= 40) {//只有
            set_direction();//设置移动方向参数
            for (var i = 1; i <= 4; i++) {//由于一个方向上移动时有4行（列）所以需要逐行处理
                set_cur_queue(i);//设置当前行（列）
                if (is_num_exist()) {
                    if (need_move() || need_merge()) {
                        done = true;//此变量用来限制每次只合并一次
                    }
                    while (need_move()) {//如果可以移动则一直移动
                        move();
                    }
                    if (need_merge()) {//如果需要合并
                        if (table[cur_queue[1]] == table[cur_queue[2]] && table[cur_queue[3]] == table[cur_queue[4]]) {//特例，当一行（列）上四个数字全部相同时候，进行两次合并
                            merge();
                            while (need_move()) {
                                move();
                            }
                            merge();
                        } else {
                            merge();
                            while (need_move()) {
                                move();
                            }
                        }
                    }
                }
            }
            //var empty_box = find_empty_box();//获取当前空格子集合
            //if(empty_box.length==0&&!need_merge()) {//如果没有没有空位且不能合并
            //	alert('Game over');
            //	return;
            //}
            if (done) {//如果此次有移动或合并，即有效操作，则生成新的数字
                create_and_set_num();
            }
            update_max_value();//更新最大值
            draw();//重新绘制表格用于显示
        }
    }

    function update_max_value() {
        max_value = 0;
        for (var i in table) {
            if (table[i] > max_value) {
                max_value = table[i];
            }
        }
        document.getElementById("max_value").innerHTML = max_value;
    }

    function set_cur_queue(queue_num) {
        if (direction == 37) {
            cur_queue = { 1: queue_num * 10 + 4, 2: queue_num * 10 + 3, 3: queue_num * 10 + 2, 4: queue_num * 10 + 1 };
        } else if (direction == 38) {
            cur_queue = { 1: 40 + queue_num, 2: 30 + queue_num, 3: 20 + queue_num, 4: 10 + queue_num };
        } else if (direction == 39) {
            cur_queue = { 1: queue_num * 10 + 1, 2: queue_num * 10 + 2, 3: queue_num * 10 + 3, 4: queue_num * 10 + 4 };
        } else if (direction == 40) {
            cur_queue = { 1: 10 + queue_num, 2: 20 + queue_num, 3: 30 + queue_num, 4: 40 + queue_num };
        } else {
            cur_queue = { 1: queue_num * 10 + 1, 2: queue_num * 10 + 2, 3: queue_num * 10 + 3, 4: queue_num * 10 + 4 };
        }
    }

    function draw() {//整体刷新16个格子
        for (var i = 10; i <= 40; i += 10) {
            for (var j = 1; j <= 4; j++) {
                if (table[i + j] != 0) {
                    document.getElementById(i + j).innerHTML = table[i + j];
                } else {
                    document.getElementById(i + j).innerHTML = '';
                }
            }
        }
    }

    function set_direction() {//设置此次移动的方向
        direction = event.keyCode;
    }

    function set_new_num(empty_box) {//生成新的数字
        var num = 0;
        var ranNum = Math.random() * 100;
        if (ranNum > 80) {
            num = 4;
        } else {
            num = 2;
        }
        var box_num = Math.floor(Math.random() * (empty_box.length));
        table[empty_box[box_num]] = num;
    }

    function find_empty_box() {//获得所有的空格子，即值为0的格子集合
        var empty_box = [];
        for (var num in table) {
            if (table[num] == 0) {
                empty_box.push(num);
            }
        }
        return empty_box;
    }

    function init() {
        create_and_set_num();
        for (var i = 1; i <= 4; i++) {
            set_cur_queue(i);
            draw();
        }
        update_max_value();
    }

    function create_and_set_num() {
        var empty_box;
        empty_box = find_empty_box();
        set_new_num(empty_box);
    }
</script>
</html>

<pre class="javascript" name="code">//自己重新写了一遍，收获不少
<html>
    <head>
        <title>4096</title>
        <meta http-equiv="content-type" content="test/html; charset=gb2312" />
        <style type="text/css">
            body,p,ul,li,div
            {
                padding:0;
                margin:0;
                border-radius:10px;
            }
            body 
            {
                font-family: "Microsoft YaHei",微软雅黑,Arial,Simsun,sans-serif;
                background-image:url(image/backimage.jpg);
            }

            .game_box
            {
                margin:20px auto;
                width:400px;
            }
            .info
            {
                height:60px;
                color:red;
                font-size:32px;
            }
            .main_box
            {
                border:2px solid #8e8e8e;
                background-color:#8e8e8e;
                height:396px;
                color:black;
                font-size:32px;
                font-weight:800;
                text-align:center;
                line-height:90px;
            }
            .main_box li
            {
                float:left;
                background-color:#d0d0d0;
                border:4px solid #8e8e8e;
                height:91px;
                width:91px;
            }
            .rule
            {
                font-size:32px;
                color:#ffd800;
            }
        </style>
    </head>
    <body οnlοad="init();" οnkeyup="run();">
        <div class="game_box">
            <div class="info">
                <p style="float:right;">得分：<span id="score">0</span></p>
                最大值：<span id="max_value">0</span>
            </div>
            <ul class="main_box">
                <li id="11">11</li>
                <li id="12">12</li>
                <li id="13">13</li>
                <li id="14">14</li>
                <li id="21">21</li>
                <li id="22">23</li>
                <li id="23">23</li>
                <li id="24">24</li>
                <li id="31">31</li>
                <li id="32">32</li>
                <li id="33">33</li>
                <li id="34">34</li>
                <li id="41">41</li>
                <li id="42">42</li>
                <li id="43">43</li>
                <li id="44">44</li>
            </ul>
            <div style="clear:both;"></div>
            <p class="rule">玩法</p>
            <p class="rule">1.用键盘上下左右键控制数字走向</p>
            <p class="rule">2.当点击了一个方向时，格子中的数字会全部往那个方向移动，直到不能再移动，如果有相同的数字则会合并</p>
            <p class="rule">3.当格子中不再有可移动和可合并的数字时，游戏结束</p>
        <div>
    </body>
</html>
<script type="text/javascript">
    var table =
        {
            11: 0, 12: 0, 13: 0, 14: 0,
            21: 0, 22: 0, 23: 0, 24: 0,
            31: 0, 32: 0, 33: 0, 34: 0,
            41: 0, 42: 0, 43: 0, 44: 0
        };
    var cur_queue = null;
    var score = 0;
    var direction = 0;
    var max_value = 0;

    function is_num_exist()
    {
        var sum = 0;
        for(var i=1;i<=4;i++)
        {
            sum += table[cur_queue[i]];
        }
        if(sum>0)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
    function need_move()
    {
        for(var i=4;i>=2;i--)
        {
            if (Boolean(table[cur_queue[i]]) >= Boolean(table[cur_queue[i - 1]]))
                continue;
            else
                break;
        }
        if(i==1)
        {
            return false;
        }
        else
        {
            return true;
        }
    }

    function need_merge()
    {
        var flag = false;
        for(var i=4;i>=2;i--)
        {
            if (table[cur_queue[i]] == table[cur_queue[i - 1]] && table[cur_queue[i]] && table[cur_queue[i - 1]])
            {
                flag = true;
                    break;
            }
        }
        if(flag)
        {
            return true;
        }
        else
        {
            return false;
        }
    }

    function move()
    {
        for(var i=4;i>=2;i--)
        {
            if(Boolean(table[cur_queue[i]])<Boolean(table[cur_queue[i-1]]))
            {
                table[cur_queue[i]] = table[cur_queue[i - 1]];
                table[cur_queue[i - 1]] = 0;
                break;
            }
        }
    }

    function merge()
    {
        for(var i=4;i>=2;i--)
        {
            if(table[cur_queue[i]]==table[cur_queue[i-1]])
            {
                table[cur_queue[i]] += table[cur_queue[i - 1]];
                score += table[cur_queue[i]];
                table[cur_queue[i - 1]] = 0;
                document.getElementById("score").innerHTML = score;
                break;
            }
        }
    }

    function set_direction()
    {
        direction = event.keyCode;
    }

    function set_cur_queue(num)
    {
        if(direction==37)
        {
            cur_queue = { 1: num * 10 + 4, 2: num * 10 + 3, 3: num * 10 + 2, 4: num * 10 + 1 };
        }
        else if(direction==38)
        {
            cur_queue = { 1: 40 + num, 2: 30 + num, 3: 20 + num, 4: 10 + num };
        }
        else if(direction==39)
        {
            cur_queue = { 1: num * 10 + 1, 2: num * 10 + 2, 3: num * 10 + 3, 4: num * 10 + 4 };
        }
        else if(direction==40)
        {
            cur_queue = { 1: 10 + num, 2: 20 + num, 3: 30 + num, 4: 40 + num };
        }
        else
        {
            cur_queue = { 1: num * 10 + 1, 2: num * 10 + 2, 3: num * 10 + 3, 4: num * 10 + 4 };
        }
    }

    function update_max_value()
    {
        max_value = 0;
        for(var i in table)
        {
            if(table[i]>max_value)
            {
                max_value = table[i];
            }
        }
        document.getElementById("max_value").innerHTML = max_value;
    }

    function draw()
    {
        for(var i=10;i<=40;i+=10)
        {
            for(var j=1;j<=4;j++)
            {
                if(table[i+j]!=0)
                {
                    document.getElementById(i + j).innerHTML = table[i + j];
                }
                else
                {
                    document.getElementById(i + j).innerHTML = '';
                }
            }
        }
    }

    function find_empty_box()
    {
        var empty_box = [];
        for(var num in table)
        {
            if(table[num]==0)
            {
                empty_box.push(num);
            }
        }
        return empty_box;
    }

    function set_new_num(empty_box)
    {
        var num = 0;
        var rannum = Math.random() * 100;
        if(rannum>80)
        {
            num = 4;
        }
        else
        {
            num = 2;
        }
        var box_num = Math.floor(Math.random() * empty_box.length)
        table[empty_box[box_num]] = num;
    }

    function creat_and_set_num()
    {
        var empty_box;
        empty_box = find_empty_box();
        set_new_num(empty_box);
    }

    function init()
    {
        creat_and_set_num();
        for(var i=1;i<=4;i++)
        {
            set_cur_queue(i);
            draw();
        }
        update_max_value();
    }

    function run()
    {
        var down = false;
        if(event.keyCode>=37&&event.keyCode<=40)
        {
            set_direction();
            for(var i=1;i<=4;i++)
            {
                set_cur_queue(i);
                if(is_num_exist())
                {
                    if (need_move() || need_merge())
                    {
                        down = true;
                    }
                    while(need_move())
                    {
                        move();
                    }
                    if(need_merge())
                    {
                        if(table[cur_queue[1]]==table[cur_queue[2]]&&table[cur_queue[3]]==table[cur_queue[4]])
                        {
                            merge();
                            while(need_move())
                            {
                                move();
                            }
                            merge(0);
                        }
                        else
                        {
                            merge();
                            while(need_move())
                            {
                                move();
                            }
                        }
                    }
                }
            }
            if(down)
            {
                creat_and_set_num();
            }
            update_max_value();
            draw();
        }
    }
</script>
<pre class="javascript" name="code">//详细解释
<html>
<head>
    <title>2048</title>
    <meta http-equiv='content-type' content='text/html;charset=gb2312' />
    <style type="text/css">
        body, div, ul, li, p {
            padding: 0;
            margin: 0;
            border-radius: 10px;
        }

        body { /*设置body体的格式*/
            font-family: "Microsoft YaHei",微软雅黑,Arial,Simsun,sans-serif;
            background-image: url(image/backimage.jpg);
        }
        .game_box { /*设置游戏大(外)格子（4*4的正方形）的格式*/
            margin: 20px auto;
            width: 400px;
            
        }

        .info {   /*设置积分的格式*/
            height: 60px;/*字体距离格子的高度*/
            color: #ff0000;/*字体颜色*/
            font-size:32px;/*字体大小*/
        }

        .main_box { /*设置小（内）格子的样式*/
            border: 2px solid #8E8E8E; /*小格子与大格子之间的边框宽度和颜色*/
            background-color: #8E8E8E; /*格子之间空隙处的颜色*/
            height: 400px;/*游戏格子（4*4的）的高度*/
            color: #333; /*数字颜色*/
            font-size: 32px;/*数字的大小*/
            font-weight: 700;/*字体加粗程度*/
            text-align: center;/*字体出现的位置*/
            line-height: 90px;/*距离小格子上边框距离*/
        }

            .main_box li {/*小格子的格式*/
                float: left;
                background: #d0d0d0;/*小格子的背景色*/
                border: 4px solid #8E8E8E;/*小格子之间的边框宽度和颜色*/
                height: 91px;/*小格子的高和宽*/
                width: 91px;
            }

        .rule {/*设置规则说明的格式*/
            color: #333;/*字体颜色是黑色*/
            font-size: 16px;/*字体大小*/
        }
    </style>
</head>
<body οnlοad="init();" οnkeyup="run();">
    <div class="game_box">
        <div class="info">
            <p style="float:right;">得分：<span id="score">0</span></p>
            最大值：<span id="max_value">0</span>
        </div>
        <ul class="main_box">
            <li id="11"></li>
            <li id="12"></li>
            <li id="13"></li>
            <li id="14"></li>
            <li id="21"></li>
            <li id="22"></li>
            <li id="23"></li>
            <li id="24"></li>
            <li id="31"></li>
            <li id="32"></li>
            <li id="33"></li>
            <li id="34"></li>
            <li id="41"></li>
            <li id="42"></li>
            <li id="43"></li>
            <li id="44"></li>
        </ul>
        <div style="clear:both;"></div>
        <p class="rule">玩法：</p>
        <p class="rule">1.用键盘上下左右键控制数字走向</p>
        <p class="rule">2.当点击了一个方向时，格子中的数字会全部往那个方向移动，直到不能再移动，如果有相同的数字则会合并</p>
        <p class="rule">3.当格子中不再有可移动和可合并的数字时，游戏结束</p>
    </div>
</body>
</html>
<script type="text/javascript">
    var table =         //初始化整个表格，11：0表示id号为11的格子内的数为0；
    {
        11: 0, 12: 0, 13: 0, 14: 0,
        21: 0, 22: 0, 23: 0, 24: 0,
        31: 0, 32: 0, 33: 0, 34: 0,
        41: 0, 42: 0, 43: 0, 44: 0
    };
    var cur_queue = null;//由于移动时是一行或一列移动的，此变量代表需要处理的当前行和列
    var direction = 0;//当前操作移动的方向
    var max_value = 0;//最大值
    var score = 0;//最高分数

    function is_num_exist()
    {       //判断当前处理行（列）是否有数字，有则进行处理，无则不用处理
        if (table[cur_queue[1]] + table[cur_queue[2]] + table[cur_queue[3]] + table[cur_queue[4]] > 0)
        {
            return true;
        }
        else
        {
            return false;
        }
    }

    function need_move()
    {       //当前行（列）是否需要移动（不包括合并）
        if (Boolean(table[cur_queue[4]]) >= Boolean(table[cur_queue[3]]) && Boolean(table[cur_queue[3]]) >= Boolean(table[cur_queue[2]]) && Boolean(table[cur_queue[2]]) >= Boolean(table[cur_queue[1]]))
        {
            return false;
        }
        else
        {
            return true;
        }
    }

    function need_merge()
    {       //当前行（列）是否需要合并
        if ((table[cur_queue[4]] == table[cur_queue[3]]) && table[cur_queue[4]] && table[cur_queue[3]] || (table[cur_queue[3]] == table[cur_queue[2]]) && table[cur_queue[3]] && table[cur_queue[2]] || (table[cur_queue[2]] == table[cur_queue[1]]) && table[cur_queue[2]] && table[cur_queue[1]])
        {
            return true;
        }
        else
        {
            return false;
        }
    }

    function move()
    {       //对当前行（列）的数字进行移动
        for (var i = 4; i >= 2; i--)
        {
            if (Boolean(table[cur_queue[i]] < Boolean(table[cur_queue[i - 1]])))
            {
                table[cur_queue[i]] = table[cur_queue[i - 1]];
                table[cur_queue[i - 1]] = 0;
                break;
            }
        }
    }

    function merge()
    {       //对当前行（列）的数字进行合并
        for (var i = 4; i >= 2; i--)
        {
            if (table[cur_queue[i]] == table[cur_queue[i - 1]])
            {                
                table[cur_queue[i]] = table[cur_queue[i]] + table[cur_queue[i - 1]];
                score = score + table[cur_queue[i]];
                table[cur_queue[i - 1]] = 0;
                document.getElementById("score").innerHTML = score;//更新最高分
                break;
            }
        }
    }

    function run()
    {       //点击上下左右键时开始执行
        var done = false;
        if (event.keyCode >= 37 && event.keyCode <= 40)
        {       //只有上下左右四个键
            set_direction();//设置移动方向参数
            for (var i = 1; i <= 4; i++)
            {       //由于一个方向上移动时有4行（列）所以需要逐行处理
                set_cur_queue(i);//设置当前行（列）
                if (is_num_exist())
                {
                    if (need_move() || need_merge())
                    {
                        done = true;//此变量用来限制每次只合并一次
                    }
                    while (need_move())
                    {       //如果可以移动则一直移动
                        move();
                    }
                    if (need_merge())
                    {       //如果需要合并
                        if (table[cur_queue[1]] == table[cur_queue[2]] && table[cur_queue[3]] == table[cur_queue[4]])
                        {       //特例，当一行（列）上四个数字全部相同时候，进行两次合并
                            merge();
                            while (need_move())
                            {
                                move();
                            }
                            merge();
                        }
                        else
                        {
                            merge();
                            while (need_move())
                            {
                                move();
                            }
                        }
                    }
                }
            }
            //var empty_box = find_empty_box();//获取当前空格子集合
            //if(empty_box.length==0&&!need_merge()) {//如果没有没有空位且不能合并
            //	alert('Game over');
            //	return;
            //}
            if (done)
            {       //如果此次有移动或合并，即有效操作，则生成新的数字
                create_and_set_num();
            }
            update_max_value();//更新最大值
            draw();//重新绘制表格用于显示
        }
    }

    function update_max_value()
    {
        max_value = 0;
        for (var i in table)
        {
            if (table[i] > max_value)
            {
                max_value = table[i];
            }
        }
        document.getElementById("max_value").innerHTML = max_value;
    }

    function set_cur_queue(queue_num)
    {
        if (direction == 37)        //左
        {
            cur_queue = { 1: queue_num * 10 + 4, 2: queue_num * 10 + 3, 3: queue_num * 10 + 2, 4: queue_num * 10 + 1 };
        }
        else if (direction == 38)       //上
        {
            cur_queue = { 1: 40 + queue_num, 2: 30 + queue_num, 3: 20 + queue_num, 4: 10 + queue_num };
        }
        else if (direction == 39)       //右
        {
            cur_queue = { 1: queue_num * 10 + 1, 2: queue_num * 10 + 2, 3: queue_num * 10 + 3, 4: queue_num * 10 + 4 };
        }
        else if (direction == 40)       //下
        {
            cur_queue = { 1: 10 + queue_num, 2: 20 + queue_num, 3: 30 + queue_num, 4: 40 + queue_num };
        }
        else
        {
            cur_queue = { 1: queue_num * 10 + 1, 2: queue_num * 10 + 2, 3: queue_num * 10 + 3, 4: queue_num * 10 + 4 };
        }
    }

    function draw()
    {       //整体刷新16个格子
        for (var i = 10; i <= 40; i += 10)
        {
            for (var j = 1; j <= 4; j++)
            {
                if (table[i + j] != 0)
                {
                    document.getElementById(i + j).innerHTML = table[i + j];
                }
                else
                {
                    document.getElementById(i + j).innerHTML = '';
                }
            }
        }
    }

    function set_direction()
    {       //设置此次移动的方向
        direction = event.keyCode;
    }

    function set_new_num(empty_box)
    {       //生成新的数字
        var num = 0;
        var ranNum = Math.random() * 100;//产生0--100以内的随机数确定2和4出现的概率为4：1
        if (ranNum > 80)
        {
            num = 4;
        }
        else
        {
            num = 2;
        }
        var box_num = Math.floor(Math.random() * (empty_box.length));//找到是空箱子的编号，floor向下取整
        table[empty_box[box_num]] = num;//将这个空箱子赋值
    }

    function find_empty_box()
    {       //获得所有的空格子，即值为0的格子集合
        var empty_box = [];
        for (var num in table)
        {
            if (table[num] == 0)
            {
                empty_box.push(num);
            }
        }
        return empty_box;
    }

    function init()
    {
        create_and_set_num();
        for (var i = 1; i <= 4; i++)
        {
            set_cur_queue(i);
            draw();
        }
        update_max_value();
    }

    function create_and_set_num()
    {
        var empty_box;
        empty_box = find_empty_box();
        set_new_num(empty_box);
    }
</script>



 

 

 


                

        

        

    

  


    


                



	

		

			

				
					
用js代码制作2048小游戏

				
			

			

				

					Bohn的博客
				

				

					08-20
					
					3671
					
				

			

		

		

			
				
2048小游戏（js）

1.先确定整体样式（4x4）（html，css）

以下为html代码


<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" hr...

			
		

	



                

              
                



	

		

			

				
					
JS2048小游戏代码.zip

				
			

			

				

					05-23
				

			

		

		

			
				
JS2048小游戏代码，原生JS编写。玩法说明:键盘上下左右控制移动，相同格子会累积加起来重叠为新的格子，当所有格子均占有并不能移动游戏结束，回车键或点击重新开始游戏将会重置。

			
		

	



                


  
              

                


	

		

			

				
					
使用JS实现2048小游戏

				
			

			

				

					weixin_30270561的博客
				

				

					05-02
					
					264
					
				

			

		

		

			
				
JS实现2048小游戏源码
效果图：

代码如下，复制即可使用：
（适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" conten...

			
		

	





	

		

			

				
					
2048小游戏js部分代码

				
			

			

				

					weixin_48299146的博客
				

				

					07-21
					
					258
					
				

			

		

		

			
				
废话不多说直接上代码
var game = {
    data: [],
    score: 0,
    startus: 0,
    start: function () 
    {
        this.startus = 1;
        this.score = 0;
        this.data = [];
        for (var r = 0; r < 4; r++) 
        {
            this.data[r] = [];
   

			
		

	



		

			
		



	

		

			

				
					
javascript实现前端小游戏2048

				
			

			

				

					JiangHu_Java的博客
				

				

					10-04
					
					1557
					
				

			

		

		

			
				
javascript实现前端小游戏2048前言主要功能实现过程前端静态样式布置
前言
最近因为一些原因，研究了一下2048这个小游戏的代码，顺便给大家讲一下实现过程。
游戏截图：


主要功能
1、根据格子的合并，部分数字对应的格子颜色不尽相同；
2、初始化随机位置出现随机的2个数字为2或4；
3、每次合并一个格子只合并一次，如2 2 4 0，第一次合并后是4 4 0 0，而不是8 0 0 0；
4，判断所有格子是否能够向上下左右移动，没有空间或者对应方向的第一个格子数字和本身格子的数字不一样即移动不了；


			
		

	





	

		

			

				
					
Javascript编写2048小游戏

				
			

			

				

					10-23
				

			

		

		

			
				
### Javascript编写2048小游戏知识点详解  #### 1. 游戏2048简介  2048是一款简单上手的数字拼图游戏。玩家通过上下左右滑动屏幕来移动板块上的数字格子，相同数字的格子在碰撞时会合并成它们的和。游戏的目标是创建...

			
		

	





	

		

			

				
					
JavaScript 小游戏代码汇总

				
			

			

				

					07-02
				

			

		

		

			
				
JavaScript 小游戏代码汇总   JavaScript 是一种广泛使用的脚本语言，常用于开发 web 应用程序尤其是游戏开发。以下是 JavaScript 小游戏代码汇总的知识点：  1. HTML 基础：代码开头使用的 `<!DOCTYPE html>` 声明...

			
		

	





	

		

			

				
					
javascript版2048小游戏

				
			

			

				

					10-24
				

			

		

		

			
				
在本文中，作者展示了如何使用JavaScript制作2048小游戏。2048是一款流行的数字拼接游戏，玩家通过上下左右滑动来移动方块，相同数字的方块在碰撞时会合并，每次操作后会产生新的数字方块，目标是获得一个2048的方块...

			
		

	





	

		

			

				
					
JavaScript 2048 游戏实例代码(简单易懂)

				
			

			

				

					10-22
				

			

		

		

			
				
3. JavaScript脚本：在`<script>`标签内提供了一些关键的JavaScript代码，虽然不完整，但仍可推断出如下要点：   - `window.onload`是一个事件监听函数，它在页面加载完成后被调用，是启动游戏的常见做法。  - 在`...

			
		

	





	

		

			

				
					
javascript 开发2048小游戏练习代码

				
			

			

				

					01-06
				

			

		

		

			
				
在本项目中，我们将探讨如何使用JavaScript开发2048小游戏。2048是一款流行的数字拼图游戏，玩家通过上下左右滑动棋盘来合并数字，目标是达到2048这个数值。在这个实践中，你将面临挑战，因为代码可能存在bug，这将...

			
		

	





	

		

			

				
					
JavaScript版2048游戏源码

				
			

			

				

					05-15
				

			

		

		

			
				
本源代码是用JavaScript模仿2048做的小游戏,有完整的2048游戏源码

			
		

	





	

		

			

				
					
JavaScript实现2048小游戏

				
			

			

				

					02-26
				

			

		

		

			
				
JavaScript实现2048游戏源码

			
		

	





	

		

			

				
					
JS2048小游戏代码.rar

				
			

			

				

					01-04
				

			

		

		

			
				
JS2048小游戏代码，原生JS编写。
玩法说明:
键盘上下左右控制移动，相同格子会累积加起来重叠为新的格子，当所有格子均占有并不能移动游戏结束，回车键或点击重新开始游戏将会重置。

			
		

	





	

		

			

				
					
2048小游戏，js版，附带源码

				
			

			

				

					09-13
				

			

		

		

			
				
以前火过一段时间的2048小游戏，js版本源码，绿色无毒，可直接打开，仅供学习研究使用，不可用于商业活动。

			
		

	





	

		

			

				
					
js实现的2048游戏

				
			

			

				

					09-06
				

			

		

		

			
				
js实现的2048小游戏。供初学者参考，代码有注释。供参考

			
		

	





	

		

			

				
					
html做2048游戏的代码,原生JS编写的2048小游戏代码

				
			

			

				

					weixin_42468901的博客
				

				

					05-30
					
					705
					
				

			

		

		

			
				
js代码// 模块化开发思路var json={// 创建初始化函数init:function(){var otab= document.querySelector('.tab'),str='',id=1;//返回文档指定的css元素，并保存for(var i=0;i<4;i++){str+='';for(var j=0;j<4;j++){str +='';}str +='';}ota...

			
		

	





	

		

			

				
					
js280行代码写2048

				
			

			

				

					
				

				

					05-12
					
					4172
					
				

			

		

		

			
				
2048 原作者就是用Js写的，一直想尝试，但久久未动手。
昨天教学生学习JS代码。不妨就做个有趣的游戏好了。2048这么火，是一个不错的选择。


思路：
1. 数组 ，2维数组4x4
2. 移动算法，移动后有数字的对齐，无数字（我用的0，但不显示）补齐。


移动前







移动后（注意程序合并了第一行2个2，并产生了新的2）




移动算法

			
		

	





	

		

			

				
					
JavaScript：2048游戏(附完整源码)

					
最新发布

				
			

			

				

					希望我的博客，能帮上你解决学习中工作中所遇到的问题
				

				

					10-29
					
					200
					
				

			

		

		

			
				
JavaScript：2048游戏(附完整源码)

			
		

	





	

		

			

				
					
js2048小游戏（直接复制即可运行）

				
			

			

				

					wedFrontEnd的博客
				

				

					01-10
					
					323
					
				

			

		

		

			
				
小游戏

			
		

	





	

		

			

				
					
使用JavaScript实现2048游戏的思路与代码解析

				
			

			

				

					
				

			

		

		

			
				
"本文主要介绍了如何使用JavaScript实现2048小游戏，包括基本思路、主要逻辑和关键代码段。文章提到实现2048游戏的代码总共约300行，其中JavaScript、CSS和HTML各占一部分。项目还利用了underscore.js的template方法...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值