网站建设 >

查看其它板块

HTML5坦克大战

最近比较空闲,研究了HTML5.还这真是有很多强大的地方.废话不多说,以下是我写的一个坦克大战的游戏.话了我几天时间,还是未完成版的,(未完成部分主要是敌军坦克如何去绘画,用

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：国际域名空间、网站空间、营销软件、网站建设、贡嘎网站维护、网站推广。

虽然代码不是很长,但是逻辑思路还是很强的,绘画顺序都有一定要求(主要逻辑难点就是×××发射和击打障碍物和坦克对障碍物的判断):一下是代码(坦克移动,发射×××,障碍物判断都已完成)

  
  
  
  
Insert title here  
 
     
    #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;  
    }

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[i]=new Array(30);

for(var j=0;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

for(var j=0;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

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

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

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

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

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

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;

&n
当前名称：HTML5坦克大战
网站地址：http://cdkjz.cn/article/josjdh.html

返回首页了解更多建站资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线成都：13518219792 座机：028-86922220

在线咨询提交需求

友情链接交换友情链接

成都网站建设自适应网站西信中心简阳电信机房中国（西部）云计算中心大足网站建设成都托管服务器成都网站维护攀枝花网站建设兴久牧业

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图