1.在JavaScript通过对象冒充来实现集成。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象冒充练习</title>
</head>
<body>
<script type="text/javascript">
function Animal(name,age){
this.name=name;
this.age=age;
this.hair=function haircolor(){
alert("white");
}
}
function Dog(name,age){
//把Animal构造函数赋给this.dg
this.dg=Animal;
//调用
this.dg(name,age);
}
var dog=new Dog("拉布拉多",1);
alert(dog.name);
dog.hair(); //调用Animal中的方法
</script>
</body>
</html> 2.画出敌人的坦克，通过代码整合
实现敌人的坦克颜色跟用户的不一样；用户移动位置敌人的坦克不会消失等功能。
示例代码：（TankBattle.js）
//用数组的方式定义坦克上面两种不同的颜色
var myColor=new Array("#DED284","#FFFA7E");
var enemyColor=new Array("#00A2B5","#00FEFE");
//x表示坦克的横坐标，y表示坦克的纵坐标，dirc表示移动方向
function Tank(x,y,direc,color){
this.x=x;
this.y=y;
this.speed=1;
this.direc=direc;
this.color=color;
//向上移动
this.moveUp=function(){
this.y-=this.speed;
this.direc=0
}
//向右移动
this.moveRight=function(){
this.x+=this.speed;
this.direc=1;
}
//向下移动
this.moveDown=function(){
this.y+=this.speed;
this.direc=2;
}
//向左移动
this.moveLeft=function(){
this.x-=this.speed;
this.direc=3;
}
}
function MyTank(x,y,direc,color){
//下面两句话实现对象冒充效果
this.tank=Tank;
this.tank(x,y,direc,color);
}
//敌人的坦克也是通过对象冒充继承Tank类
function EnemyTank(x,y,direc,color){
this.tank=Tank;
this.tank(x,y,direc,color);
}
// 画坦克
function drawTank(tank){
//考虑方向
switch (tank.direc){
case 0:
case 2:
ctx.fillStyle=tank.color[0]; //给定矩形的颜色
ctx.fillRect(tank.x,tank.y,5,30); //画出左边的矩形
ctx.fillRect(tank.x+15,tank.y,5,30); //画出右侧的矩形
//画出中间的矩形（中间的矩形宽高为10*20，为了让中间的矩形和两侧的矩形之间有空隙，将左右两边都空出一个像素，所以x轴的位置
// 向右移动了一个像素，左边就空出1px,宽度减少了2px,这样右边就又空出了1px）
ctx.fillRect(tank.x+6,tank.y+5,8,20);
ctx.fillStyle=tank.color[1]; //圆的填充颜色
ctx.arc(tank.x+10,tank.y+15,4,0,360); //画出坦克的盖（30+10=30+5+1+8/2）（30+15=30+5+20/2）
ctx.fill(); //填充圆
// 画出炮筒的线条
ctx.beginPath();
ctx.moveTo(tank.x+10,tank.y+15); //线条的起始位置为圆心的位置
if(tank.direc==0){
ctx.lineTo(tank.x+10,tank.y); //线条的结束位置
}else if(tank.direc==2){
ctx.lineTo(tank.x+10,tank.y+30);
}
ctx.strokeStyle=tank.color[1];
ctx.lineWidth=2; //设置线条的宽度（粗细）
ctx.closePath();
ctx.stroke();
break;
case 1: //右
case 3: //左
// 画出自己的坦克
ctx.fillStyle=tank.color[0]; //给定矩形的颜色
ctx.fillRect(tank.x,tank.y,30,5); //画出左边的矩形
ctx.fillRect(tank.x,tank.y+15,30,5); //画出右侧的矩形
//画出中间的矩形（中间的矩形宽高为10*20，为了让中间的矩形和两侧的矩形之间有空隙，将左右两边都空出一个像素，所以x轴的位置
// 向右移动了一个像素，左边就空出1px,宽度减少了2px,这样右边就又空出了1px）
ctx.fillRect(tank.x+5,tank.y+6,20,8);
ctx.fillStyle=tank.color[1]; //圆的填充颜色
ctx.arc(tank.x+15,tank.y+10,4,0,360); //画出坦克的盖（30+10=30+5+1+8/2）（30+15=30+5+20/2）
ctx.fill(); //填充圆
// 画出炮筒的线条
ctx.beginPath();
ctx.moveTo(tank.x+15,tank.y+10);
//向右
if(tank.direc==1){
ctx.lineTo(tank.x+30,tank.y+10);
}else if(tank.direc==3){ //向左
ctx.lineTo(tank.x,tank.y+10);
}
ctx.strokeStyle=tank.color[1];
ctx.lineWidth=2; //设置线条的宽度（粗细）
ctx.closePath();
ctx.stroke();
break;
}
} HTML5代码（TankBattle.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>坦克大战游戏</title>
</head>
<body οnkeydοwn="getCommand();">
<h1>坦克大战练习 </h1>
<canvas id="tankBg" width="400px" height="400px" style="background-color: black;"></canvas>
<!--把js文件引入-->
<script type="text/javascript" src="js/TankBattle.js"></script>
<script type="text/javascript">
var canvas=document.getElementById("tankBg"); //得到画布
var ctx=canvas.getContext("2d"); //得到上下文，相当于画笔
//定义用户自己的坦克
var myTank=new MyTank(130,130,0,myColor); //用0,1,2,3,4分别表示上、右、下、左,此处的0位向上
//定义敌人的坦克，考虑到敌人可能有很多，考虑用数组定义
var enemyTanks=new Array();
//先按照3个敌人来处理，之后再替换成变量
for(var i=0;i<3;i++){
//创建一个敌人的坦克
var enemyTank=new EnemyTank((i+1)*50,0,2,enemyColor); //0表示纵坐标，2表示炮筒方向朝下
//把这个坦克放入数组
enemyTanks[i]=enemyTank;
}
//游戏一加载，我们就做一次刷新并画出内容的操作
refreshTankCanvas();
//刷新作战区域(里面包括画自己的坦克、敌人的坦克、子弹、炸弹、障碍物等一系列相关的内容)
function refreshTankCanvas(){
//注意是ctx,而不是cxt，千万别写错了
ctx.clearRect(0,0,400,400); //清空画布,这一步是不能少的
drawTank(myTank); //画布清空后重新绘制坦克的位置
for(var i=0;i<3;i++){
drawTank(enemyTanks[i]); //调用drawTank画坦克的方法，画出enemyTanks[i]这个数组里的坦克
}
}
//接受用户的键盘输入
function getCommand(){
var code=event.keyCode; //通过event.KeyCode来判断键盘的ASCII值
switch (code){
case 87: //W键
myTank.moveUp();
break;
case 68: //D键
myTank.moveRight();
break;
case 83: //S键
myTank.moveDown();
break;
case 65: //A键
myTank.moveLeft();
break;
}
refreshTankCanvas(); //获取到键盘的命令之后，再刷新一次战场
}
</script>
</body>
</html> 运行效果：
3.对象是引用传递，非面向对象的是值传递
4. 1）在上面版本的基础上实现发子弹
2）子弹不会飞出画布
3）子弹到达画布之后就不再再边缘处画子弹了
示例代码： (TankBattle.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>坦克大战游戏</title>
</head>
<body οnkeydοwn="getCommand();">
<h1>坦克大战练习 </h1>
<canvas id="tankBg" width="400px" height="400px" style="background-color: black;"></canvas>
<!--把js文件引入-->
<script type="text/javascript" src="js/TankBattle.js"></script>
<script type="text/javascript">
var canvas=document.getElementById("tankBg"); //得到画布
var ctx=canvas.getContext("2d"); //得到上下文，相当于画笔
//定义用户自己的坦克
var myTank=new MyTank(130,130,0,myColor); //用0,1,2,3,4分别表示上、右、下、左,此处的0位向上
var myBullet=null; //先定义一颗空子弹
//定义敌人的坦克，考虑到敌人可能有很多，考虑用数组定义
var enemyTanks=new Array();
//先按照3个敌人来处理，之后再替换成变量
for(var i=0;i<3;i++){
//创建一个敌人的坦克
var enemyTank=new EnemyTank((i+1)*50,0,2,enemyColor); //0表示纵坐标，2表示炮筒方向朝下
//把这个坦克放入数组
enemyTanks[i]=enemyTank;
}
//游戏一加载，我们就做一次刷新并画出内容的操作
refreshTankCanvas();
//刷新作战区域(里面包括画自己的坦克、敌人的坦克、子弹、炸弹、障碍物等一系列相关的内容)
function refreshTankCanvas(){
//注意是ctx,而不是cxt，千万别写错了
ctx.clearRect(0,0,400,400); //清空画布,这一步是不能少的
drawTank(myTank); //画布清空后重新绘制坦克的位置
drawMyBullet(); //画出用户自己的子弹
//画出所有敌人的子弹
for(var i=0;i<3;i++){
drawTank(enemyTanks[i]); //调用drawTank画坦克的方法，画出enemyTanks[i]这个数组里的坦克
}
}
//接受用户的键盘输入，通过键盘上的W、D、S、A键来控制坦克的上右下左的移动，J键控制发子弹
function getCommand(){
var code=event.keyCode; //通过event.KeyCode来判断键盘的ASCII值
switch (code){
case 87: //W键
myTank.moveUp();
break;
case 68: //D键
myTank.moveRight();
break;
case 83: //S键
myTank.moveDown();
break;
case 65: //A键
myTank.moveLeft();
break;
case 74: //J键
myTank.shotEnemy();
break;
}
refreshTankCanvas(); //获取到键盘的命令之后，再刷新一次战场
// setInterval()方法的作用就是每间隔一段时间，调用某段代码
//此处的100ms是根据老师多次测试的结果直接拿来使用的，不是随便写上去的
window.setInterval("refreshTankCanvas()",100); //每隔100ms,调用一次refreshTankCanvas方法
}
</script>
</body>
</html> TankBattle.js
//用数组的方式定义坦克上面两种不同的颜色
var myColor=new Array("#DED284","#FFFA7E");
var enemyColor=new Array("#00A2B5","#00FEFE");
//定义子弹类
function Bullet(x,y,direc,speed){
this.x=x;
this.y=y;
this.direc=direc;
this.speed=speed;
this.timer=null;
this.isLive=true; //子弹刚刚创建的时候，它是活的
//定义一个让子弹飞的方法
this.bulletFly= function(){
//这行代码的意思是：如果子弹飞出画布canvas的边界了，我们就要clear timer 了
if(this.x<=0||this.x>=400||this.y<=0||this.y>=400){
window.clearInterval(this.timer); //子弹停止
this.isLive=false;
}else {
switch (this.direc){
case 0: //子弹方向朝上的时候
this.y-=this.speed; //子弹不断朝上，y坐标不断--
break;
case 1:
this.x+=this.speed;
break;
case 2:
this.y+=this.speed;
break;
case 3:
this.x-=this.speed;
break;
}
}
}
}
//x表示坦克的横坐标，y表示坦克的纵坐标，dirc表示移动方向
function Tank(x,y,direc,color){
this.x=x;
this.y=y;
this.speed=1;
this.direc=direc;
this.color=color;
//向上移动
this.moveUp=function(){
this.y-=this.speed;
this.direc=0
}
//向右移动
this.moveRight=function(){
this.x+=this.speed;
this.direc=1;
}
//向下移动
this.moveDown=function(){
this.y+=this.speed;
this.direc=2;
}
//向左移动
this.moveLeft=function(){
this.x-=this.speed;
this.direc=3;
}
}
function MyTank(x,y,direc,color){
//下面两句话实现对象冒充效果
this.tank=Tank;
this.tank(x,y,direc,color);
//添加一个射击敌人的方法(射击这个行为是坦克的行为，所以放在这个函数里面)
this.shotEnemy=function(){
//这里用坦克的方向来switch，因为this下hi先弄个当前的坦克，而子弹的方向是跟坦克的方向保持一致的
switch (this.direc){
case 0:
//创建一颗子弹
myBullet=new Bullet(this.x+9,this.y,this.direc,1); //此处的1代表的是Bullet类中的speed参数
break;
case 1: //向右
myBullet=new Bullet(this.x+30,this.y+9,this.direc,1); //在方向direc处不要漏写了this
break;
case 2:
//之所以+9，是因为子弹给了2px的大小，如果+10,子弹就会相对于炮筒稍稍有点跑偏了
myBullet=new Bullet(this.x+9,this.y+30,this.direc,1);
break;
case 3: //向左
myBullet=new Bullet(this.x,this.y+9,this.direc,1);
break;
}
//每隔50ms，调用myBullet对象的bulletFly()方法
var timer= window.setInterval("myBullet.bulletFly()",50); //此处的50ms是根据老师多次试验得来的结果直接拿来用的
myBullet.timer=timer;
}
}
//敌人的坦克也是通过对象冒充继承Tank类
function EnemyTank(x,y,direc,color){
this.tank=Tank;
this.tank(x,y,direc,color);
}
//画出当前用户的子弹
function drawMyBullet(){
//如果这个子弹的timer还没有被清空，也就是这个子弹isLive=ture(默认就为true)是活的，就执行画自带的操作
if(myBullet!=null&&myBullet.isLive){ //如果子弹不为空，也就是Bullet这个类创建了，就画出子弹
ctx.fillStyle="#FFFA7E";
ctx.fillRect(myBullet.x,myBullet.y,2,2);
}
}
// 画坦克
function drawTank(tank){
//考虑方向
switch (tank.direc){
case 0:
case 2:
ctx.fillStyle=tank.color[0]; //给定矩形的颜色
ctx.fillRect(tank.x,tank.y,5,30); //画出左边的矩形
ctx.fillRect(tank.x+15,tank.y,5,30); //画出右侧的矩形
//画出中间的矩形（中间的矩形宽高为10*20，为了让中间的矩形和两侧的矩形之间有空隙，将左右两边都空出一个像素，所以x轴的位置
// 向右移动了一个像素，左边就空出1px,宽度减少了2px,这样右边就又空出了1px）
ctx.fillRect(tank.x+6,tank.y+5,8,20);
ctx.fillStyle=tank.color[1]; //圆的填充颜色
ctx.arc(tank.x+10,tank.y+15,4,0,360); //画出坦克的盖（30+10=30+5+1+8/2）（30+15=30+5+20/2）
ctx.fill(); //填充圆
// 画出炮筒的线条
ctx.beginPath();
ctx.moveTo(tank.x+10,tank.y+15); //线条的起始位置为圆心的位置
if(tank.direc==0){
ctx.lineTo(tank.x+10,tank.y); //线条的结束位置
}else if(tank.direc==2){
ctx.lineTo(tank.x+10,tank.y+30);
}
ctx.strokeStyle=tank.color[1];
ctx.lineWidth=2; //设置线条的宽度（粗细）
ctx.closePath();
ctx.stroke();
break;
case 1: //右
case 3: //左
// 画出自己的坦克
ctx.fillStyle=tank.color[0]; //给定矩形的颜色
ctx.fillRect(tank.x,tank.y,30,5); //画出左边的矩形
ctx.fillRect(tank.x,tank.y+15,30,5); //画出右侧的矩形
//画出中间的矩形（中间的矩形宽高为10*20，为了让中间的矩形和两侧的矩形之间有空隙，将左右两边都空出一个像素，所以x轴的位置
// 向右移动了一个像素，左边就空出1px,宽度减少了2px,这样右边就又空出了1px）
ctx.fillRect(tank.x+5,tank.y+6,20,8);
ctx.fillStyle=tank.color[1]; //圆的填充颜色
ctx.arc(tank.x+15,tank.y+10,4,0,360); //画出坦克的盖（30+10=30+5+1+8/2）（30+15=30+5+20/2）
ctx.fill(); //填充圆
// 画出炮筒的线条
ctx.beginPath();
ctx.moveTo(tank.x+15,tank.y+10);
//向右
if(tank.direc==1){
ctx.lineTo(tank.x+30,tank.y+10);
}else if(tank.direc==3){ //向左
ctx.lineTo(tank.x,tank.y+10);
}
ctx.strokeStyle=tank.color[1];
ctx.lineWidth=2; //设置线条的宽度（粗细）
ctx.closePath();
ctx.stroke();
break;
}
} 运行效果：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
