小强的HTML5移动开发之路（7）——坦克大战游戏1

最新推荐文章于 2024-01-02 14:56:51 发布
最新推荐文章于 2024-01-02 14:56:51 发布
阅读量921 收藏
点赞数
分类专栏： html5学习之小强 文章标签： HTML5

上一篇中我们介绍了关于Canvas的基础知识，用Canvas绘制各种图形和图片，在上一篇的基础上我们来做一个基于HTML5的坦克大战游戏，下面我们开始吧微笑

一、用Canvas画出我们的坦克

我们设计的坦克结构如下图所示，如果有的朋友有更好的设计，希望分享和交流一下。


如上图所示，我们的坦克基本上是由三个矩形和一个圆形一个线段组成，每个部件的尺寸进行了标记，单位为px,下面我们用上一篇中讲到的知识来画出我们的坦克，注意：我们在画坦克的时候应该选择一个参考点，这里我们选择的是坦克的左上角，如图所示。

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8"/>  
  5. </head>  
  6. <body>  
  7. <h1>html5-坦克大战</h1>  
  8. <!--坦克大战的战场-->  
  9. <canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>  
  10. <script type="text/javascript">  
  11.     //得到画布  
  12.     var canvas1 = document.getElementById("tankMap");  
  13.       
  14.     //定义一个位置变量  
  15.     var heroX = 80;  
  16.     var heroY = 80;  
  17.       
  18.     //得到绘图上下文  
  19.     var cxt = canvas1.getContext("2d");  
  20.     //设置颜色  
  21.     cxt.fillStyle="#BA9658";  
  22.     //左边的矩形  
  23.     cxt.fillRect(heroX,heroY,5,30);  
  24.     //右边的矩形  
  25.     cxt.fillRect(heroX+17,heroY,5,30);  
  26.     //画中间的矩形  
  27.     cxt.fillRect(heroX+6,heroY+5,10,20);  
  28.     //画出坦克的盖子  
  29.     cxt.fillStyle="#FEF26E";  
  30.     cxt.arc(heroX+11,heroY+15,5,0,360,true);  
  31.     cxt.fill();  
  32.     //画出炮筒  
  33.     cxt.strokeStyle="#FEF26E";  
  34.     cxt.lineWidth=1.5;  
  35.     cxt.beginPath();  
  36.     cxt.moveTo(heroX+11,heroY+15);  
  37.     cxt.lineTo(heroX+11,heroY);  
  38.     cxt.closePath();  
  39.     cxt.stroke();  
  40.       
  41.       
  42. </script>  
  43. </body>  
  44. </html>  


二、怎么让坦克动起来？

在研究怎么让坦克动起来之前，我们先来研究一下怎么让一个小球通过键盘操作使其动起来。

首先我们给<body>标签添加一个监听函数

  1. <body onkeydown="test()">  
监听函数

  1. //现在按键盘上ASDW移动小球  
  2. //说明：当我们按下一个键，实际上触发了一个onkeydown事件  
  3. function test(){  
  4.     var code = event.keyCode;  //键盘上字幕的ASCII码  
  5.     switch(code){  
  6.         case 87:  
  7.             ballY--;  
  8.             break;  
  9.         case 68:  
  10.             ballX++;  
  11.             break;  
  12.         case 83:  
  13.             ballY++;  
  14.             break;  
  15.         case 65:  
  16.             ballX--;  
  17.             break;  
  18.     }  
  19.     //重新绘制  
  20.     drawBall();  
  21. }  

我们可以在外部定义两个全局的变量分别表示x轴和y轴的坐标，然后通过改变ballX和ballY的值来改变小球的位置，我们用键盘的WDSA键来控制，这样出来的效果非常奇怪，如下图：


