HTML5坦克大战

发布时间：2020-06-28 14:27:41 来源：网络阅读：1143 作者：cuisj520 栏目：移动开发
最近比较空闲,研究了HTML5.还这真是有很多强大的地方.废话不多说,以下是我写的一个坦克大战的游戏.话了我几天时间,还是未完成版的,(未完成部分主要是敌军坦克如何去绘画,用<canvas>),如果有思路的可以给个回复,
虽然代码不是很长,但是逻辑思路还是很强的,绘画顺序都有一定要求(主要逻辑难点就是×××发射和击打障碍物和坦克对障碍物的判断):一下是代码(坦克移动,发射×××,障碍物判断都已完成)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
<style type="text/css">  
      
    #container{  
        position:absolute;  
        top:10px;  
        left:300px;  
    }  
    #canvas{  
        position:absolute;  
        top:0px;  
        left:px;  
    }  
    #d{  
        height:20px;  
        width:20px;  
        background-color:#F7FCF7;  
        border-style:groove;  
        border-width:15px;  
        border-color:#667560;  
    }  
</style>  
<script type="text/javascript" src="jquery.js"></script>  
</head>  
<body>  
      
    <div style="height:600px;width:600px;background-color:#000000;border-style:solid;" id="container">  
    <canvas id="canvas" width="600" height="600">  
    </div>  
