kylx365
/
miaoguo_system_server


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
							<html>
<head>
    <script type="text/javascript" src="./js/jquery-1.6.4.min.js"></script>

    <style>
        body{
            margin:0;
            padding: 0;
        }

        .tank{
            width:50px;
            height:50px;
            position: absolute;
            border-radius: 10%;

        }

        #tank_1{
            background-color: deepskyblue;
            left:5px;
            top:5px;
        }
        #tank_2{
            background-color: navy;
            left:5px;
            top:450px;
        }


        .Circle{
            width:25px;
            height:25px;
            border-radius: 50%;
            background-color: #ddd;
            position: absolute;
            left:12px;
            top:12px;
        }

        .gun{
            width:35px;
            height:6px;
            background-color: #ddd;
            position: absolute;
            left:25px;
            top:22px;
            z-index: 10;
        }

        .bullet{
            width:6px;
            height:6px;
            border-radius: 50%;
            background-color: #000;
            z-index: 0;
            position: absolute;
            border-top-right-radius: ;
            left:25px;
            top:22px;
            transform: rotate(0deg);
        }

        .wall{
            background-color: blue;
            position: absolute;
            border-radius: 10px;
            color:#fff;
            font-size:40px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        var arrWall=[
            [{x:0,y:0},{x:5,y:505},0,""],
            [{x:0,y:0},{x:505,y:5},0,""],
            [{x:500,y:0},{x:505,y:505},0,""],
            [{x:0,y:500},{x:500,y:505},0,""],

            [{x:400,y:100},{x:455,y:155},1,"10"],
            [{x:400,y:200},{x:455,y:255},1,"80"],
            [{x:400,y:300},{x:455,y:355},1,"50"],


        ];
        var isMove=true;

        $(document).ready(function(){
            buildWall();
        });

        $(document).keydown(function(event){
            console.log(event.keyCode);
            switch (event.keyCode) {
                case 37:
                case 38:
                case 39:
                case 40:
                    move($("#tank_1"), event.keyCode, 50);
                    break;
                case 32:
                    gun($("#tank_1"),null,800);
                    break;
            }

            switch (event.keyCode) {
                case 65:
                case 87:
                case 68:
                case 83:
                    move($("#tank_2"), event.keyCode, 50);
                    break;
                case 81:
                    gun($("#tank_2"),null,800);
                    break;
            }
        });

        function move(obj,direction,step){
            var directionStr="";
            var pointSource={
                x:Number($(obj).css("left").replace("px","")),
                y:Number($(obj).css("top").replace("px","")),
            };
            var pointTarget={
                x:pointSource.x,
                y:pointSource.y,
                direction:null,
            }

            switch (direction){
                case 37:
                case 65:
                    $(obj).css("transform",'rotate(180deg)');
                    pointTarget.x=pointSource.x-step;
                    pointTarget.direction="left";
                    break;
                case 38:
                case 87:
                    $(obj).css("transform",'rotate(-90deg)');
                    pointTarget.y=pointSource.y-step;
                    pointTarget.direction="up";
                    break;
                case 39:
                case 68:
                    $(obj).css("transform",'rotate(0deg)');
                    pointSource.x+=$(obj).width();
                    //pointSource.y+=$(obj).height();
                    pointTarget.x=pointSource.x+step;
                    pointTarget.direction="right";
                    break;
                case 40:
                case 83:
                    $(obj).css("transform",'rotate(90deg)');
                    //pointSource.x+=$(obj).width();
                    pointSource.y+=$(obj).height();
                    pointTarget.y=pointSource.y+step;
                    pointTarget.direction="down";
                    break;
            }
            console.log("pointSource.x:"+pointSource.x);
            console.log("pointSource.y:"+pointSource.y);
            console.log("pointTarget.x:"+pointTarget.x);
            console.log("pointTarget.y:"+pointTarget.y);

            pointTarget=checkWall(pointSource,pointTarget);

            if (pointTarget.direction=="right") {
                pointTarget.x -= $(obj).width();
                //pointTarget.y -= $(obj).height();
            }
            else if (pointTarget.direction=="down") {
                //pointTarget.x -= $(obj).width();
                pointTarget.y -= $(obj).height();
            }

            console.log("pointTarget2.x:"+pointTarget.x);
            console.log("pointTarget2.y:"+pointTarget.y);

            //console.log("isMove:"+isMove);
            if (isMove) {
                isMove=false;
                //console.log("isMove2:"+isMove);
                $(obj).stop();
                $(obj).animate({"left": pointTarget.x + "px", "top": pointTarget.y + "px"}, 400, null, function () {
                    //console.log("isMove3:"+isMove);
                    isMove = true;

                });
            }
        }

        function checkWall(pointSource,pointTarget){
            var result=pointTarget;


            if (pointSource.x>pointTarget.x && pointSource.y==pointTarget.y){
                for(var x=pointSource.x;x>=pointTarget.x;x--){
                    var r=getPoint(x,pointSource.y,pointTarget.direction);
                    if (r.update)
                        return r;
                }
            }
            if (pointSource.x==pointTarget.x && pointSource.y>pointTarget.y){
                for(var y=pointSource.y;y>=pointTarget.y;y--){
                    var r=getPoint(pointSource.x,y,pointTarget.direction);
                    if (r.update)
                        return r;
                }
            }
            if (pointSource.x<=pointTarget.x && pointSource.y==pointTarget.y){
                for(var x=pointSource.x;x<=pointTarget.x;x++){
                    var r=getPoint(x,pointSource.y,pointTarget.direction);
                    if (r.update)
                        return r;
                }
            }
            if (pointSource.x==pointTarget.x && pointSource.y<=pointTarget.y){
                for(var y=pointSource.y;y<=pointTarget.y;y++){
                    var r=getPoint(pointSource.x,y,pointTarget.direction);
                    if (r.update)
                        return r;
                }
            }

            return result;


            function getPoint(x,y,direction){
                var result={
                    update:false,
                    direction:direction,
                };

                for(var i=0;i<arrWall.length;i++){
                    if (x>arrWall[i][0].x && x<arrWall[i][1].x && y>arrWall[i][0].y && y<arrWall[i][1].y){
                        if (direction=="left") {
                            result.update=true;
                            result.x=arrWall[i][1].x;
                        }
                        else if (direction=="right") {
                            result.update=true;
                            result.x=arrWall[i][0].x;
                        }
                        if (direction=="up") {
                            result.update=true;
                            result.y=arrWall[i][1].y;
                        }
                        else if (direction=="down") {
                            result.update=true;
                            result.y=arrWall[i][0].y;
                        }

                        if (!result.x)
                            result.x=x;
                        if (!result.y)
                            result.y=y;

                        result.isDisappear=arrWall[i][2];
                        result.WallObjectIndex=i;

                        break;
                    }
                }
                return result;
            }
        }

        function gun(obj,direction,step) {

            var pointSource = {
                x: (Number($(obj).css("left").replace("px", "")) + 24),
                y: (Number($(obj).css("top").replace("px", "")) + 22),
            };
            var pointTarget = {
                x: pointSource.x,
                y: pointSource.y,
                direction: null,
            }

            var bulletID = new Date().getTime();
            $(document.body).prepend("<div id=" + bulletID + " class='bullet'></div>");
            $("#" + bulletID).css("left", pointSource.x + "px");
            $("#" + bulletID).css("top", pointSource.y + "px");


            if ($(obj).css("transform") == "matrix(1, 0, 0, 1, 0, 0)") {
                pointTarget.x += step;
                pointTarget.direction = "right";
            }
            else if ($(obj).css("transform") == "matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0)") {
                pointTarget.y += step;
                pointTarget.direction = "down";
            }
            else if ($(obj).css("transform") == "matrix(-1, 1.22465e-16, -1.22465e-16, -1, 0, 0)") {
                pointTarget.x -= step;
                pointTarget.direction = "left";
            }
            else if ($(obj).css("transform") == "matrix(6.12323e-17, -1, 1, 6.12323e-17, 0, 0)") {
                pointTarget.y -= step;
                pointTarget.direction = "up";
            }
            pointTarget = checkWall(pointSource, pointTarget);

            if (pointTarget.direction == "right")
                pointTarget.x -= $("#" + bulletID).width();
            else if (pointTarget.direction == "down")
                pointTarget.y -= $("#" + bulletID).height();

            $("#" + bulletID).animate({"left": pointTarget.x + "px", "top": pointTarget.y + 'px'}, 'fast',null,function(){
                $("#" + bulletID).animate({
                            "opacity": '0',
                            "width": '30px',
                            "height": '30px',
                            "left": '-=10px',
                            "top": '-=10px'
                        },
                        '100', '', function () {
                            $(this).remove();
                        });
                if (pointTarget.isDisappear == 1) {

                    if (Number(arrWall[pointTarget.WallObjectIndex][3])>1){
                        arrWall[pointTarget.WallObjectIndex][3]=Number(arrWall[pointTarget.WallObjectIndex][3])-1;
                        $("#wall_" + pointTarget.WallObjectIndex).text(arrWall[pointTarget.WallObjectIndex][3]);
                    }
                    else {
                        $("#wall_" + pointTarget.WallObjectIndex).animate({
                            "opacity": '0',
                            "width": '100px',
                            "height": '100px',
                            "left": '-=20px',
                            "top": '-=20px'
                        }, 100, null, function () {
                            $(this).remove();
                            arrWall[pointTarget.WallObjectIndex][0].x = -1;
                            arrWall[pointTarget.WallObjectIndex][0].y = -1;
                            arrWall[pointTarget.WallObjectIndex][1].x = -1;
                            arrWall[pointTarget.WallObjectIndex][1].y = -1;

                        });
                    }
                }
            });


        }

        function buildWall(){
            for(var i=0;i<arrWall.length;i++){
                var width=arrWall[i][1].x-arrWall[i][0].x;
                var height=arrWall[i][1].y-arrWall[i][0].y;

                $(document.body).append("<div id='wall_"+i+"' class='wall' style='left:"+arrWall[i][0].x+"px;top:"+arrWall[i][0].y+"px;width:"+width+"px;height:"+height+"px;'>"+arrWall[i][3]+"</div>")
            }
        }


    </script>
</head>

<body>
<div id="tank_1" class="tank">
    <div class="Circle"></div>
    <div class="gun"></div>
</div>

<div id="tank_2" class="tank">
    <div class="Circle"></div>
    <div class="gun"></div>
</div>


</body>

</html>