jquery飞机大战游戏

/*先给网页上所有元素添加一个红色的边框 方便布局 布局完毕后移除*/
*{
   box-sizing: border-box;
   border:1px solid red;
}

<div class="header">
            <!--<div id="time" class="time"></div>-->
            <div id="score" class="score">0000</div>
        </div>
        
        <div id="content" class="content">
            <div id="player" class="player" style="left: 375px;"></div>
        </div>
        
        <div class="footer">
            <div class="lifePoints" :duration="4000"><div class="lifeBar"></div></div>
            <div class="skills">
                <div id="ASkill" class="skill" style="background:firebrick;color:#fff">A</div>
                <div id="SSkill" class="skill" style="background:lightskyblue;color:#fff">S</div>
                <div id="DSkill" class="skill" style="background:purple;color:#fff">D</div>
                <div id="FSkill" class="skill" style="background:lightgoldenrodyellow">F</div>
                
            </div>
            <div class="magicPoints"><div class="magicBar"></div></div>
</div>

body{
                position: relative;
                padding:0;
                margin: 0;
                
            }
            .header{
                position: fixed;
                line-height: 50px;
                top:0;
                left: 0;
                text-align: center;
                height: 50px;
                width:100%;
                z-index: 999;
                background:#555;
                color:goldenrod;
                font-size:30px;
            }
            .content{
                position: relative;
                margin: 50px auto 0 auto;
                width:100%;
                /*height: calc(100vh - 170px);*/
                height: 500px;
            }
            .footer{
                position: fixed;
                width: 100%;
                bottom:0;
                left:0;
                height: 120px;
            }
            .lifePoints{
                position: relative;
                width: 100%;
                height: 20px;
            }
            .lifeBar{
                position: absolute;
                left: 0;
                height: 20px;
                width: 0%;
                background:deeppink;
                transition: all ease .5s; 
                border-radius: 10px;
            }
            .skills{
                float: left;
                width: 75%;
                height: 100px;
            }
            .skill{
                float: left;
                width: 25%;
                height: 100px;
                line-height: 100px;
                text-align: center;
            }
            .magicPoints{
                position: relative;
                float:left;
                width: 25%;
                height: 100px;
            }
            .magicBar{
                position: absolute;
                width: 100%;
                height: 0px;
                background:deepskyblue;
                transition: all ease .5s; 
                border-radius: 30%;
                bottom: 0;
            }
            .player{
                width: 50px;
                height: 50px;
                background:red;
                position: absolute;
                bottom: 0;
            
            }
            .enemy{
                width: 50px;
                height: 50px;
                background:black;
                position: absolute;
                top: 0;
            
            }
            .shoot{
                position: absolute;
                top:calc(100% - 50px);
                width:8px;
                height:8px;
                border-radius: 50%;
                background:red;
                z-index: 1;
            }
            [class$=Skill]{
                width:20px;
                height:20px;
            }
            .enemy[type="A"],.enemy[type="S"],.enemy[type="D"],.enemy[type="F"]{
                width:50px;
                height: 50px;
            }