</body>  
<script type="text/javascript">  
    var ctx;  
    var x;  
    var y;  
    var screenHeight;  
    var screenWidth;  
    var woodImg=new Image();  
    var hardImg=new Image();  
    var grassImg=new Image();  
    var myTankImg=new Image();  
    var eagleImg=new Image();  
    var TankData={speed:10,direction:"up"};  
    var time=8;  
      
    //坦克  
    var GameObject=function(){this.x=0;this.y=0;this.p_w_picpath=null;};  
    var Tank=function(){};Tank.prototype=new GameObject();  
    var myTank=new Tank();  
      
    //×××  
    var bulletFun=function(){  
        this.x=0;  
        this.y=0;  
        this.direction="";  
        this.speed=2;  
        this.strong=1;  
    }   
    var bulletArr=new Array(0);  
      
    $(window).ready(function(){  
        ctx=document.getElementById("canvas").getContext("2d");  
        screenWidth=parseInt($("#canvas").attr("width"));  
        screenHeight=parseInt($("#canvas").attr("height"));  
          
        keyDownEven();  
        mouseClick();  
        LoadData();  
        GameStart();  
    });  
      
    //初始化相关数据  
    var LoadData=function(){  
        myTank.x=200;  
        myTank.y=560;  
        mapArrayVal();  
          
    }  
    //游戏开始加载所有图形  
    var GameStart=function(){  
        ctx.clearRect(0,0,screenWidth,screenHeight);  
        ctx.save();  
        loadImg();  
        drawMap();  
        drawMyTank();  
        ctx.restore();  
    }  
      
    //加载图片  
    var loadImg=function(){  
        woodImg.src="p_w_picpaths/wood.jpg";  
        hardImg.src="p_w_picpaths/hard.jpg";  
        grassImg.src="p_w_picpaths/grass.jpg";  
        myTankImg.src="p_w_picpaths/tank.png";  
        eagleImg.src="p_w_picpaths/eagle.jpg";  
          
        myTank.p_w_picpath=myTankImg;  
    }  
    //地图用二维数组表示,0表示空,1表示红砖,2表示铁砖,3表示草皮,4未定(暂用草皮)  
    var mapArray=new Array(30);  
    var mapArrayVal=function(){  
        for(var i=0;i<mapArray.length;i++){  
            mapArray[i]=new Array(30);  
            for(var j=0;j<mapArray[i].length;j++){  
                mapArray[i][j]=parseInt(10*Math.random());  
            }  
        }  
        //地图有些地方时不能有红砖,草皮等东西的  
        mapArray[0][0]=0;mapArray[1][0]=0;mapArray[13][0]=0;mapArray[14][0]=0;mapArray[28][0]=0;mapArray[29][0]=0;  
        mapArray[0][1]=0;mapArray[1][1]=0;mapArray[13][1]=0;mapArray[14][1]=0;mapArray[28][1]=0;mapArray[29][1]=0;  
        mapArray[12][27]=1;mapArray[13][27]=1;mapArray[14][27]=1;mapArray[15][27]=1;mapArray[16][27]=1;mapArray[17][27]=1;  
        mapArray[10][28]=0;mapArray[11][28]=0;mapArray[12][28]=1;mapArray[13][28]=1;mapArray[14][28]=0;mapArray[15][28]=0;mapArray[16][28]=1;mapArray[17][28]=1;mapArray[18][28]=0;mapArray[19][27]=0;  
        mapArray[10][29]=0;mapArray[11][29]=0;mapArray[12][29]=1;mapArray[13][29]=1;mapArray[14][29]=0;mapArray[15][29]=0;mapArray[16][29]=1;mapArray[17][29]=1;mapArray[18][29]=0;mapArray[19][29]=0;  
          
    }  
    //绘制地图  
    var drawMap=function(){  
        for(var i=0;i<mapArray.length;i++){  
            for(var j=0;j<mapArray[i].length;j++){  
                x=i*20;  
                y=j*20;  
                if(mapArray[i][j]==1){  
                    ctx.drawImage(woodImg,x,y);  
                }else if(mapArray[i][j]==2){  
                    ctx.drawImage(hardImg,x,y);  
                }else if(mapArray[i][j]==3){  
                    ctx.drawImage(grassImg,x,y);  
                }  
            }  
        }  
        ctx.drawImage(eagleImg,280,560);  
    };  
    //绘制我的坦克  
    var drawMyTank=function(){  
        ctx.translate(myTank.x+myTank.p_w_picpath.width/2,myTank.y+myTank.p_w_picpath.height/2);  
        ctx.rotate(turnToAngle(TankData.direction) * Math.PI/180);  
        ctx.drawImage(myTank.p_w_picpath,-myTank.p_w_picpath.width/2,-myTank.p_w_picpath.height/2);  
    }  
    //绘制×××  
    var drawBullet=function(x,y,direction){  
        ctx.fillStyle="#339900";  
        ctx.beginPath();  
        ctx.arc(x,y,4,0,Math.PI*2,true);  
        ctx.closePath();  
        ctx.fill();  
    }  
    /*  
    *以下是相关事件  
    */ 
    //按键事件坦克移动转向   
    var keyDownEven=function(){  
        $("html").keydown(function(e){  
            var key=e.which;  
            if(key==37)key="left";  
            else if(key==38)key="up";  
            else if(key==39)key="right";  
            else if(key==40)key="down";  
            else key="no";  
            turnDirection(key,e);  
        })  
    }  
    //坦克转向移动以及边界检测  
    var turnDirection=function(key,e){  
        if(key!="no"){  
            e.preventDefault();  
            //物体边界检测  
            if(checkObject(key)==true){  
                //边界检测  
                if(key=="left"){  
                    myTank.x=myTank.x<=0?0:myTank.x-TankData.speed;  
                }else if(key=="up"){  
                    myTank.y=myTank.y<=0?0:myTank.y-TankData.speed;  
                }else if(key=="right"){  
                    myTank.x=myTank.x>=screenWidth-myTank.p_w_picpath.width?myTank.x:myTank.x+TankData.speed;  
                }else if(key=="down"){  
                    myTank.y=myTank.y>=screenHeight-myTank.p_w_picpath.height?myTank.y:myTank.y+TankData.speed;  
                }  
            }  
            ctx.clearRect(0, 0, screenWidth, screenHeight);  
            ctx.save();  
            drawMap();  
            TankData.direction=key;  
            drawMyTank();  
            ctx.restore();  
        }  
    }//将方向转成角度  
    var turnToAngle=function(direction){  
        if(direction=="right") return 90;  
        if(direction=="down")return 180;  
        if(direction=="left")return 270;  
        if(direction=="up")return 360;  
    }  
    //鼠标点击事件(发射×××)  
    var result;  
    var mouseClick=function(){  
        $("html").mousedown(function(){  
            clearInterval(result);  
            createBullet(myTank.x+myTank.p_w_picpath.width/2,myTank.y+myTank.p_w_picpath.height/2,TankData.direction);  
            result=setInterval(drawBulletLoop,time);  
        })  
    };  
    //射击,创建×××  
    var createBullet=function(_x,_y,_d){  
        var bullet=new bulletFun();  
        bullet.x=_x;  
        bullet.y=_y;  
        bullet.direction=_d;  
        bulletArr.push(bullet);  
    };  
    //循环绘画×××  
    var drawBulletLoop=function(){  
        ctx.clearRect(0, 0, screenWidth, screenHeight);  
        ctx.save();  
        drawMap();  
        var obj_x;  
        var obj_y;   
        for(var i=0;i<bulletArr.length;i++){  
            drawBullet(bulletArr[i].x,bulletArr[i].y,bulletArr[i].direction);  
            if(bulletArr[i].direction=="left"){  
                obj_x=parseInt(bulletArr[i].x/20)-1<0?0:parseInt(bulletArr[i].x/20)-1;  
                obj_y=parseInt(bulletArr[i].y/20);  
                bulletArr[i].x-=bulletArr[i].speed;  
                if(bulletArr[i].x>0){  
                    if(obj_x*20+20>=bulletArr[i].x){  
                        if(bulletArr[i].y%20==0){  
                            if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
                                mapArray[obj_x][obj_y]=0;  
                                bulletArr.splice(i,1);  
                            }  
                            if(mapArray[obj_x][obj_y-1]==1||mapArray[obj_x][obj_y-1]==2){  
                                mapArray[obj_x][obj_y-1]=0;  
                                bulletArr.splice(i,1);  
                            }  
                        }else{  
                            if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
                                mapArray[obj_x][obj_y]=0;  
                                bulletArr.splice(i,1);  
                            }  
                        }  
                    }  
                }else if(bulletArr[i].x<=0){  
                    bulletArr.splice(i,1);  
                }  
            }else if(bulletArr[i].direction=="up"){  
                obj_x=parseInt(bulletArr[i].x/20);  
                obj_y=parseInt(bulletArr[i].y/20)-1<0?0:parseInt(bulletArr[i].y/20)-1;  
                bulletArr[i].y-=bulletArr[i].speed;  
                if(bulletArr[i].y>0){  
                    if(obj_y*20+20>=bulletArr[i].y){  
                        if(bulletArr[i].x%20==0){  
                            if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
                                mapArray[obj_x][obj_y]=0;  
                                bulletArr.splice(i,1);  
                            }  
                            if(mapArray[obj_x-1][obj_y]==1||mapArray[obj_x-1][obj_y]==2){  
                                mapArray[obj_x-1][obj_y]=0;  
                                bulletArr.splice(i,1);  
                            }  
                        }else{  
                            if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
                                mapArray[obj_x][obj_y]=0;  
                                bulletArr.splice(i,1);  
                            }  
                        }  
                    }  
                }else if(bulletArr[i].y<=0){  
                    bulletArr.splice(i,1);  
                }  
            }else if(bulletArr[i].direction=="right"){  
                obj_x=parseInt(bulletArr[i].x/20)>29?29:parseInt(bulletArr[i].x/20);  
                obj_y=parseInt(bulletArr[i].y/20);  
                bulletArr[i].x+=bulletArr[i].speed;  
                if(bulletArr[i].x<screenWidth){  
                    if(obj_x*20<=bulletArr[i].x){  
                        if(bulletArr[i].y%20==0){  
                            if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
                                mapArray[obj_x][obj_y]=0;  
                                bulletArr.splice(i,1);  
                            }  
                            if(mapArray[obj_x][obj_y-1]==1||mapArray[obj_x][obj_y-1]==2){  
                                mapArray[obj_x][obj_y-1]=0;  
                                bulletArr.splice(i,1);  
                            }  
                        }else{  
                            if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
                                mapArray[obj_x][obj_y]=0;  
                                bulletArr.splice(i,1);  
                            }  
                        }  
                    }  
                }else if(bulletArr[i].x>=screenWidth){  
                    bulletArr.splice(i,1);  
                }  
            }else if(bulletArr[i].direction=="down"){  
                obj_x=parseInt(bulletArr[i].x/20);  
                obj_y=parseInt(bulletArr[i].y/20)<0?0:parseInt(bulletArr[i].y/20);  
                bulletArr[i].y+=bulletArr[i].speed;  
                if(bulletArr[i].y<screenHeight){  
                    if(obj_y*20<=bulletArr[i].y){  
                        if(bulletArr[i].x%20==0){  
                            if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
                                mapArray[obj_x][obj_y]=0;  
                                bulletArr.splice(i,1);  
                            }  
                            if(mapArray[obj_x-1][obj_y]==1||mapArray[obj_x-1][obj_y]==2){  
                                mapArray[obj_x-1][obj_y]=0;  
                                bulletArr.splice(i,1);  
                            }  
                        }else{  
                            if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
                                mapArray[obj_x][obj_y]=0;  
                                bulletArr.splice(i,1);  
                            }  
                        }  
                    }  
                }else if(bulletArr[i].x>=screenHeight){  
                    bulletArr.splice(i,1);  
                }  
            }  
        }  
        drawMyTank();  
        ctx.restore();  
    }  
    //坦克和物体边界的检测  
    var checkObject=function(direction){  
        var object_x;  
        var object_y;  
        var loop;  
        if(direction=="left"){  
            object_x=myTank.x%20==0?myTank.x-20:myTank.x-30;  
            if(object_x<0)object_x=0;  
            if(myTank.y%20==0){  
                object_y=myTank.y;  
                loop=2;  
            }else{  
                object_y=myTank.y-myTank.y%20;  
                loop=3;  
            }  
            for(var i=0;i<loop;i++){  
                if((mapArray[object_x/20][object_y/20+i]==1||mapArray[object_x/20][object_y/20+i]==2)&&(object_x+20)>=myTank.x){      
                    return false;  
                }  
            }  
        }else if(direction=="up"){  
            object_y=myTank.y%20==0?myTank.y-20:myTank.y-30;  
            if(myTank.x%20==0){  
                object_x=myTank.x;  
                loop=2;  
            }else{  
                object_x=myTank.x-myTank.x%20;  
                loop=3;  
            }  
            for(var i=0;i<loop;i++){  
                if((mapArray[object_x/20+i][object_y/20]==1||mapArray[object_x/20+i][object_y/20]==2)&&(object_y+20)>=myTank.y){  
                    return false;  
                }  
            }  
        }else if(direction=="right"){  
            object_x=myTank.x%20==0?myTank.x+myTank.p_w_picpath.width:myTank.x+myTank.p_w_picpath.width+10;  
            if(object_x>=600)object_x=580;  
            if(myTank.y%20==0){  
                object_y=myTank.y;  
                loop=2;  
            }else{  
                object_y=myTank.y-myTank.y%20;  
                loop=3;  
            }  
            for(var i=0;i<loop;i++){  
                if((mapArray[object_x/20][object_y/20+i]==1||mapArray[object_x/20][object_y/20+i]==2)&&object_x<=(myTank.x+myTank.p_w_picpath.width)){  
                    return false;  
                }  
            }  
        }else if(direction=="down"){  
            object_y=myTank.y%20==0?myTank.y+40:myTank.y+50;  
            if(myTank.x%20==0){  
                object_x=myTank.x;  
                loop=2;  
            }else{  
                object_x=myTank.x-myTank.x%20;  
                loop=3;  
            }  
            for(var i=0;i<loop;i++){  
                if((mapArray[object_x/20+i][object_y/20]==1||mapArray[object_x/20+i][object_y/20]==2)&&(object_y)<=(myTank.y+myTank.p_w_picpath.width)){  
                    return false;  
                }  
            }  
        }  
        return true;  
    }  
</script>  
</html>
向AI问一下细节
HTML5坦克大战

猜你喜欢

最新资讯

相关推荐

相关标签