我们在绘制的时候没有将以前位置的小球擦除掉，在每次重新绘制前应该先擦除一下，下面将全部代码贴出来：

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8"/>  
  5. </head>  
  6. <!--当按键后，去调用test-->  
  7. <body onkeydown="test()">  
  8. <h1>小球上下左右移动</h1>  
  9. <canvas id="test" width="400px" height="300px" style="background-color:black">  
  10. </canvas>  
  11. <script type="text/javascript">  
  12.   
  13.     //得到画布  
  14.     var canvas1 = document.getElementById("test");  
  15.       
  16.     //定义一个位置变量  
  17.     var ballX = 80;  
  18.     var ballY = 80;  
  19.       
  20.     //得到绘图上下文  
  21.     var cxt = canvas1.getContext("2d");  
  22.     drawBall();  
  23.     function drawBall(){  
  24.         //画出一个红色的圆球  
  25.         cxt.beginPath();  //要注意闭合路径  
  26.         cxt.fillStyle="#FF0000";  
  27.         cxt.arc(ballX,ballY,10,0,360,true);  
  28.         cxt.closePath();  
  29.         cxt.fill();  
  30.     }  
  31.       
  32.     //现在按键盘上ASDW移动小球  
  33.     //说明：当我们按下一个键，实际上触发了一个onkeydown事件  
  34.     function test(){  
  35.         var code = event.keyCode;  //键盘上字幕的ASCII码  
  36.         switch(code){  
  37.             case 87:  
  38.                 ballY--;  
  39.                 break;  
  40.             case 68:  
  41.                 ballX++;  
  42.                 break;  
  43.             case 83:  
  44.                 ballY++;  
  45.                 break;  
  46.             case 65:  
  47.                 ballX--;  
  48.                 break;  
  49.         }  
  50.         //把画布清理  
  51.         cxt.clearRect(0,0,400,300);  
  52.         //重新绘制  
  53.         drawBall();  
  54.     }  
  55. </script>  
  56. </body>  
  57. </html>  
三、让我们的坦克动起来

我们的坦克如果只是朝一个方向移动的话就非常容易了，只要将上面代码中的画小球改成画坦克就OK了，在让坦克移动之前我们首先应该考虑的是怎么让坦克绕着自己的中心朝各个方向转动的问题。好的，再将上面的图贴出来分析一下。


详细的计算过程我就不啰嗦了，想必大家的数学都很好，按照上图的比例计算好各个组件的坐标和位置，旋转后坦克画法如下：

  1. //设置颜色  
  2. cxt.fillStyle="#BA9658";  
  3. //上边的矩形  
  4. cxt.fillRect(tank.x-4,tank.y+4,30,5);  
  5. //下边的矩形  
  6. cxt.fillRect(tank.x-4,tank.y+17+4,30,5);  
  7. //画中间的矩形  
  8. cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);  
  9. //画出坦克的盖子  
  10. cxt.fillStyle="#FEF26E";  
  11. cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true);  
  12. cxt.fill();  
  13. //画出炮筒  
  14. cxt.strokeStyle="#FEF26E";  
  15. cxt.lineWidth=1.5;  
  16. cxt.beginPath();  
  17. cxt.moveTo(tank.x+15-4,tank.y+11+4);  
  18. if(tank.direct==1){         //只是炮筒的方向不同  
  19.     cxt.lineTo(tank.x+30-4,tank.y+11+4);  
  20. }else{  
  21.     cxt.lineTo(tank.x-4,tank.y+11+4);  
  22. }  
  23. cxt.closePath();  
  24. cxt.stroke();  