var data = {
            playerX: 0, //玩家x轴坐标
            playerY: 0, //玩家y轴坐标
            enemyX: [], //敌人X坐标集
            enemyY: [], //敌人Y坐标集
            shootX: [], //子弹X坐标集
            shootY: [], //子弹Y坐标集
            score: 0, //分数
            lifePoint: 100, //玩家生命值
            magicPoint: 0, //玩家魔力值,满100能放必杀,通过击杀敌人获得
            isBoss:false,//是否Boss
            //随机数方法
            random: function(min, max) {
                return Math.floor(Math.random() * max + min);
            },
            //创建生命条
            createLifeBar:function(){
                $(".lifeBar").css("width",data.lifePoint+"%")
            },
            //创建法力条
            createMagicBar:function(){
                $(".magicBar").css("height",data.magicPoint+"%")    
            },
            
            //更新玩家分数
            refreshScore:function(){
                $("#score").html(data.score);
                
            },
            
            //创建敌人
            createEnemy:function(){
                var temp=data.random(0,100);//生成0-100的随机数，用作概率判断
                var windowWidth = $(window).width();//浏览器宽度
                var left = data.random(0,windowWidth - 50)//敌人left值
                if(temp>0&&temp<=10){//A类精英,能且只能通过A技能击杀
                    var html = '<div class="enemy" style="background:firebrick;left:'+left+'px" life="200" type="A" lifeUp="0" magicUp="0" score="200">A</div>'
                }else if(temp>10&&temp<=20){//S类精英,能且只能通过S技能击杀
                    var html = '<div class="enemy" style="background:lightskyblue;left:'+left+'px" life="200" type="S" lifeUp="0" magicUp="0" score="200">S</div>'
                }else if(temp>20&&temp<=30){//D类精英,能且只能通过D技能击杀
                    var html = '<div class="enemy" style="background:purple;left:'+left+'px" life="200" type="D" lifeUp="0" magicUp="0" score="200">D</div>'
                }else if(temp>30&&temp<=40){//F类精英,能且只能通过F技能击杀
                    var html = '<div class="enemy" style="background:lightgoldenrodyellow;left:'+left+'px" life="200" type="F" lifeUp="0" magicUp="0" score="200">F</div>'
                }else if(temp>40&&temp<=50){//击杀回复一定血量
                    var html = '<div class="enemy" style="left:'+left+'px" life="1" type="0" lifeUp="10" magicUp="0" score="10"></div>'
                }else if(temp>50&&temp<=60){//击杀回复法力值
                    var html = '<div class="enemy" style="left:'+left+'px" life="1" type="0" lifeUp="0" magicUp="10" score="10"></div>'
                }else{
                    var html = '<div class="enemy" style="left:'+left+'px" life="1" type="0" lifeUp="0" magicUp="0" score="10"></div>'
                }
                $("#content").append(html)
                $(".enemy").animate({
                    "top":"+=150%"
                },{
                    duration:5000,
                    step:function(){
                        data.enemyX = [];
                        data.enemyY = [];
                        $(".enemy").each(function() {
                            data.enemyX.push(parseInt($(this).css("left")))
                            data.enemyY.push(parseInt($(this).css("top")))
                        });
                            
                        if(parseInt($(this).css("top"))>$("#content").height()-50){
                            $(this).remove();
                            data.lifePoint-=10;
                            data.createLifeBar()
                            if(data.lifePoint===0){
                                alert("game Over")
                            }
                            
                        }
                    }
                })
            },
            
            //碰撞方法
            gameRule:function(){
                for(var i=0;i<data.enemyX.length;i++){
                    for(var j=0;j<data.shootX.length;j++){
                        if(Math.abs(data.shootX[j] - data.enemyX[i])<50&&Math.abs(data.shootY[j] - data.enemyY[i]) < 50){
                            var life = $(".enemy").eq(i).attr("life");
                            var enemyType = $(".enemy").eq(i).attr("type");
                            var shootType = $(".shoot").eq(j).attr("type");
                            
                            switch(enemyType){
                                case "0":
                                    var score = parseInt($(".enemy").eq(i).attr("score"));
                                    var lifeUp = parseInt($(".enemy").eq(i).attr("lifeUp"));
                                    var magicUp = parseInt($(".enemy").eq(i).attr("magicUp"));
                                    data.magicPoint+=magicUp;
                                    data.lifePoint+=lifeUp;
                                    data.score+=score;
                                    data.refreshScore();
                                    data.createLifeBar();
                                    data.createMagicBar();
                                    $(".enemy").eq(i).remove();
                                break;
                                case "A":
                                    if(enemyType===enemyType){
                                        var score = parseInt($(".enemy").eq(i).attr("score"));
                                        data.score+=score;
                                        data.refreshScore();
                                        data.createLifeBar();
                                        data.createMagicBar();
                                        $(".enemy").eq(i).remove();
                                    }else{
                                        return false;
                                    }
                                    
                                break;
                                case "S":
                                    if(enemyType===enemyType){
                                        var score = parseInt($(".enemy").eq(i).attr("score"));
                                        data.score+=score;
                                        data.refreshScore();
                                        data.createLifeBar();
                                        data.createMagicBar();
                                        $(".enemy").eq(i).remove();
                                    }else{
                                        return false;
                                    }
                                break;
                                case "D":
                                    if(enemyType===enemyType){
                                        var score = parseInt($(".enemy").eq(i).attr("score"));
                                        data.score+=score;
                                        data.refreshScore();
                                        data.createLifeBar();
                                        data.createMagicBar();
                                        $(".enemy").eq(i).remove();
                                    }else{
                                        return false;
                                    }
                                break;
                                case "F":
                                    if(enemyType===enemyType){
                                        var score = parseInt($(".enemy").eq(i).attr("score"));
                                        data.score+=score;
                                        data.refreshScore();
                                        data.createLifeBar();
                                        data.createMagicBar();
                                        $(".enemy").eq(i).remove();
                                    }else{
                                        return false;
                                    }
                                break;
                            }
                        }
                    }
                }
            },
            
            //鼠标移动控制玩家左右移动
            playerCtrl:function(){
                $("body").mousemove(function(e){
                    
                    if((e.pageX<($(window).width() - $("#content").width())/2+$("#player").width()/2)|| (e.pageX > $(window).width()- ($(window).width() - $("#content").width())/2 -$("#player").width()/2) ){
                        return false;
                    }
                    data.playerX = e.pageX;
                    
                    $("#player").css({
                        "left": data.playerX - ($(window).width() - $("#content").width()) / 2 - $("#player").width() / 2
 
                    })
                    
                })
            },
            //技能
            playerSkills:function(){
                var ASkillRefresh=1000;//A技能冷却时间
                var SSkillRefresh=1000;//S技能冷却时间
                var DSkillRefresh=1000;//D技能冷却时间
                var FSkillRefresh=1000;//F技能冷却时间
                var starTimeA=new Date().getTime();
                var starTimeS=new Date().getTime();
                var starTimeD=new Date().getTime();
                var starTimeF=new Date().getTime();
                $(document).keyup(function(e) {
                    var keys=e.keyCode
                    var left =parseInt($("#player").css("left"))
                    switch(keys){
                        case 32: //普通攻击(空格)
                            var html='<div class="shoot" style="left:'+(left+25)+'px"></div>'
                            $("body").append(html)
                            $(".shoot").animate({
                                "top":"-=150%"
                            },{
                                duration:1000,
                                step:function(){
                                    data.shootX=[];
                                    data.shootY=[];
                                    $(".shoot").each(function() {
                                        data.shootX.push(parseInt($(this).css("left")))
                                        data.shootY.push(parseInt($(this).css("top")))
                                    });
                                    data.gameRule();
                                    if(parseInt($(this).css("top"))<0){
                                        $(this).remove()
                                    }
                                }
                            })
                        break;
                            
                        case 65: //A
                        var larstTime=new Date().getTime();
                        
                        if(larstTime-starTimeA<ASkillRefresh){
                            return false;
                        }else{
                            starTimeA=larstTime
                            var html='<div class="shoot ASkill" type="A" style="left:'+(left+15)+'px"></div>'
                            $("body").append(html)
                            $(".shoot").animate({
                                "top":"-=150%"
                            },{
                                duration:1000,
                                step:function(){
                                    data.shootX=[];
                                    data.shootY=[];
                                    $(".shoot").each(function() {
                                        data.shootX.push(parseInt($(this).css("left")))
                                        data.shootY.push(parseInt($(this).css("top")))
                                    });
                                    if(parseInt($(this).css("top"))<0){
                                        $(this).remove()
                                    }
                                }
                            })
                        }
                        break;
                        
                        case 83: //S
                        var larstTime=new Date().getTime();
                        
                        if(larstTime-starTimeS<SSkillRefresh){
                            return false;
                        }else{
                            starTimeS=larstTime
                            var html='<div class="shoot SSkill" type="S" style="left:'+(left+15)+'px"></div>'
                            $("body").append(html)
                            $(".shoot").animate({
                                "top":"-=150%"
                            },{
                                duration:1000,
                                step:function(){
                                    data.shootX=[];
                                    data.shootY=[];
                                    $(".shoot").each(function() {
                                        data.shootX.push(parseInt($(this).css("left")))
                                        data.shootY.push(parseInt($(this).css("top")))
                                    });
                                    data.gameRule();
                                    if(parseInt($(this).css("top"))<0){
                                        $(this).remove()
                                    }
                                }
                            })
                        }
                        break;
                        
                        case 68: //D
                        
                        var larstTime=new Date().getTime();
                        
                        if(larstTime-starTimeD<DSkillRefresh){
                            return false;
                        }else{
                            starTimeD=larstTime
                            var html='<div class="shoot DSkill" type="D" style="left:'+(left+15)+'px"></div>'
                            $("body").append(html)
                            $(".shoot").animate({
                                "top":"-=150%"
                            },{
                                duration:1000,
                                step:function(){
                                    data.shootX=[];
                                    data.shootY=[];
                                    $(".shoot").each(function() {
                                        data.shootX.push(parseInt($(this).css("left")))
                                        data.shootY.push(parseInt($(this).css("top")))
                                    });
                                    data.gameRule();
                                    if(parseInt($(this).css("top"))<50){
                                        $(this).remove()
                                        
                                    }
                                }
                            })
                        }
                        
                        break;
                        
                        case 70: //F
                        var larstTime=new Date().getTime();
                        
                        if(larstTime-starTimeF<FSkillRefresh){
                            return false;
                        }else{
                            starTimeF=larstTime
                            var html='<div class="shoot FSkill" type="F" style="left:'+(left+15)+'px"></div>'
                            $("body").append(html)
                            $(".shoot").animate({
                                "top":"-=150%"
                            },{
                                duration:1000,
                                step:function(){
                                    data.shootX=[];
                                    data.shootY=[];
                                    $(".shoot").each(function() {
                                        data.shootX.push(parseInt($(this).css("left")))
                                        data.shootY.push(parseInt($(this).css("top")))
                                    });
                                    data.gameRule();
                                    if(parseInt($(this).css("top"))<0){
                                        $(this).remove()
                                    }
                                }
                            })
                        }
                        break;
                        default:
                        break;
                    }
                })
            }
            
        }
        $(function(){
            data.createLifeBar();
            data.createMagicBar();
            data.playerCtrl();
            data.playerSkills();
            //定时器设置敌人出现的间隔
            var timer=setInterval(function(){
                data.createEnemy()                
            },1000)
        })

var plaint = [
    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, 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, 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, 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, 1, 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, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 1, 1, 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, 1, 1, 1, 1, 1, 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, 1, 1, 1, 1, 1, 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, 1, 1, 1, 1, 1, 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, 1, 1, 1, 1, 1, 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, 1, 1, 1, 1, 1, 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0,
    0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0,
    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
    0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0,
    0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0,
    0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0,
    0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
 
];
 
$("#player").empty();
var playerStr = '';
for(var i = 0; i < plaint.length; i++) {
    if(plaint[i] == 1) {
        playerStr += '<div class="plainPart"></div>';
    } else if(plaint[i] == 0) {
        playerStr += '<div class="plainNull"></div>';
    }
}
$("#player").append(playerStr);