html页面源码
<!DOCTYPE html>
<html>
<head>
<title>坦克大战</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/tankJS.js"></script>
</head>
<body οnkeydοwn="move()">
<!--...map...-->
<h1>HTML经典游戏-坦克</h1>
<canvas id="map" width="700px" height="500px" style="background-color: black"></canvas>
<span id="data"></span>
</body>
<script type="text/javascript">
var canvas = document.getElementById("map");
var context = canvas.getContext("2d");
var ico_Color = new Array("#BA9658","#FEF26E");
var enemy_Color = new Array("#00A2B5","#FEF26E");
//创建一个子弹数组
var bullets = new Array();
//创建一个tank对象
var ico = new ico(50,250,0,10,ico_Color);
//创建敌人坦克
var enemyTanks = new Array();
for(var i=0;i<3;i++){
var enemyTank = new EnemyTank((i+1)*50,10,2,5,enemy_Color);
enemyTanks[i] = enemyTank;
}
//刷新map
function flashMap(){
//清屏
context.clearRect(0,0,700,500);
//绘制用户的坦克
drawTank(ico);
//绘制子弹
drawBullet(bullets);
//绘制敌人的坦克
for(var i=0;i<3;i++){
drawTank(enemyTanks[i]);
}
}
//首次调用
flashMap();
function move(){
var code = event.keyCode;
switch(code){
case 87:
ico.moveUp();
break;
case 68:
ico.moveRight();
break;
case 83:
ico.moveDown();
break;
case 65:
ico.moveLeft();
break;
case 74:
ico.short();
break;
}
flashMap();
}
window.setInterval("flashMap()",100);
</script>
</html>
js页面
/**
* Created with IntelliJ IDEA.
* User: Administrator
* Date: 13-7-16
* Time: 下午3:40
* To change this template use File | Settings | File Templates.
*/
//创建一个tank类
function Tank(x,y,direct,speed,color){
this.x=x;
this.y=y;
this.color = color;
this.speed = speed; //速度
this.direct = direct;
this.moveUp = function(){
this.direct=0;
this.y-=this.speed;
}
this.moveRight = function(){
this.direct=1;
this.x+=this.speed;
}
this.moveDown = function(){
this.direct=2;
this.y+=this.speed;
}
this.moveLeft = function(){
this.direct=3;
this.x-=this.speed;
}
}
//定义一个子弹的类
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 (){
if(this.x<=0||this.y<=0||this.x>700||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;
}
}
var data = document.getElementById("data");
}
}
//定义玩家坦克
function ico(x,y,direct,speed,color){
//通过对象冒充达到继承
this.tank_Tank = Tank;
this.tank_Tank(x,y,direct,speed,color);
this.short = function (){
var bullet = new Bullet(this.x,this.y,this.direct,10);
bullets.push(bullet);
bullets[bullets.length-1].timer = window.setInterval("bullets["+(bullets.length-1)+"].run()",50);
}
}
//定义一个敌人坦克
function EnemyTank(x,y,direct,speed,color){
this.enemy_Tank = Tank;
this.enemy_Tank(x,y,direct,speed,color);
}
//绘制子弹的函数
function drawBullet(bullets){
for(var i=0;i<bullets.length;i++){
var bullet = bullets[i];
data.innerText="n"+bullets.length;
if(bullet!=null&&bullet.isLive){
context.fillStyle="#FEF26E";
switch(bullet.direct){
case 0:
context.fillRect(bullet.x-1,bullet.y-15,2,2);
break;
case 1:
context.fillRect(bullet.x+15,bullet.y-1,2,2);
break;
case 2:
context.fillRect(bullet.x-1,bullet.y+15,2,2);
break;
case 3:
context.fillRect(bullet.x-15,bullet.y-1,2,2);
break;
}
}
}
}
//tank绘制函数
function drawTank(tank){
switch(tank.direct){
case 0:
case 2:
// DED284
context.fillStyle=tank.color[0];
//画坦克左边轮子
context.fillRect(tank.x-10,tank.y-15,5,30);
//画坦克右边轮子
context.fillRect(tank.x+5,tank.y-15,5,30);
//画坦克中间的躯体
context.fillRect(tank.x-4,tank.y-10,8,20);
//设置context的颜色
context.fillStyle=tank.color[1];
//画坦克中间的圆盖子
context.beginPath();
context.arc(tank.x,tank.y,4,0,360,true);
context.closePath();
context.fill();
//画坦克中间的大炮
context.beginPath();
context.strokeStyle=tank.color[1];
context.lineWidth=2;
context.moveTo(tank.x,tank.y);
if(tank.direct == 0){
context.lineTo(tank.x,tank.y-15);
} else if(tank.direct == 2){
context.lineTo(tank.x,tank.y+15);
}
context.closePath();
context.stroke();
break;
case 1:
case 3:
// DED284
context.fillStyle=tank.color[0];
//画坦克左边轮子
context.fillRect(tank.x-15,tank.y-10,30,5);
//画坦克右边轮子
context.fillRect(tank.x-15,tank.y+5,30,5);
//画坦克中间的躯体
context.fillRect(tank.x-10,tank.y-4,20,8);
//设置context的颜色
context.fillStyle=tank.color[1];
//画坦克中间的圆盖子
context.beginPath();
context.arc(tank.x,tank.y,4,0,360,true);
context.closePath();
context.fill();
//画坦克中间的大炮
context.beginPath();
context.strokeStyle=tank.color[1];
context.lineWidth=2;
context.moveTo(tank.x,tank.y);
if(tank.direct == 1){
context.lineTo(tank.x+15,tank.y);
} else if(tank.direct == 3){
context.lineTo(tank.x-15,tank.y);
}
context.closePath();
context.stroke();
break;
}
}