上一篇博客只画出了,一个坦克,并让其可以上下左右移动,这篇博客将画出敌人的坦克,并让自己的坦克可以发子弹,但是还不是尽善尽美,还有一些问题,将会在下篇博客说明:

html代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head> <body onkeydown="getCommand()">
<h1>html5-经典的坦克大战</h1>
<canvas id="tankeMap" width="500px" height="500px" style="background-color:black">
</canvas>
<span id="aa">数据</span>
<script type="text/javascript" src="tankeGame.js"></script>
<script type="text/javascript">
//准备工作
//得到画布
var canvas1=document.getElementById("tankeMap");
//得到上下文引用对象,你可以理解成画笔
var cxt=canvas1.getContext("2d"); //定义一个坦克
//数字0表示向上 数字1表示右 数字2表示下 数字3表示左
var hero=new Hero(130,130,0,tankeColor); var heroBullet=null; //定义一个敌人的坦克数组对象
var enemyTankes=new Array(); //生成3个敌方坦克
for(var i=0;i<3;i++){
//创建敌人的坦克对象
var enemyTanke=new EnemyTanke((i+1)*50,30,2,enemyColor);
enemyTankes[i]=enemyTanke;
} //刚进来先刷新画布,并初始化元素
flashMap(); //刷新画布的函数
function flashMap(){
//清除画布的元素,刷新
cxt.clearRect(0,0,500,500); //画自己的坦克
drawTanke(hero);
//画自己的子弹
drawHeroBullet(); //画敌人的坦克
for(var i=0;i<3;i++){
drawTanke(enemyTankes[i]);
}
} //获取键盘的命令的处理的函数
function getCommand(){
var code=event.keyCode;
cxt.clearRect(0,0,500,500);
switch(code){
case 87://w键
hero.moveUp();
break;
case 68://d键
hero.moveRight();
break;
case 83://s键
hero.moveDown();
break;
case 65://a键
hero.moveLeft();
break;
case 74://j键
hero.shotEnemy();
break;
}
flashMap();//调用上下左右的同时刷新画布
}
//每隔100毫秒刷新画布
window.setInterval("flashMap()",100); </script>
</body>
</html>

tankeGame.js代码:

