js实现推箱子小游戏

w读者只需要    将代码中的图片添加  就可以运行这段程序    图片代表什么  代码中有注释    图片大小 均为35*35



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        #wrap{

            margin:50px auto;
            
             //背景小方格   35*35
            background: url("../image/bsckGreen.png");
            position: relative;
        }
        #wrap div{
            width: 35px;
            height: 35px;

            position: absolute;
        }
        #wrap div img{
            position: absolute;

        }
        #wrap div.people img{
            z-index: 2;
        }
        #wrap div.box img{
            z-index: 1;
        }

       /* #wrap div img.tree{
            position: absolute;
            bottom: 0px;
        }
        #wrap div image.ball{

        }*/
    </style>
</head>
<body>
<div id="wrap"></div>
<script type="text/javascript">

    window.onload=function () {
        Game.exe();
    }
    var Game={
        //先找wrap
        oWrap:document.getElementById("wrap"),
        exe:function(){
            Game.CreateWrap(Game.level);

        },
        //当前管卡
        level:0,
        size:{x:16,y:16},
        CreateWrap: function(lel){
            size={x:16,y:16};
            Game.oWrap.style.cssText="width:"+size.x*35+"px;height:"+size.y*35+"px;";
            //将将小格子变成div
            for(var i=0;i<size.x*size.y;i++){

                var opeople;

              /*  Game.oWrap.appendChild(appenddiv);*/
                var x,y;
                switch (Game.mapdata[lel][i]){
                    case 1:
                        //算坐标
                        x=i%size.x;
                        y=parseInt(i/size.x);


                        var appenddiv=document.createElement("div");
                        appenddiv.style.cssText="left:"+x*35+"px;top:"+y*35+"px;";
                        //这种image对象的方式 有一种预加载的功能  当你给他src 的时候 就会开始加载图片
                        var ima=new Image();
                        /游戏边界  树的图片
                        ima.src="../image/backtree.png";
                        appenddiv.appendChild(ima);
                        appenddiv.className="tree";
                        appenddiv.x=x;
                        appenddiv.y=y;
                        appenddiv.appendChild(ima);
                        Game. oWrap.appendChild(appenddiv);
                        break;
                    case 2:
                        x=i%size.x;
                        y=parseInt(i/size.x);
                        /*alert(x+"  "+y);*/

                        var appenddiv=document.createElement("div");
                        appenddiv.x=x;
                        appenddiv.y=y;

                        appenddiv.style.cssText="left:"+x*35+"px;top:"+y*35+"px;";
                        var ima=new Image();
                       //金蛋图片
                        ima.src="../image/backegg.png";
                        appenddiv.className="ball";
                        appenddiv.appendChild(ima);
                        Game. oWrap.appendChild(appenddiv);
                        break;
                    case 3:
                        x=i%size.x;
                        y=parseInt(i/size.x);


                        var appenddiv=document.createElement("div");
                        appenddiv.x=x;
                        appenddiv.y=y;
                        appenddiv.style.cssText="left:"+x*35+"px;top:"+y*35+"px;";
                        var ima=new Image();
                       //箱子图片
                        ima.src="../image/backbox.png"
                        appenddiv.className="box";
                        appenddiv.appendChild(ima);
                        Game. oWrap.appendChild(appenddiv);
                        break;
                    case 4:
                        x=i%size.x;
                        y=parseInt(i/size.x);


                        var appenddiv=document.createElement("div");
                        appenddiv.x=x;
                        appenddiv.y=y;
                        appenddiv.style.cssText="left:"+x*35+"px;top:"+y*35+"px;";
                        var ima=new Image();
                        //推箱子的小人图片
                        ima.src="../image/backpeople.png"
                        opeople=ima;
                        appenddiv.className="people";
                        appenddiv.appendChild(ima);
                        Game. oWrap.appendChild(appenddiv);
                        opeople=ima;
                        break;
                }
            }
            Game.contralPeople(opeople);
        },
        //控制小人


        contralPeople:function(op){
            //先找到opeople div
            oparent=op.parentNode;
            document.onkeydown=function (event) {
                event=event||window.event;
                var keyCode=event.keyCode;
                switch(keyCode){
                    //往zuo走
                    case 37:
                        /*alert(Game.level);
                        alert(oparent.x-1+oparent.y*Game.size.x)
                        alert(Game.mapdata[Game.level,oparent.x-1+oparent.y*Game.size.x]);
*/
                            Game.movePeople({x:-1},op);

                        break;

                        //上
                    case 38:

                            Game.movePeople({y:-1},op);

                        break;
                    case 39:

                            Game.movePeople({x:1},op);


                        break;
                    case 40:

                            Game.movePeople({y:1},op);


                        break;
                }


            }

        },
        movePeople:function (json,op) {
            //临时存放box[i]

            opeople = op;
            oparent = opeople.parentNode;
            var box = Game.getClass(Game.oWrap, "box");

            x = json.x || 0;
            y = json.y || 0;
            if (Game.mapdata[Game.level][oparent.x + x + (oparent.y + y) * Game.size.x] != 1) {
                oparent.x = oparent.x + x;
                oparent.y = oparent.y + y;
                oparent.style.left = oparent.offsetLeft + x * 35 + "px";
                oparent.style.top = oparent.offsetTop + y * 35 + "px";

                for (var i = 0; i < box.length; i++) {


                    if (box[i].x == oparent.x && box[i].y == oparent.y) {


                        if (Game.mapdata[Game.level][box[i].x + x + (box[i].y + y) * Game.size.x] != 1) {
                            //检测两个箱子是否碰撞   碰撞  小人则弹回
                            //alert(1);
                            if (!Game.twoBoxJianCe(box[i], x, y)) {
                               //alert(2);
                                box[i].x = box[i].x + x;
                                box[i].y = box[i].y + y;
                                box[i].style.left = box[i].offsetLeft + x * 35 + "px";
                                box[i].style.top = box[i].offsetTop + y * 35 + "px";
                                Game.isOrNoSuccess();
                            } else {
                                oparent.x = oparent.x - x;
                                oparent.y = oparent.y - y;
                                oparent.style.left = oparent.offsetLeft - x * 35 + "px";
                                oparent.style.top = oparent.offsetTop - y * 35 + "px";


                            }

                        } else {
                            //我特么就是天才   人物弹回
                            oparent.x = oparent.x - x;
                            oparent.y = oparent.y - y;
                            oparent.style.left = oparent.offsetLeft - x * 35 + "px";
                            oparent.style.top = oparent.offsetTop - y * 35 + "px";

                        }

                    }

                }

            }


        /*alert(box[0].x);*/



        },



        twoBoxJianCe: function(box,x,y){
            var obox=Game.getClass(Game.oWrap,"box");
             //alert(box.x);
            for(var i=0;i<obox.length;i++){
                //alert(obox[i].x);
                if(obox[i]!=box){
                    if(obox[i].x==box.x+x&&obox[i].y==box.y+y){
                        alert(obox[i]);

                        //碰撞
                        return true;
                    }
                }

            }
            //没碰撞
            return false;

        },

        //判断
        isOrNoSuccess:function(){

            var ball=Game.getClass(Game.oWrap,"ball");
            var box=Game.getClass(Game.oWrap,"box");
            var successnum=0;
            /*alert(box.length);
            alert(ball.length)*/;
            for(var i=0;i<box.length;i++){
                for(var j=0;j<ball.length;j++){
                    if(box[i].x==ball[j].x&&box[i].y==ball[j].y){
                        successnum++;
                    }
                }
            }
            /*alert(successnum);*/
            if(successnum==ball.length){
                alert("嘻嘻嘻  success");
            }

        },



        //存放管卡数据
        mapdata:[
            //第一关管卡数据     数组下标对应一个div  1表示边界  2表示球  3是箱子 4表示小人
               [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
                0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,
                0,0,0,0,0,0,1,2,1,0,0,0,0,0,0,0,
                0,0,0,0,0,0,1,0,1,1,1,1,0,0,0,0,
                0,0,0,0,1,1,1,3,0,3,2,1,0,0,0,0,
                0,0,0,0,1,2,0,3,4,1,1,1,0,0,0,0,
                0,0,0,0,1,1,1,1,3,1,0,0,0,0,0,0,
                0,0,0,0,0,0,0,1,2,1,0,0,0,0,0,0,
                0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,
                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
                0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],
            [],
            [],
            [],
            [],
        ],


        getClass:function (node,classname) {
            if(node.getElementsByClassName) {
                return node.getElementsByClassName(classname);
                //如果存在该标签 就返回
            } else {
                var elems = node.getElementsByTagName(node),
                    defualt = [];
                for (var i = 0; i < elems.length; i++) {
                    //遍历所有标签
                    if(elems[i].className.indexOf(classname) != -1) {
                        //查找相应类名的标签
                        defualt[defualt.length] = elems[i];
                    }
                }
                return defualt;
            }

        },


    };
    /*
    * 1.做地图
    *     wrap的大小规定
    * */
</script>

</body>
</html>


阅读更多
个人分类: 工程应用
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