好了现在我们发现坦克朝向左边和右边仅仅只有炮筒的方向不同，同理朝向上边和下边也仅仅只有炮筒的方向不同，这时候我们可以将四个方向分为两种情况，再在各个小情况中做处理。同时用OO的思想将代码进行了封装，代码如下：

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8"/>  
  5. </head>  
  6. <body onkeydown="getCommand();">  
  7. <h1>html5-坦克大战</h1>  
  8. <!--坦克大战的战场-->  
  9. <canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>  
  10. <script type="text/javascript">  
  11.     //定义一个Hero类(后面还要改进）  
  12.     //x表示坦克的横坐标  
  13.     //y表示纵坐标  
  14.     //direct表示方向  
  15.     function Hero(x,y,direct){  
  16.         this.x=x;  
  17.         this.y=y;  
  18.         this.speed=1;  
  19.         this.direct=direct;  
  20.         //上移  
  21.         this.moveUp=function(){  
  22.             this.y-=this.speed;  
  23.             this.direct=0;  
  24.         }  
  25.         //右移  
  26.         this.moveRight=function(){  
  27.             this.x+=this.speed;  
  28.             this.direct=1;  
  29.         }  
  30.         //下移  
  31.         this.moveDown=function(){  
  32.             this.y+=this.speed;  
  33.             this.direct=2;  
  34.         }  
  35.         //左移  
  36.         this.moveLeft=function(){  
  37.             this.x-=this.speed;  
  38.             this.direct=3;  
  39.         }  
  40.     }  
  41.   
  42.   
  43.     //得到画布  
  44.     var canvas1 = document.getElementById("tankMap");  
  45.     //得到绘图上下文  
  46.     var cxt = canvas1.getContext("2d");  
  47.       
  48.     //我的tank  
  49.     //规定0向上、1向右、2向下、3向左  
  50.     var hero = new Hero(40,40,0);  
  51.     drawTank(hero);  
  52.     //绘制坦克  
  53.     function drawTank(tank){  
  54.         //考虑方向  
  55.         switch(tank.direct){  
  56.             case 0:     //向上  
  57.             case 2:     //向下  
  58.                 //设置颜色  
  59.                 cxt.fillStyle="#BA9658";  
  60.                 //左边的矩形  
  61.                 cxt.fillRect(tank.x,tank.y,5,30);  
  62.                 //右边的矩形  
  63.                 cxt.fillRect(tank.x+17,tank.y,5,30);  
  64.                 //画中间的矩形  
  65.                 cxt.fillRect(tank.x+6,tank.y+5,10,20);  
  66.                 //画出坦克的盖子  
  67.                 cxt.fillStyle="#FEF26E";  
  68.                 cxt.arc(tank.x+11,tank.y+15,5,0,360,true);  
  69.                 cxt.fill();  
  70.                 //画出炮筒  
  71.                 cxt.strokeStyle="#FEF26E";  
  72.                 cxt.lineWidth=1.5;  
  73.                 cxt.beginPath();  
  74.                 cxt.moveTo(tank.x+11,tank.y+15);  
  75.                 if(tank.direct==0){         //只是炮筒的方向不同  
  76.                     cxt.lineTo(tank.x+11,tank.y);  
  77.                 }else{  
  78.                     cxt.lineTo(tank.x+11,tank.y+30);  
  79.                 }  
  80.                 cxt.closePath();  
  81.                 cxt.stroke();  
  82.                 break;  
  83.             case 1:  
  84.             case 3:  
  85.                 //设置颜色  
  86.                 cxt.fillStyle="#BA9658";  
  87.                 //上边的矩形  
  88.                 cxt.fillRect(tank.x-4,tank.y+4,30,5);  
  89.                 //下边的矩形  
  90.                 cxt.fillRect(tank.x-4,tank.y+17+4,30,5);  
  91.                 //画中间的矩形  
  92.                 cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);  
  93.                 //画出坦克的盖子  
  94.                 cxt.fillStyle="#FEF26E";  
  95.                 cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true);  
  96.                 cxt.fill();  
  97.                 //画出炮筒  
  98.                 cxt.strokeStyle="#FEF26E";  
  99.                 cxt.lineWidth=1.5;  
  100.                 cxt.beginPath();  
  101.                 cxt.moveTo(tank.x+15-4,tank.y+11+4);  
  102.                 if(tank.direct==1){         //只是炮筒的方向不同  
  103.                     cxt.lineTo(tank.x+30-4,tank.y+11+4);  
  104.                 }else{  
  105.                     cxt.lineTo(tank.x-4,tank.y+11+4);  
  106.                 }  
  107.                 cxt.closePath();  
  108.                 cxt.stroke();  
  109.                 break;    
  110.         }  
  111.           
  112.     }  
  113.       
  114.     //接收用户按键的函数  
  115.     function getCommand(){  
  116.         var code = event.keyCode;  //键盘上字幕的ASCII码  
  117.         switch(code){  
  118.             case 87:  
  119.                 hero.moveUp();  
  120.                 break;  
  121.             case 68:  
  122.                 hero.moveRight();  
  123.                 break;  
  124.             case 83:  
  125.                 hero.moveDown();  
  126.                 break;  
  127.             case 65:  
  128.                 hero.moveLeft();  
  129.                 break;  
  130.         }  
  131.         //把画布清理  
  132.         cxt.clearRect(0,0,400,300);  
  133.         //重新绘制  
  134.         drawTank(hero);  
  135.     }  
  136. </script>  
  137. </body>  
  138. </html>  
