javascript实现坦克大战

Question

用javascript写了个坦克大战，还比较简单粗糙，等完善了下次在发
一、效果图二、代码<script type="text/javascript" src="jquery-1.7.1.js"></script>
<style type="text/css">
#map{width:700px; height:600px; border:0px solid #CCC; overflow:hidden;}
.maps{width:10px; height:10px; float:left; overflow:hidden;border:1px solid red;}
.enemy{background:black;}
.tank{background:blue;}
.bullet{background:purple;}
</style>
<script type="text/javascript"> // tank运行定时器
var tankInt;

// tank运行状态
var tankIsRunning = false; // 定义方格
function Box(x,y){
this.x = x;
this.y = y;
}

// 初始化地图
function initMap(){
for(var i=1;i<=50;i++){
for(var j=1;j<=50;j++){
$("<div id=map_"+i+"_"+j+" class='maps'></div>").appendTo($('#map'));
if(j==50){
$('<div style="clear:both;"></div>').appendTo($('#map'));
}
}
}
}

// 定义tank
var tank = [
[new Box(1,1),new Box(2,1),new Box(2,2),new Box(3,2),new Box(1,3),new Box(2,3)],
[new Box(1,1),new Box(1,2),new Box(2,2),new Box(2,3),new Box(3,1),new Box(3,2)],
[new Box(1,2),new Box(2,1),new Box(2,2),new Box(2,3),new Box(3,1),new Box(3,3)],
[new Box(1,2),new Box(1,3),new Box(2,1),new Box(2,2),new Box(3,2),new Box(3,3)]
];

// 坦克头位置
var tankHead = [new Box(3,2),new Box(2,3),new Box(1,2),new Box(2,1)];

// tank运行方向
var tankDirection = 3;

// 横向位移
var xMove = 20;

// 纵向位移
var yMove = 20;

// 当前坦克位置
var nowTank;

// 当前坦克头位置
var nowTankHead;

// 子弹容器
var bullets = [];

// 绘制tank
function drawTank(){
for(var i=0;i<tank[tankDirection].length;i++){
var point = tank[tankDirection][i];
var x = point.x+xMove;
var y = point.y+yMove;
$("#map_"+x+"_"+y).addClass('tank');
}
nowTank = tank[tankDirection];
nowTankHead = tankHead[tankDirection];
}

// 清除tank
function cleanTank(){
for(var i=0;i<nowTank.length;i++){
var point = nowTank[i];
var x = point.x+xMove;
var y = point.y+yMove;
$("#map_"+x+"_"+y).removeClass('tank');
}
}

// 绘制子弹
function drawBullet(bullet){
$("#map_"+bullet.x+"_"+bullet.y).addClass('bullet');
}

// 清除子弹
function cleanBullet(bullet){
$("#map_"+bullet.x+"_"+bullet.y).removeClass('bullet');
}

// tank前进
function tankForward(){
cleanTank();
switch (tankDirection){
case 0:
if(nowTankHead.x + xMove < 50){
xMove ++ ;
}
break;
case 1:
if(nowTankHead.y + yMove  < 50){
yMove ++ ;
}
break;
case 2:
if(1 < nowTankHead.x + xMove){
xMove -- ;
}
break;
case 3:
if(1 < nowTankHead.y + yMove){
yMove -- ;
}
break;
}
drawTank();
}

// tank发射子弹 将新发射的子弹放入bullets数组中
function shoot(){
var bulletBox = new Box(nowTankHead.x + xMove, nowTankHead.y + yMove);
switch (tankDirection){
case 0:
bulletBox.x += 1 ;
break;
case 1:
bulletBox.y += 1 ;
break;
case 2:
bulletBox.x -= 1 ;
break;
case 3:
bulletBox.y -= 1 ;
break;
}
var bulletDirection = tankDirection
var bullet = {
bulletBox : bulletBox,
bulletDirection : bulletDirection
}
bullets.push(bullet);
}

// 子弹前进，统一管理子弹运行
function bulletsForward(){
for(var i=0;i<bullets.length;i++){
bullet = bullets[i];
var bulletDirection = bullet.bulletDirection;
var bulletBox = bullet.bulletBox;
cleanBullet(bulletBox);
switch (bulletDirection){
case 0:
bulletBox.x += 1 ;
break;
case 1:
bulletBox.y += 1 ;
break;
case 2:
bulletBox.x -= 1 ;
break;
case 3:
bulletBox.y -= 1 ;
break;
}
drawBullet(bulletBox);
for(var j=0;j<nowEnemy.length;j++){
if(bulletBox.x == nowEnemy[j].x && bulletBox.y == (nowEnemy[j].y + yMoveEnemy)){
cleanEnemy();
nowEnemy = [];
break;
}
}
}
}

