HTML+CSS+JQ试做经典坦克大战（一）

哈喽，各位慕课网的小伙伴们，今天我为大家带来一款用HTMLCSS和Jquery制作的不完整版坦克大战，希望能够帮助那些准备入门jquery的小伙伴们。
本篇内容，主要讲述，基本战场和内部元素的布置。准备好了吗，一起学习吧！

话不多说，惯例，上效果图和html内容

<div class="main" id="main">//主盒子
    <div class="map" id="map">//地图盒子，用来装地图
        <div class="map_i" id="map_i"></div>//地图小块模版
    </div>
    <div class="zhanchang" id="zhanchang">//战场盒子，用来装子弹
        <div class="tanker" id="yyf"></div>//一个名叫yyf的坦克，是我们的男1号
        <div class="zidan" id="yyf_zidan"></div>//yyf的炮弹
        <div class="tanker" id="bianji">//用来编辑地图的坦克
            <div class="guangbiao" id="guangbiao"></div>//其实它不是坦克，只是一个闪烁的光标
        </div>
    </div>
</div>

你没看错，html部分就是只有这么点内容，下面来看看强大的CSS和JQ是如何丰富页面的

第一部分 各元素css代码解析

div.main

.main{width:1000px;height:700px;position:absolute;border:1px solid red;left:10px;top:10px;}

单纯的设置大小，定位和边框

div.map

.map{width:850px;height:600px;position:absolute;border:0px solid blue;background:#000;
    left:50%;top:50%;margin-left:-425px;margin-top:-300px;}

地图容器，宽50*17  高50*12，黑色背景，居中于主容器

div.map_i

.map_i{ width:50px; height:50px; position:absolute;}

模版地图快，一个宽高50px的正方形，绝对定位。以后会复制17*12个，加入到div.map中

div.zhanchang

.zhanchang{width:850px;height:600px;position:absolute;border:0px solid blue;
    left:50%;top:50%;margin-left:-425px;margin-top:-300px;}

战场和map容器样式是一样的，因为两个div都是绝对定位，后加入的战场div具有高的zindex，因此战场将覆盖在map上方。

div.tanker#yyf

.tanker{width:50px;height:50px; position:absolute; display:none;}
#yyf{background:url(../img/tank2.png) no-repeat scroll 0 0; top:550px; left:300px;}

.tanker是一个正方形容器，绝对定位，默认是隐藏的；
#yyf，男一号坦克，有一个背景图片，并且定位于出生点。

div.zidan

.zidan{ width:8px; height:19px; background:url(../img/daodang.png); position:absolute;top:0; left:0px;opacity:0;}

.zidan是一个8*19的矩形，背景图片是一张导弹的图片，绝对定位与战场左上角，默认是透明的看不见

div.tanker#bianji div.guangbiao

#bianji{top:0;left:0; display:none;}
.guangbiao{ width:30px;height:30px;border:3px inset #0F0; position:absolute;top:7px;left:7px;}

div#bianji是一个绝对定位于战场左上角的坦克盒子，默认看不见；
div#bianji内部不是一张坦克的背景图片，而是一个居中的绿色的框。

不同地图块的样式

.zhuan_qiang{ background:url(../img/zhuan.jpg) no-repeat scroll -8px -9px}
.tie_qiang{background:url(../img/tieqiang.jpg) no-repeat scroll -4px -8px;}
.caodi{ background:url(../img/caodi.jpg);}
.riverqiang{ background:url(../img/river.jpg);}

不同的样式，有不同的背景图片

到此html和css部分就差不多了，下面继续看JQ如何生成整个地图。

第二部分 JQ完整地图

*在map容器内加入1712个小地图块，并给每个地图快不同的定位**

function addelembymodel(modelid,id,n){//复制modelid模版，加载N个相同的模版到id下
    for(var i=0;i<n;i++){
        var _html=$(modelid).clone().removeAttr('id');//获取模版元素，移除id属性，因为不需要了
        $(id).append(_html);//为地图内加入一个模版元素
    }
    $(modelid).remove();//将原模版移除
}
function addposition(){//为每个地图格子加上定位
    $('.map_i').each(function(index, element) {//遍历所有小地图快
        $(this).attr('style','');//重置其行内样式（很有必要，因为这个函数不只这里会用）
        var $left=index%17*50;//计算left值，不多赘述，因为每行17个，每个50px
        var $top=Math.floor(index/17)*50;//计算top值
        $(this).css({'left':$left,'top':$top});//为小地图快添加行内样式定位
    });
}

addelembymodel('#map_i','#map',17*12);
addposition();//页面加载完成后，就执行这两个函数

布置老家

.map_i:nth-child(196){width:100px; height:75px;margin:-25px -25px 0 -25px; background:url(../img/yyf2.png) #000;}
.map_i:nth-child(195),.map_i:nth-child(197),.map_i:nth-child(178),.map_i:nth-child(179),.map_i:nth-child(180){
    background:url(../img/zhuan.jpg) no-repeat scroll -8px -9px;}
.map_i:nth-child(197){width:25px;height:50px; margin-left:25px;}

好吧我承认，老家是直接用css加上的，选中老家所在的6个图片格子，每个地图格子都添加砖墙的背景图片，中间的老家添加一个男一号脑袋。

function buzhilaojia(){//布置老家
    var $laojia=$('.map_i').slice(177,180).add($('.map_i').slice(194,197));
    $laojia.each(function(index, element) {
        $(this).addClass('zhuan_qiang_laojia');
    });//为老家加上不可穿越属性
}

这个函数是将老家所在的地图格子，加上一个class，class包含qiang关键字，在后面的脚本中，这意味着坦克不能穿越。

布置地图格子

var mapdata=[];//存储关卡地图数据
mapdata[0]=[5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 1, 5, 5, 1, 2, 2, 2, 2, 2, 3, 5, 5, 5, 3, 4, 5, 5, 1, 5, 5, 1, 5, 5, 2, 5, 5, 3, 3, 5, 3, 3, 4, 5, 5, 1, 5, 5, 1, 5, 5, 2, 5, 5, 3, 3, 5, 3, 3, 4, 5, 5, 1, 1, 1, 1, 5, 5, 2, 5, 5, 3, 5, 3, 5, 3, 4, 5, 5, 1, 5, 5, 1, 5, 5, 2, 5, 5, 3, 5, 3, 5, 3, 4, 5, 5, 1, 5, 5, 1, 5, 5, 2, 5, 5, 3, 5, 5, 5, 3, 4, 5, 5, 1, 5, 5, 1, 5, 5, 2, 5, 5, 3, 5, 5, 5, 3, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5];//关卡1数据，这里的数据也不是手输入的，以后会讲到一个自定义函数叫copymapdata()；编辑好地图以后，执行一次copymapdata()就可以获得一个数组。
function pastemap(data){//将data数据布置成地图
    clearmap();//清理地图，这个函数实际上清除所有地图格子的行内样式
    for(var i=0;i<data.length;i++){//遍历地图数据
        switch(data[i]){//根据数据内容，为每个格子加上对应的class
            case 1:$('.map_i').eq(i).addClass('zhuan_qiang');break;
            case 2:$('.map_i').eq(i).addClass('tie_qiang');break;
            case 3:$('.map_i').eq(i).addClass('riverqiang');break;
            case 4:$('.map_i').eq(i).addClass('caodi');break;
        }
    }
    buzhilaojia();//因为前面的clearmap()清理过行内样式，这里需要重新布置老家
}

pastemap(mapdata[0]);

页面加载完成后，直接布置关卡1的地图

到此，地图的布置就已经完成了，以后的篇章将讲述坦克的行为。