运行结果：


bulebirds
关注
专栏目录
小强的HTML5移动开发之路（8）——坦克大战游戏2
水寒
01-01 6562
在上一篇文章中我们已经画出了自己的坦克，并且可以控制自己的坦克移动，我们继续接着上一篇来实现我们的坦克大战游戏吧。 一、将JS文件分离出来 使用OO的思想，我们已经对坦克进行了封装，对画坦克也进行了封装，下面我们将这两个对象提取到外部的js文件中，文件内容如下： //定义一个Hero类(后面还要改进） //x表示坦克的横坐标 //y表示纵坐标 //direct表示方向 functi
HTML5游戏《坦克大战》完整源码
01-13
HTML5游戏《坦克大战》完整源码 请不要商用，仅限学习使用
html做坦克大战的效果,HTML5实现坦克大战（一）
weixin_29281941的博客
06-09 1090
方法：MoveUp：坦克上移MoveDown：坦克下移MoveRight：坦克右移MoveLeft：坦克左移MyTank extends TankEnemeyTank extends TankBulletTank字段：x:y:DIRIsLive：判断子弹是否还存活(包括过界和击中目标)方法 drawBullet():在canvas上画出子弹run() 让子弹飞1 2 3 4 5 6 ...
html5游戏 坦克大战,HTML5坦克大战
weixin_31083901的博客
05-31 289
htmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">Inserttitlehere#container{position:absolute;top:10px;left:300px;}#canvas{position:absolute;top:0px;left:p...
html5制作坦克大战
weixin_30287169的博客
09-17 219
全部html5都采用绘图技术完成。坦克是画出来的。（坦克，子弹，墙，水，草坪） 首先我们画出坦克。 坦克是两边两个矩形，中间一个大矩形，矩形了有一个圆，还有一根线。 画出坦克的思路是以坦克的左上角为参照点，画出坦克的其他部分。 这样的好处是，当左上角的点发生改变是，坦克才能发生改变。 不使用图片的原因就是图片是比较耗费资源的。因为图片的像素点很大。 tankGame1.htm...
小强的HTML5移动开发之路（9）——坦克大战游戏3
水寒
01-02 4954
上一篇我们创建了敌人的坦克和自己的坦克，接下来就应该让坦克发子弹了，我们下面来看一下如何让我们的坦克发出子弹。 前面我们用面向对象的思想对Tank进行了封装，又利用对象冒充实现了我们的坦克和敌人的坦克，仿照这种方式我们是不是也应该封装一个Bullet，答案是肯定的。好吧，那么我们再想想这个Bullet"类“都应该封装什么东西呢？位置应该有吧、子弹飞行的方向应该有吧、飞行的速度也应该有吧、自己飞出
小强的HTML5移动开发之路（20）——HTML5 Web SQL Database
水寒
01-14 5192
一、Web Database介绍 WebSQL数据库API实际上不是HTML5规范的组成部分，而是单独的规范。它通过一套API来操纵客户端的数据库。Safari、Chrome、Firefox、Opera等主流浏览器都已经支持WebSQL Database WebSQL数据库有三个核心方法： 1）打开数据库openDatabase()方法： 此方法创建数据库对象，既可
小强的HTML5移动开发之路（4）——CSS2和CSS3
水寒
12-29 7682
在上一篇中我们提到学习HTML5要具备CSS的知识，在页面设计的时候HTML5知识页面的布局与结构，要实现一个很绚丽漂亮的界面就需要借助CSS。下面我们先来回顾一下css2的基本用法，再来看看和css3的关系与区别。1、css是什么？cascading stylesheet(级联样式表)，为网页提供表现形式。按照w3c规范，设计一个网页，应该将网页的数据与结构写在html文件里，网页的外观写在cs
web前端坦克大战
11-22
你我共分享
HTML5坦克大战网页版.zip
05-23
坦克大战网页版基于HTML5 canvas制作的坦克大战单机版网页游戏源代码。
【程序源代码】html5坦克大战页面
最新发布
程序源代码
01-02 412
关键字：html5坦克大战页面一、html5坦克大战页面《html5坦克大战页面》该项目采用技术html5技术开发。项目含有源码、文档、配套开发软件、软件安装教程、项目发布教程坦克大战，这个小游戏，我想80、90后的小伙伴基本上都玩过吧。这套源码是采用html5技术开发的简单的网页。二、软件开发环境及开发工具 如下是在搭建过程中用到一些开发环境和工具。具体的使用方法可以咨询我或者百度...
html5+javascript+css实现---网页版坦克大战---无需运行环境
csdn_bajie
07-21 739
html5+javascript+css实现—网页版坦克大战—无需运行环境，只需一个浏览器，重拾少年情。 运行环境—除老版IE浏览器都可以； 源码需要请：点赞留言邮箱； 可以跳关，回退关卡。支持双人坦克大战… 坦克大战网页版 ...
前端「​大一统」​时代已来？
weixin_51689029的博客
03-10 6114
视野所及，唯有前端。 有互联网的地方就需要前端，随着软件开发的发展，企业和用户对前端所呈现的内容都有了更高的要求——页面不仅要在PC端适用，还必须在移动端等多种设备上精美呈现。 在这个过程中，React、Angular、Vue等突破传统前端成为主流框架，推动前端的组件化和工程化，让PC端、安卓端、iOS端有了“大一统”的趋势。 随着React、Vue等框架的出现，**“一次学习，多端受用”**也在前端工程师间传开。 现在掌握并精通React、Vue等主流框架的前端开发工程师成为企业青睐的人才！经调研，黑马程
HTML5制作坦克大战游戏+Canvas绘制基础图形——学习笔记一
小头Sophia
03-11 3431
注：学习视频来自传智播客公开课 1.离线存储 2.语音识别 3.图像识别 4.HTML5游戏 5.CSS3的强大之处：动画和各种选择器 6.Stoke：画线   fill:填充 7.Canvas相关的代码： html> lang="en"> charset="UTF-8"> 画图 id="cav" width="500px" height="500p
比较完善的用HTML5做的坦克大战代码
feilong_12的专栏
06-20 7761
此HTML5所做坦克的坦克大战的功能比较齐全   而且都是用HTML5画出来的坦克和炮弹 一、自己的坦克能上下左右移动  按wsad 这是上下左右键 二、自己的坦克可以发射多颗炮弹 连续发射炮弹     三、画出敌人的三个坦克 而且可以向四个方向随机移动  发射炮弹 四、自己的坦克可以击中敌人的坦克  敌人也可以击中自己的 五、不可以超出边界，击中敌人坦克  坦克爆炸 子弹消失 h
html坦克游戏,HTML5+JS实现坦克大战小游戏
weixin_39994949的博客
05-31 1261
听了韩顺平老师的视频教程，学到了不少编程思想，原来看似简单的坦克大战小游戏写起来其实并不简单。这里总结一下这几天学到的东西。首先是关于html5的知识了。这里我们基本上只用了画布canvas来画坦克，还有就是html5的第一行来说明这是一个使用html5写的页面,html5的特性之一就包括canvas，这是html中没有的标签。另外一个就是js了，涉及到的语法都是最简单、最基本的用法，这在代码中进...
Android游戏开发指南：C语言入门与实战
"本资源涵盖了Android游戏开发的全面教程，特别强调结合C语言讲解，适合有一定C基础的学习者。首先，对于Android开发的入门部分，读者将了解到Android是由Google推出，旨在移动设备尤其是智能手机和平价手机市场的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值