html5游戏 坦克大战,HTML5坦克大战

最新推荐文章于 2023-08-17 18:40:02 发布
最新推荐文章于 2023-08-17 18:40:02 发布
阅读量237 收藏
点赞数
文章标签： html5游戏 坦克大战

html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

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;

}

varctx;

varx;

vary;

varscreenHeight;

varscreenWidth;

varwoodImg=newImage();

varhardImg=newImage();

vargrassImg=newImage();

varmyTankImg=newImage();

vareagleImg=newImage();

varTankData={speed:10,direction:"up"};

vartime=8;

//坦克

varGameObject=function(){this.x=0;this.y=0;this.p_w_picpath=null;};

varTank=function(){};Tank.prototype=newGameObject();

varmyTank=newTank();

//×××

varbulletFun=function(){

this.x=0;

this.y=0;

this.direction="";

this.speed=2;

this.strong=1;

}

varbulletArr=newArray(0);

$(window).ready(function(){

ctx=document.getElementById("canvas").getContext("2d");

screenWidth=parseInt($("#canvas").attr("width"));

screenHeight=parseInt($("#canvas").attr("height"));

keyDownEven();

mouseClick();

LoadData();

GameStart();

});

//初始化相关数据

varLoadData=function(){

myTank.x=200;

myTank.y=560;

mapArrayVal();

}

//游戏开始加载所有图形

varGameStart=function(){

ctx.clearRect(0,0,screenWidth,screenHeight);

ctx.save();

loadImg();

drawMap();

drawMyTank();

ctx.restore();

}

//加载图片

varloadImg=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未定(暂用草皮)

varmapArray=newArray(30);

varmapArrayVal=function(){

for(vari=0;i

mapArray[i]=newArray(30);

for(varj=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;

}

//绘制地图

vardrawMap=function(){

for(vari=0;i

for(varj=0;j

x=i*20;

y=j*20;

if(mapArray[i][j]==1){

ctx.drawImage(woodImg,x,y);

}elseif(mapArray[i][j]==2){

ctx.drawImage(hardImg,x,y);

}elseif(mapArray[i][j]==3){

ctx.drawImage(grassImg,x,y);

}

}

}

ctx.drawImage(eagleImg,280,560);

};

//绘制我的坦克

vardrawMyTank=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);

}

//绘制×××

vardrawBullet=function(x,y,direction){

ctx.fillStyle="#339900";

ctx.beginPath();

ctx.arc(x,y,4,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

}

/*

*以下是相关事件

*/

//按键事件坦克移动转向

varkeyDownEven=function(){

$("html").keydown(function(e){

varkey=e.which;

if(key==37)key="left";

elseif(key==38)key="up";

elseif(key==39)key="right";

elseif(key==40)key="down";

elsekey="no";

turnDirection(key,e);

})

}

//坦克转向移动以及边界检测

varturnDirection=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;

}elseif(key=="up"){

myTank.y=myTank.y<=0?0:myTank.y-TankData.speed;

}elseif(key=="right"){

myTank.x=myTank.x>=screenWidth-myTank.p_w_picpath.width?myTank.x:myTank.x+TankData.speed;

}elseif(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();

}

}//将方向转成角度

varturnToAngle=function(direction){

if(direction=="right")return90;

if(direction=="down")return180;

if(direction=="left")return270;

if(direction=="up")return360;

}

//鼠标点击事件(发射×××)

varresult;

varmouseClick=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);

})

};

//射击,创建×××

varcreateBullet=function(_x,_y,_d){

varbullet=newbulletFun();

bullet.x=_x;

bullet.y=_y;

bullet.direction=_d;

bulletArr.push(bullet);

};

//循环绘画×××

vardrawBulletLoop=function(){

ctx.clearRect(0, 0, screenWidth, screenHeight);

ctx.save();

drawMap();

varobj_x;

varobj_y;

for(vari=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);

}

}

}

}elseif(bulletArr[i].x<=0){

bulletArr.splice(i,1);

}

}elseif(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);

}

}

}

}elseif(bulletArr[i].y<=0){

bulletArr.splice(i,1);

}

}elseif(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);

}

}

}

}elseif(bulletArr[i].x>=screenWidth){

bulletArr.splice(i,1);

}

}elseif(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);

}

}

}

}elseif(bulletArr[i].x>=screenHeight){

bulletArr.splice(i,1);

}

}

}

drawMyTank();