var tankeColor=new Array("#BA9658","#FEF26E");
var enemyColor=new Array("#00A2B5","#00FEFE");
//坦克的父类
function TanK(x,y,direct,color){
this.x=x;
this.y=y;
this.direct=direct;
this.speed=5;
this.color=color; this.moveUp=function(){
this.y-=this.speed;
this.direct=0;
}
this.moveDown=function(){
this.y+=this.speed;
this.direct=2;
}
this.moveRight=function(){
this.x+=this.speed;
this.direct=1;
}
this.moveLeft=function(){
this.x-=this.speed;
this.direct=3;
}
} //子弹类
function Bullet(x,y,direct,speed){
this.x=x;
this.y=y;
this.direct=direct;
this.speed=speed;
this.timer=null;
this.isLive=true;
this.run=function run(){
if(this.x<=0||this.x>=500||this.y<=0||this.y>=500){
window.clearInterval(this.timer);
this.isLive=false;
}else{
switch(this.direct){
case 0:
this.y-=this.speed;
break;
case 1:
this.x+=this.speed;
break;
case 2:
this.y+=this.speed;
break;
case 3:
this.x-=this.speed;
break;
}
}
document.getElementById("aa").innerHTML="子弹的x="+this.x+"y="+this.y;
}
} //定义一个hero类
//x、y表示初始坐标,direct表示方向
function Hero(x,y,direct,color){
this.tanke=TanK;
this.tanke(x,y,direct,color);
this.shotEnemy=function(){
switch(this.direct){
case 0://上
heroBullet=new Bullet(this.x+9,this.y,this.direct,1);
break;
case 1://右
heroBullet=new Bullet(this.x+36,this.y+9,this.direct,1);
break;
case 2://下
heroBullet=new Bullet(this.x+9,this.y+36,this.direct,1);
break;
case 3://左
heroBullet=new Bullet(this.x-6,this.y+9,this.direct,1);
break;
} var timer=window.setInterval("heroBullet.run()",50);
heroBullet.timer=timer;
}
} //定义一个hero类
//x、y表示初始坐标,direct表示方向
function EnemyTanke(x,y,direct,color){
this.tanke=TanK;
this.tanke(x,y,direct,color);
} //画自己的子弹
function drawHeroBullet(){
if(heroBullet!=null&&heroBullet.isLive){
cxt.fillStyle="#FEF26E";
cxt.fillRect(heroBullet.x,heroBullet.y,2,2);
}
} //把创建坦克的方法封装为一个对象
//该函数可以画自己的坦克,也可以画敌人的坦克
//tanke就是一个对象
function drawTanke(tanke){
//坦克的方向
switch(tanke.direct){
case 0:
case 2:
{//上
//画出自己的坦克设置颜色
cxt.fillStyle=tanke.color[0];
cxt.fillRect(tanke.x,tanke.y,5,30);//左齿轮
cxt.fillRect(tanke.x+15,tanke.y,5,30);//右齿轮
cxt.fillRect(tanke.x+6,tanke.y+5,8,20);//中间的坦克体 //画中间的圆形的炮筒体
cxt.fillStyle=tanke.color[1];
cxt.beginPath();
cxt.arc(tanke.x+10,tanke.y+15,4.5,0,360,false);
cxt.closePath();
cxt.fill(); //画出炮筒
cxt.strokeStyle=tanke.color[1];
//cxt.fillStyle="#FFD972";
cxt.lineWidth=1.9;
cxt.beginPath();
cxt.moveTo(tanke.x+10,tanke.y+15);//设置点的位置
if(tanke.direct==0){
cxt.lineTo(tanke.x+10,tanke.y-6);//设置第二个点的位置
}else if(tanke.direct==2){
cxt.lineTo(tanke.x+10,tanke.y+36);//设置第二个点的位置
}
cxt.closePath();
cxt.stroke();
}
break;
case 1:
case 3:
{//右
//画出自己的坦克设置颜色
cxt.fillStyle=tanke.color[0];
cxt.fillRect(tanke.x,tanke.y,30,5);//左齿轮
cxt.fillRect(tanke.x,tanke.y+15,30,5);//右齿轮
cxt.fillRect(tanke.x+5,tanke.y+6,20,8);//中间的坦克体 //画中间的圆形的炮筒体
cxt.fillStyle=tanke.color[1];
cxt.beginPath();
cxt.arc(tanke.x+15,tanke.y+10,4.5,0,360,false);
cxt.closePath();
cxt.fill(); //画出炮筒
cxt.strokeStyle=tanke.color[1];
//cxt.fillStyle="#FFD972";
cxt.lineWidth=1.9;
cxt.beginPath();
cxt.moveTo(tanke.x+15,tanke.y+10);//设置点的位置
if(tanke.direct==1){//右
cxt.lineTo(tanke.x+36,tanke.y+10);//设置第二个点的位置
}else if(tanke.direct==3){//左
cxt.lineTo(tanke.x-6,tanke.y+10);//设置第二个点的位置
}
cxt.closePath();
cxt.stroke();
}
break;
}
}

end;