// 定义enemy
var enemy = [
[new Box(1,1),new Box(1,2),new Box(2,2),new Box(2,3),new Box(3,1),new Box(3,2)],
[new Box(1,2),new Box(1,3),new Box(2,1),new Box(2,2),new Box(3,2),new Box(3,3)]
];

// 定义enemy头
var enemyHead = [new Box(2,3),new Box(2,1)];

// enemy运行方向
var enemyDirection = 0;

// enemy y轴位移
var yMoveEnemy = 0;

// enemy当前位置
var nowEnemy = enemy[enemyDirection];
 
 // enemy头当前位置
var nowEnemyHead = enemyHead[enemyDirection];

// 绘制enemy
function drawEnemy(){
for(var i=0;i<nowEnemy.length;i++){
var point = nowEnemy[i];
$("#map_"+point.x+"_"+(point.y + yMoveEnemy)).addClass('enemy');
}
}

// 清除enemy
function cleanEnemy(){
for(var i=0;i<nowEnemy.length;i++){
var point = nowEnemy[i];
$("#map_"+point.x+"_"+(point.y + yMoveEnemy)).removeClass('enemy');
}
}

// enemy前进
function enemyForward(){
cleanEnemy();
if(enemyDirection == 0){
if(nowEnemyHead.y + yMoveEnemy < 50){
yMoveEnemy ++ ;
}else{
enemyDirection = 1;
nowEnemy = enemy[enemyDirection];
nowEnemyHead = enemyHead[enemyDirection];
}
}else{
if(nowEnemyHead.y + yMoveEnemy > 0){
yMoveEnemy -- ;
}else{
enemyDirection = 0;
nowEnemy = enemy[enemyDirection];
nowEnemyHead = enemyHead[enemyDirection];
}
}

drawEnemy();
}

$(function(){
// 初始化地图
initMap();

// 初始化tank
drawTank();

// 启动子弹定时器
setInterval(function(){
bulletsForward();
},50);

// 绘制enemy
drawEnemy();

// 启动enemy定时器
setInterval(function(){
enemyForward();
},300);

// 监听按下键盘 37左键 38上建 39右键 下键40 32空格键 发射子弹
$(document).keydown(function(e){    
var forwardFlag = false;
switch(e.which){      
case 37: 
if(tankDirection != 3){
tankDirection = 3;
}
forwardFlag = true;
break;       
case 38: 
if(tankDirection!=2){
tankDirection = 2;
}
forwardFlag = true;
break;      
case 39: 
if(tankDirection!=1){
tankDirection = 1;
}
forwardFlag = true;
break;     
case 40: 
if(tankDirection != 0){
tankDirection = 0;
}
forwardFlag = true;
break;  
case 32:
shoot();
break;
}   
if(forwardFlag){
if(!tankIsRunning){
gameInt = setInterval(function(){
tankForward();
},100);
tankIsRunning = true;
}
}

}); // 监控弹起键盘  tank停止运行
$(document).keyup(function(e){
switch(e.which){ 
case 40:
case 39:
case 38:
case 37:
clearInterval(gameInt);
tankIsRunning = false;
break;
}
});
});
</script>
<div id="map"></div>
附：
   js版本的贪吃蛇：http://1.tianma630.duapp.com/articles/2013/06/28/1372403897772.html
   js版本的俄罗斯方块：http://1.tianma630.duapp.com/articles/2013/07/01/1372661478188.htmljavascript游戏坦克大战

Answer 1

4效率低，一是页面元素太多，50*50，2500个div对象，光是创建就要不少的时间，元素太多更新元素也慢。
最好只创建坦克和子弹的元素，也可以用个文本框来当做地图，用一些字符当做坦克和子弹，然后定时刷新文本框。
效率低，二是定时器太多，你完全可以只用一个定时器。 

Answer 2

效率低，一是页面元素太多，50*50，2500个div对象，光是创建就要不少的时间，元素太多更新元素也慢。
最好只创建坦克和子弹的元素，也可以用个文本框来当做地图，用一些字符当做坦克和子弹，然后定时刷新文本框。
效率低，二是定时器太多，你完全可以只用一个定时器。 
恩  学习了  谢谢指教