照着韩顺平老师模仿的坦克大战案例
2016-01-25 23:04
549 查看
看了韩顺平老师的公开课视频后，跟着他的视频做的，没有完全抄袭的。
TankGame.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body onkeydown="move(event)">
<canvas id="tankMap" width="400px" height="300px" style="background-color:black">
</canvas>
<span id="aa"></span>
<script type="text/javascript" src="tank.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("tankMap");
var cxt = canvas.getContext("2d");
var heroColor = new Array("#DED284","#FFD972");
var enemyColor = new Array("#00A2B5","#00FEFE");
var heroBullets=new Array();
//规定：0代表上，1代表右，2代表下，3代表左。
var hero1 = new hero(40,40,0,heroColor);
var EnemyTanks = new Array();
for(var i=0;i<3;i++)
{
EnemyTanks[i] = new EnemyTank((i+1)*50,0,2,enemyColor);
}
//绘制坦克封装成函数。
//我的坦克hero
//var heroX = 30;
//var heroY = 30;
//参数里面传入的是tank对象
//定时刷新出现的元素
function flashTankMap()
{
cxt.clearRect(0,0,400,300);
for(var i=0;i<3;i++)
{
drawTank(EnemyTanks[i]);
}
drawTank(hero1);
drawBullet();
}
window.setInterval("flashTankMap()",100);
function move(event)
{
switch(event.keyCode)
{
case 87:hero1.moveUp();hero1.direct=0; break;
case 65:hero1.moveLeft();hero1.direct=3; break;
case 83:hero1.moveDown();hero1.direct=2; break;
case 68:hero1.moveRight();hero1.direct=1; break;
case 74:hero1.shotEnemy();break;
}
//flashTankMap();
//在这里重新绘制所有坦克，于是我们直接写一个函数，专门用于定时刷新画布。
/* for(var i=0;i<3;i++)
{
drawTank(EnemyTanks[i]);
} */
}
</script>
</body>
</html>
TankGame.js
/**
*
*/
//定义一个子弹类
function Bullet(x,y,direct,speed)
{
this.x = x;
this.y = y;
this.timer=null;
this.direct = direct;
this.isLive=true;
this.speed=speed;
this.run = function()
{
if(this.x<=0 || this.x>=400 || this.y<=0 || this.y>=300)
{
//子弹消失标记
this.isLive=false;
//子弹不走了
clearInterval(this.timer);
}
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;
}
}
var span = document.getElementById("aa");
span.innerHTML = "x坐标:"+this.x+"y坐标:"+this.y;
}
}
//父类
function Tank(x,y,direct,color)
{
this.x=x;
this.y=y;
this.speed=2;
this.color=color;
this.direct=direct;
this.moveUp=function()
{
this.y-=this.speed;
}
this.moveDown=function()
{
this.y+=this.speed;
}
this.moveRight=function()
{
this.x+=this.speed;
}
this.moveLeft=function()
{
this.x-=this.speed;
}
}
//通过对象冒充来继承
function hero(x,y,direct,color)
{
this.tank = Tank;
this.tank(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+30,this.y+9,this.direct,1);break;
case 2:heroBullet = new Bullet(this.x+9,this.y+30,this.direct,1);break;
case 3:heroBullet = new Bullet(this.x,this.y+9,this.direct,1);break;
}
heroBullets.push(heroBullet);
var timer = window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);
heroBullets[heroBullets.length-1].timer = timer;
}
}
function drawBullet()
{
for(var i=0;i<heroBullets.length;i++)
{
var heroBullet = heroBullets[i];
if(heroBullet!=null && heroBullet.isLive)
{
cxt.fillStyle="#FFD972";
cxt.fillRect(heroBullet.x,heroBullet.y,2,2);
}
}
}
function EnemyTank(x,y,direct,color)
{
this.tank = Tank;
this.tank(x,y,direct,color);
}
function drawTank(tank)
{
//设置颜色
switch(tank.direct)
{
case 0:
case 2:
cxt.fillStyle=tank.color[0];
//位置先定死，然后以后再改进
//左边矩形
cxt.fillRect(tank.x,tank.y,5,30);
//右边矩形
cxt.fillRect(tank.x+5+10,tank.y,5,30);
//中间矩形
cxt.fillRect(tank.x+6,tank.y+5,8,20);
//盖子
cxt.fillStyle=tank.color[1];
cxt.arc(tank.x+10,tank.y+15,4,0,Math.PI*2,true);
cxt.fill();
//炮筒
cxt.strokeStyle=tank.color[1];
cxt.lineWidth=2.0;
cxt.beginPath();
cxt.moveTo(tank.x+10,tank.y+15);
if(tank.direct==0)
{
cxt.lineTo(tank.x+10,tank.y);
}
else if(tank.direct==2)
{
cxt.lineTo(tank.x+10,tank.y+30);
}
cxt.closePath();
cxt.stroke();
break;
case 1:
case 3:
cxt.fillStyle=tank.color[0];
//上面矩形
cxt.fillRect(tank.x,tank.y,30,5);
//下面矩形
cxt.fillRect(tank.x,tank.y+5+10,30,5);
//中间矩形
cxt.fillRect(tank.x+5,tank.y+6,20,8);
//盖子
cxt.fillStyle=tank.color[1];
cxt.arc(tank.x+15,tank.y+10,4,0,Math.PI*2,true);
cxt.fill();
//炮筒
cxt.strokeStyle=tank.color[1];
cxt.lineWidth=2.0;
cxt.beginPath();
cxt.moveTo(tank.x+15,tank.y+10);
if(tank.direct==1)
{
cxt.lineTo(tank.x+30,tank.y+10);
}
else if(tank.direct==3)
{
cxt.lineTo(tank.x,tank.y+10);
}
cxt.closePath();
cxt.stroke();
break;
}
}
TankGame.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body onkeydown="move(event)">
<canvas id="tankMap" width="400px" height="300px" style="background-color:black">
</canvas>
<span id="aa"></span>
<script type="text/javascript" src="tank.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("tankMap");
var cxt = canvas.getContext("2d");
var heroColor = new Array("#DED284","#FFD972");
var enemyColor = new Array("#00A2B5","#00FEFE");
var heroBullets=new Array();
//规定：0代表上，1代表右，2代表下，3代表左。
var hero1 = new hero(40,40,0,heroColor);
var EnemyTanks = new Array();
for(var i=0;i<3;i++)
{
EnemyTanks[i] = new EnemyTank((i+1)*50,0,2,enemyColor);
}
//绘制坦克封装成函数。
//我的坦克hero
//var heroX = 30;
//var heroY = 30;
//参数里面传入的是tank对象
//定时刷新出现的元素
function flashTankMap()
{
cxt.clearRect(0,0,400,300);
for(var i=0;i<3;i++)
{
drawTank(EnemyTanks[i]);
}
drawTank(hero1);
drawBullet();
}
window.setInterval("flashTankMap()",100);
function move(event)
{
switch(event.keyCode)
{
case 87:hero1.moveUp();hero1.direct=0; break;
case 65:hero1.moveLeft();hero1.direct=3; break;
case 83:hero1.moveDown();hero1.direct=2; break;
case 68:hero1.moveRight();hero1.direct=1; break;
case 74:hero1.shotEnemy();break;
}
//flashTankMap();
//在这里重新绘制所有坦克，于是我们直接写一个函数，专门用于定时刷新画布。
/* for(var i=0;i<3;i++)
{
drawTank(EnemyTanks[i]);
} */
}
</script>
</body>
</html>
TankGame.js
/**
*
*/
//定义一个子弹类
function Bullet(x,y,direct,speed)
{
this.x = x;
this.y = y;
this.timer=null;
this.direct = direct;
this.isLive=true;
this.speed=speed;
this.run = function()
{
if(this.x<=0 || this.x>=400 || this.y<=0 || this.y>=300)
{
//子弹消失标记
this.isLive=false;
//子弹不走了
clearInterval(this.timer);
}
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;
}
}
var span = document.getElementById("aa");
span.innerHTML = "x坐标:"+this.x+"y坐标:"+this.y;
}
}
//父类
function Tank(x,y,direct,color)
{
this.x=x;
this.y=y;
this.speed=2;
this.color=color;
this.direct=direct;
this.moveUp=function()
{
this.y-=this.speed;
}
this.moveDown=function()
{
this.y+=this.speed;
}
this.moveRight=function()
{
this.x+=this.speed;
}
this.moveLeft=function()
{
this.x-=this.speed;
}
}
//通过对象冒充来继承
function hero(x,y,direct,color)
{
this.tank = Tank;
this.tank(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+30,this.y+9,this.direct,1);break;
case 2:heroBullet = new Bullet(this.x+9,this.y+30,this.direct,1);break;
case 3:heroBullet = new Bullet(this.x,this.y+9,this.direct,1);break;
}
heroBullets.push(heroBullet);
var timer = window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);
heroBullets[heroBullets.length-1].timer = timer;
}
}
function drawBullet()
{
for(var i=0;i<heroBullets.length;i++)
{
var heroBullet = heroBullets[i];
if(heroBullet!=null && heroBullet.isLive)
{
cxt.fillStyle="#FFD972";
cxt.fillRect(heroBullet.x,heroBullet.y,2,2);
}
}
}
function EnemyTank(x,y,direct,color)
{
this.tank = Tank;
this.tank(x,y,direct,color);
}
function drawTank(tank)
{
//设置颜色
switch(tank.direct)
{
case 0:
case 2:
cxt.fillStyle=tank.color[0];
//位置先定死，然后以后再改进
//左边矩形
cxt.fillRect(tank.x,tank.y,5,30);
//右边矩形
cxt.fillRect(tank.x+5+10,tank.y,5,30);
//中间矩形
cxt.fillRect(tank.x+6,tank.y+5,8,20);
//盖子
cxt.fillStyle=tank.color[1];
cxt.arc(tank.x+10,tank.y+15,4,0,Math.PI*2,true);
cxt.fill();
//炮筒
cxt.strokeStyle=tank.color[1];
cxt.lineWidth=2.0;
cxt.beginPath();
cxt.moveTo(tank.x+10,tank.y+15);
if(tank.direct==0)
{
cxt.lineTo(tank.x+10,tank.y);
}
else if(tank.direct==2)
{
cxt.lineTo(tank.x+10,tank.y+30);
}
cxt.closePath();
cxt.stroke();
break;
case 1:
case 3:
cxt.fillStyle=tank.color[0];
//上面矩形
cxt.fillRect(tank.x,tank.y,30,5);
//下面矩形
cxt.fillRect(tank.x,tank.y+5+10,30,5);
//中间矩形
cxt.fillRect(tank.x+5,tank.y+6,20,8);
//盖子
cxt.fillStyle=tank.color[1];
cxt.arc(tank.x+15,tank.y+10,4,0,Math.PI*2,true);
cxt.fill();
//炮筒
cxt.strokeStyle=tank.color[1];
cxt.lineWidth=2.0;
cxt.beginPath();
cxt.moveTo(tank.x+15,tank.y+10);
if(tank.direct==1)
{
cxt.lineTo(tank.x+30,tank.y+10);
}
else if(tank.direct==3)
{
cxt.lineTo(tank.x,tank.y+10);
}
cxt.closePath();
cxt.stroke();
break;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 原生js结合html5制作小飞龙的简易跳球
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- HTML5实现微信拍摄上传照片功能
- jQuery+HTML5加入购物车代码分享
- jQuery mobile 移动web(6)
- 基于Jquery和html5的7款个性化地图插件
- 实现音乐播放器的代码（html5+css3+jquery）
- 2014 HTML5/CSS3热门动画特效TOP10
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
- HTML5使用DeviceOrientation实现摇一摇功能
- jquery mobile 移动web(5)
- 使用HTML5中postMessage知识点解决Ajax中POST跨域问题
- MVC中基于Ajax和HTML5实现文件上传功能