HTML5-坦克大战一画出敌人坦克并让自己的坦克可以发子弹的功能(二)的更多相关文章

  1. Java坦克大战(三)

    关于这个坦克大战的项目是在学习Java基础的时候,拿来练习的最近看到这些代码,感觉很亲切,就把他们都复制下来,编辑成博客.回首看去,Java基础的学习确实应该建立在找项目练习上,这样才能将学到的基础知 ...

  2. JAVA课程设计(坦克大战)

    2019-01-16 坦克大战游戏背景: 1. 需求分析 1.1环境要求 操作系统:Windows 7(SP1)以上 JAVA虚拟机:JDK1.8以上 开发环境:Eclipse(4.5以上) 1.2角 ...

  3. 《HTML5经典坦克大战》游戏(代码)

    前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...

  4. HTML5坦克大战(韩顺平版本)

    HTML5坦克大战(韩顺平版本) 2017-3-22 22:46:22 by SemiconductorKING 去年暑假学习了一下HTML5实现简单的坦克大战,觉得对JavaScript初学者来说, ...

  5. HTML5坦克大战1

    在JavaScript中,不要在变量为定义之前去使用,这样很难察觉并且无法运行. 颜色不对. 当我的坦克移动时,敌人坦克消失. tankGame3.html <!DOCTYPE html> ...

  6. HTML5坦克大战

    在JavaScript中,不要在变量为定义之前去使用,这样很难察觉并且无法运行. 颜色不对. 当我的坦克移动时,敌人坦克消失. tankGame3.html <!DOCTYPE html> ...

  7. html5制作坦克大战

    全部html5都采用绘图技术完成.坦克是画出来的.(坦克,子弹,墙,水,草坪) 首先我们画出坦克. 坦克是两边两个矩形,中间一个大矩形,矩形了有一个圆,还有一根线. 画出坦克的思路是以坦克的左上角为参 ...

  8. [置顶] 小强的HTML5移动开发之路(9)——坦克大战游戏3

    上一篇我们创建了敌人的坦克和自己的坦克,接下来就应该让坦克发子弹了,我们下面来看一下如何让我们的坦克发出子弹. 前面我们用面向对象的思想对Tank进行了封装,又利用对象冒充实现了我们的坦克和敌人的坦克 ...

  9. 小强的HTML5移动开发之路(8)——坦克大战游戏2

    来自:http://blog.csdn.net/cai_xingyun/article/details/48629015 在上一篇文章中我们已经画出了自己的坦克,并且可以控制自己的坦克移动,我们继续接 ...

随机推荐

  1. COJ 2192: Wells弹键盘 (dp)

    2192: Wells弹键盘 Description Wells十分羡慕和佩服那些会弹钢琴的人比如子浩君,然而Wells只会弹键盘…… Wells的键盘只有10个键,从1,2,3,……,9,0,如下图 ...

  2. html页面简单制作示例

    内有表格布局,具体见 链接: https://pan.baidu.com/s/1V7IcxQ5M-iXVdlzuf8bo-A 密码: 8dp8

  3. [Elasticsearch] 多字段搜索 (六) - 自定义_all字段,跨域查询及精确值字段

    自定义_all字段 在元数据:_all字段中,我们解释了特殊的_all字段会将其它所有字段中的值作为一个大字符串进行索引.尽管将所有字段的值作为一个字段进行索引并不是非常灵活.如果有一个自定义的_al ...

  4. 【EasyNetQ】- 发布确认

    默认的AMQP发布不是事务性的,并不保证您的消息实际到达代理.AMQP确实指定了事务发布,但是使用RabbitMQ它非常慢,我们还没有通过EasyNetQ API支持它.对于高性能保证交付,建议您使用 ...

  5. 通过NTP(Network Time Protocal)协议进行时间同步

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAwUAAAKOCAYAAAD3ZbXWAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjw

  6. Oracle中SQL语言介绍以及基本用法

    一.SQL语言支持如下类别命令 1.数据定义语言(DDL):CREATE(创建).ALTER(更改) 和 DROP(删除)命令 1.1  CREATE (创建表,表空间,用户, 索引, 视图, 同义词 ...

  7. JAVA实现定时器功能

    在接口开发时,有一种开发模式叫定时器模式,可以理解为每经过一段预设的时间就会执行一次事件,而在我们的工作中,这个事件所实现的功能一般是将两个系统的数据信息进行同步,这样就实现了两个系统通过接口进行对接 ...

  8. [HDU6304][数学] Chiaki Sequence Revisited-杭电多校2018第一场G

    [HDU6304][数学] Chiaki Sequence Revisited -杭电多校2018第一场G 题目描述 现在抛给你一个数列\(A\) \[ a_n=\begin{cases}1 & ...

  9. [洛谷P2711]小行星

    题目大意:有$n$颗行星,每颗行星的位置是$(x,y,z)$.每次可以消除一个面(即$x,y$或$z$坐标相等)的行星,求消除这些行星的最少次数. 题解:最小割,对于每一颗小行星,从 x 面的出点向  ...

  10. 【BZOJ 2822】[AHOI2012]树屋阶梯 卡特兰数+高精

    这道题随便弄几个数就发现是卡特兰数然而为什么是呢? 我们发现我们在增加一列时,如果这一个东西(那一列)他就一格,那么就是上一次的方案数,并没有任何改变,他占满了也是,然后他要是占两格呢,就是把原来的切 ...