jquery,2048小游戏粗制版

最新推荐文章于 2021-09-16 18:10:34 发布

huntererer

最新推荐文章于 2021-09-16 18:10:34 发布

阅读量866

点赞数

分类专栏：前端文章标签： jquery 游戏 html

本文链接：https://blog.csdn.net/huntererer/article/details/49803289

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

写然后知不足，写了一个丑丑的简简单单的2048，代码在下面。
和原版不一样的地方就是原版如果有连续能消去的不会一次消去，我的这个用递归弄得可以一步消去了，比如4个2在一行，方向键按下之后原版会变成2个4，再按一下才会变成一个8，我的就会直接变成1个8。因为是小游戏所以递归带来的性能问题就没那么严重啦~
这个版本只能在电脑上试玩，浏览器兼容性我也没有全部测试。方向键控制上下左右。
这里写图片描述
分好低。。。

<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
        body{
            background-color: #000;
        }
        #playBar{
            margin: 0 auto;
            height: 440px;
            width: 440px;
            background-color: #9900cc;
        }
        #scoreBar{
            margin: 0 auto;
            width: 440px;
            height: 50px;
            line-height: 50px;
            background-color: #9900cc;
            color: white;
            font-size: 50px;
            text-align: center;
        }
        .window{
            height: 100px;
            width: 100px;
            background-color: #ccc;
            float: left;
            margin: 5px;
            color: #000;
            text-align: center;
            line-height: 100px;
            font-size: 50px;
            font-weight: bolder;
        }
        .hasNum2{
            background-color: #ffccff;
        }
        .hasNum4{
            background-color: #cc66cc;
        }
        .hasNum8{
            background-color: #ff9900;
        }
        .hasNum16{
            background-color: #ff6600;
        }
        .hasNum32{
            background-color: #ff3333;
        }
        .hasNum64{
            background-color: #ff0000;
        }
        .hasNum128{
            background-color: #cc3399;
        }
        .hasNum256{
            background-color: #660066;
        }
        .hasNum512{
            background-color: #0000ff;
        }
        .hasNum1024{
            background-color: #000099;
        }
        .hasNum2048{
            background-color: #ffff66;
        }
        .hasNum4096{
            background-color: #ffff00;
        }
        </style>
    </head>
    <body>
        <div id="scoreBar">Score:0</div>
        <div id="playBar">
            <div id="0" class="window"></div>
            <div id="1" class="window"></div>
            <div id="2" class="window"></div>
            <div id="3" class="window"></div>
            <div id="4" class="window"></div>
            <div id="5" class="window"></div>
            <div id="6" class="window"></div>
            <div id="7" class="window"></div>
            <div id="8" class="window"></div>
            <div id="9" class="window"></div>
            <div id="10" class="window"></div>
            <div id="11" class="window"></div>
            <div id="12" class="window"></div>
            <div id="13" class="window"></div>
            <div id="14" class="window"></div>
            <div id="15" class="window"></div>
        </div>
        <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
        score = 0;

        function noEquals(step,starter,ender){
            var hasEqualMembers = 1;
            for(var i=starter;i<ender;i+=step){
                if($("#"+i).text() == $("#"+(i+step)).text()){
                    hasEqualMembers = 0;
                }
            }
            return hasEqualMembers;
        }
        function birthNewDiv(){
            var full = windows.every(function(item,index,array){
                return (item==1);
            })
            if(!full){
                var numOfNew = Math.floor(Math.random() * 16);
                //1代表那个格子里有料~
                while(windows[numOfNew] == 1){
                    //已经有料了，重新找个没料的格子吧~
                    numOfNew = Math.floor(Math.random() * 16);
                }
                windows[numOfNew] = 1;
                //初始化两个2
                //这里如果需要像有的2048那样小几率出现4就加个Math.random() < (你想要的几率)? 4:2 就可以，但是我就一直2着就好了
                random$("#"+numOfNew).text(2).addClass("hasNum"+($("#"+numOfNew).text())).hide().fadeIn("slow");
            }else{
                //如果满了，就判断是否相邻的格子中有相等即可消去的，如果没有，就说明游戏结束了，报分即可。
                if(noEquals(1,0,3)&&noEquals(1,4,7)&&noEquals(1,8,11)&&noEquals(1,12,15)&&noEquals(4,0,12)&&noEquals(4,1,13)&&noEquals(4,2,14)&&noEquals(4,3,15)){
                    //都没有相等的，游戏结束啦
                    alert("Game Over！Your Score is "+score);
                }
            }
        }
        var windows = new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
        birthNewDiv();
        birthNewDiv();

        function change(step,starter){
                for(var iter = starter + step * 2;iter != starter - step;iter-=step){
                    if(windows[iter] == 1){
                        var tempTxt = $("#"+iter).text();
                        for(var temp = starter + 3 * step;temp != iter;temp -= step){
                            if(windows[temp] == 0){
                                windows[temp] = 1;
                                windows[iter] = 0;
                                $("#"+temp).addClass("hasNum"+tempTxt).text(tempTxt);
                                $("#"+iter).removeClass().addClass("window").text("");
                                break;
                            }
                        }
                    }
                }
        }
        function mulTwo(step,starter){
            //位置移动后，接下来就是相邻相等块的合并了
            for(var iter = starter + step * 2;iter != starter-step;iter-=step){
                var nextOne = iter + step;
                if($("#"+iter).text() == $("#"+nextOne).text() && $("#"+iter).text() != ""){
                    var tempTxt = $("#"+iter).text();
                    score += 2*tempTxt;
                    //百度之后知道了html()方法，之前也在书里看过，到用的时候就又忘记了，所以还是得多写。
                    $("#scoreBar").html("Score:"+score);

                    $("#"+iter).removeClass().addClass("window").text("");
                    $("#"+nextOne).text(2*tempTxt).addClass("hasNum"+$("#"+nextOne).text());
                    windows[iter] = 0;
                    iter += step;
                    //出现了无法合并一次之后接着合并的bug,然后就写了下面这两行代码...
                    change(step,starter);
                    mulTwo(step,starter);
                }
            }
        }
        window.onkeyup = function(){
            switch((event||window.event).keyCode){
                case 37://左
                    change(-1,3);
                    change(-1,7);
                    change(-1,11);
                    change(-1,15);
                    mulTwo(-1,3);
                    mulTwo(-1,7);
                    mulTwo(-1,11);
                    mulTwo(-1,15);
                    birthNewDiv();
                    break;
                case 38://上
                    change(-4,12);
                    change(-4,13);
                    change(-4,14);
                    change(-4,15);
                    mulTwo(-4,12);
                    mulTwo(-4,13);
                    mulTwo(-4,14);
                    mulTwo(-4,15);
                    birthNewDiv();
                    break;
                case 39://右
                    change(1,0);
                    change(1,4);
                    change(1,8);
                    change(1,12);
                    mulTwo(1,0);
                    mulTwo(1,4);
                    mulTwo(1,8);
                    mulTwo(1,12);
                    birthNewDiv();
                    break;
                case 40://下
                    change(4,0);
                    change(4,1);
                    change(4,2);
                    change(4,3);
                    mulTwo(4,0);
                    mulTwo(4,1);
                    mulTwo(4,2);
                    mulTwo(4,3);
                    birthNewDiv();
                    break;
            }
        }
        </script>
    </body>
</html>