ctx.restore();

}

//坦克和物体边界的检测

varcheckObject=function(direction){

varobject_x;

varobject_y;

varloop;

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(vari=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){

returnfalse;

}

}

}elseif(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(vari=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){

returnfalse;

}

}

}elseif(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(vari=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)){

returnfalse;

}

}

}elseif(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(vari=0;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)){

returnfalse;

}

}

}

returntrue;

}

彭河森
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5坦克大战小游戏
03-11
HTML5坦克大战小游戏 HTML+CSS+JS 面向对象的编程,JavaScript代码简单好理解 适合有一定JS基础的初学者阅读参考
HTML5坦克大战（韩顺平版本）
weixin_30340745的博客
03-22 340
HTML5坦克大战（韩顺平版本） 2017-3-22 22:46:22bySemiconductorKING 　　去年暑假学习了一下HTML5实现简单的坦克大战，觉得对JavaScript初学者来说，练习这个小游戏代码段可以学到很多东西，包括canvas的简单运用，类的构造，类的继承等等。编写一个完整的游戏要有较强的逻辑性，这个demo的学习视频以及demo文件下载见我分享的链接：...
HTML5小游戏动手做（二）：使用PIXI引擎制作坦克大战游戏
time1812的专栏
01-27 5976
这里写自定义目录标题1. 简介1.1 PIXI 简介1.2 坦克大战游戏简介2. 实现细节2.1 技术选型2.2 环境搭建2.3 创建舞台2.4 游戏状态机2.5 消息总线2.6 加载页面2.7 开始页面2.8 我们的坦克 1. 简介 1.1 PIXI 简介 PIXI JS是一款轻量级的HTML5的2D引擎，我看现在它的官网上并没有说自己是“游戏”引擎而是说“The HTML5 Creation ...
基于HTML5的坦克大战静态页面
qq_53797749的博客
08-17 59
该项目使用HTML5、CSS3、DIV开发的静态网站，是针对需要做前段网页设计相关毕设课设的同学，前段相关知识点老师都有讲过可以免费学习，以及怎么改项目中图片和文字都有相关教程，教同学们怎么将。项目改成独一无二的一份，就算是零基础的同学也可以非常轻松搞定前段网页毕设课设项目，对于基础不好的同学是不错的选择。《基于HTML5坦克大战游戏的设计》
html做坦克大战的效果,HTML5实现坦克大战（一）
weixin_29281941的博客
06-09 1002
方法：MoveUp：坦克上移MoveDown：坦克下移MoveRight：坦克右移MoveLeft：坦克左移MyTank extends TankEnemeyTank extends TankBulletTank字段：x:y:DIRIsLive：判断子弹是否还存活(包括过界和击中目标)方法 drawBullet():在canvas上画出子弹run() 让子弹飞1 2 3 4 5 6 ...
html5坦克大战游戏,HTML5坦克大战游戏简化版
weixin_39620001的博客
05-30 279
本文作者html5tricks，转载请注明出处之前我们有分享过不少经典的HTML5游戏，有些还是很有意思的，比如HTML5版切水果游戏和HTML5中国象棋游戏。今天要分享的是一款简化版的JavaScript代码：window.addEventListener("load", canvasApp, false);//是否支持canvasfunction canvasSupport () {retur...
用 js+html 实现 坦克大战 游戏
07-04
相比于网上一般的坦克大战，我用js实现的坦克大战增加了很多新功能。 主要功能如下： 1、选关、跳关功能，还设置了Boss关，Boss关的难度有“A级”、“B级”、“S级”可供玩家选择，每十关设置一个Boss关 2、生命值，...
HTML5坦克大战游戏源码
07-18
本专题为那些愿意学习或使用HTML5及相关Web技术开发交互式游戏的开发者而编写，为大家讲解HTML5游戏开发基础教程及分享实战经验。 今时今日，我们将加入HTML5游戏开发的急先锋，明日将成为时代的弄潮儿。
HTML5坦克大战单机游戏特效代码
03-20
HTML5坦克大战单机游戏是一款基于HTML5 canvas制作的单机版游戏网页坦克大战源代码下载。
HTML5实战开发坦克大战视频教程
07-23
资源名称：HTML5实战开发坦克大战视频教程 教程内容：HTML5游戏公开课-坦克大战01.HTML5介绍.HTML5发展.HTML5学习网站推荐HTML5游戏公开课-坦克大战02.HTML5快速体验①(canvas.video.header.footer等)HTML5游戏公开...
HTML5游戏《坦克大战》完整源码
01-13
HTML5游戏《坦克大战》完整源码 请不要商用，仅限学习使用
坦克大战HTML5源代码
09-03
HTML5的坦克大战源代码，已优化到很好，细节上面还有不足！不错。
HTML5坦克大战
01-05
基于HTNL5开发的一个坦克大战游戏，HTML5的强大不用在说，看看做出来的游戏就知道，而且还远不止这些，先看看这个嘛
10-html5游戏坦克大战第六战（自己的坦克可以连续发射子弹）
高调做事，低调做人！
07-16 2128
tank.js /////////////////////////////////////////定义Tank类颜色开始///////////////////// var heroColor = new Array("#BA9658", "#FEF26E"); var enemyColor = new Array("#00A2B5", "#00FEFE"); // ///////////////
用html语言做坦克大战
只是个菜鸡
02-06 3708
我的博客 给大家揭秘一下坦克大战是怎么做的吧，只有一部分!!看到文章底下！！ 1、把这段代码复制到index.html中； 坦克大战主界面 body{ background:#cce8cf; margin-top: 5%; } $(function(){ var i=0; //用于判断音乐符号的标志 $("#music").c
html坦克游戏,HTML5+JS实现坦克大战小游戏
weixin_39994949的博客
05-31 1186
听了韩顺平老师的视频教程，学到了不少编程思想，原来看似简单的坦克大战小游戏写起来其实并不简单。这里总结一下这几天学到的东西。首先是关于html5的知识了。这里我们基本上只用了画布canvas来画坦克，还有就是html5的第一行来说明这是一个使用html5写的页面,html5的特性之一就包括canvas，这是html中没有的标签。另外一个就是js了，涉及到的语法都是最简单、最基本的用法，这在代码中进...
html坦克游戏,HTML5实现经典坦克大战坦克乱走还能发出一个子弹
weixin_29658015的博客
05-31 326
复制代码代码如下:tank.htmlhmtl5-经典的坦克大战数据//得到画布var canvas1=document.getElementById("tankMap");//得到绘图上下文(你可以理解是画笔)var cxt=canvas1.getContext("2d");//我的坦克 hero//方向var hero=new Hero(140,140,0,heroColor);//定义一颗空子...
比较完善的用HTML5做的坦克大战代码
feilong_12的专栏
06-20 7547
此HTML5所做坦克的坦克大战的功能比较齐全   而且都是用HTML5画出来的坦克和炮弹 一、自己的坦克能上下左右移动  按wsad 这是上下左右键 二、自己的坦克可以发射多颗炮弹 连续发射炮弹     三、画出敌人的三个坦克 而且可以向四个方向随机移动  发射炮弹 四、自己的坦克可以击中敌人的坦克  敌人也可以击中自己的 五、不可以超出边界，击中敌人坦克  坦克爆炸 子弹消失 h
html5坦克大战完整版
W1365966490的专栏
06-20 1721
tanke.js文件：  //定义敌人和我们自己的坦克的颜色  var enemyColor = new Array('#00FEFE','#00A2B5');  var heroColor = new Array('#FEF26E','#BA9658');  //封装一个公用的坦克类  function Tank(x,y,direct){   this.x = x;   this.
html5小游戏坦克
最新发布
12-22
HTML5坦克大战是一款基于HTML5技术开发的网页小游戏，它完美还原了小霸王学习机上的经典坦克大战游戏。游戏以坦克战斗和保卫基地为主题，属于策略型类游戏。 这款游戏具有简单易懂的操作方式和精美的像素风格画面，让玩家可以在浏览器中尽情享受坦克大战的乐趣。玩家需要操控自己的坦克，与敌方坦克进行战斗，并保卫自己的基地不被敌方摧毁。 游戏中有多个关卡，每个关卡都有不同的地图和敌人布局。玩家需要巧妙地运用战术，躲避敌方的攻击并找到合适的时机进行反击。同时，玩家还可以通过收集道具来增强自己的战斗能力，比如增加子弹威力、提升坦克速度等。 HTML5坦克大战是一款经典的小游戏，它不仅能够带给玩家回忆童年的乐趣，还能锻炼玩家的策略思维和反应能力。如果你对这款游戏感兴趣，可以在网上搜索相关的游戏链接进行体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值