IE6下opacity与JQuery的奇妙结合

Html 5 坦克大战(韩顺平版本)

html 5代码部分如下:

hmtl5-经典的坦克大战


数据

<script type="text/javascript" src="tankGame7.js"></script>
<script type="text/javascript">
 //得到画布
 var canvas1=document.getElementById("tankMap");
 //得到绘图上下文(你可以理解是画笔)
 var cxt=canvas1.getContext("2d"); 
 //我的坦克 hero
 //方向 
 var hero=new Hero(140,140,0,heroColor);
 //定义子弹数组
 var heroBullets=new Array();
 //定义敌人的坦克(敌人的坦克有多少? 思路 : 是单个单个的定义,还是放在数组中?)
 var enemyTanks=new Array();
 //定义敌人子弹的数组
 var enemyBullets=new Array();
 //定义一个炸弹数组(可以存放很多炸弹,)
 var bombs=new Array();
 //先死后活 ,定3个,后面我们把敌人坦克的数量,作出变量
 //0->上, 1->右, 2->下 3->左
 for(var i=0;i<3;i++){  
  //创建一个坦克
  var enemyTank=new EnemyTank((i+1)*50,0,2,enmeyColor);
  //把这个坦克放入数组
  enemyTanks[i]=enemyTank;
  //启动这个敌人的坦克
  window.setInterval("enemyTanks["+i+"].run()",50);
  //当创建敌人坦克时就分配子弹
  var eb=new Bullet(enemyTanks[i].x+9,enemyTanks[i].y+30,2,1.2,"enemy",enemyTanks[i]);
  enemyBullets[i]=eb;
  //启动该子弹
  var ettimer=window.setInterval("enemyBullets["+i+"].run()",50);
  enemyBullets[i].timer=ettimer;  
 }
  //先调用一次
  flashTankMap();
 //专门写一个函数,用于定时刷新我们的作战区,把要在作战区出现的元素(自己坦克,敌人坦克,子弹,炸弹,
 //障碍物...)->游戏思想
 function flashTankMap(){ 
  //把画布清理
  cxt.clearRect(0,0,400,300); 
  //我的坦克
  drawTank(hero);
  //画出自己的子弹
  //子弹飞效果是怎么出现的?[答 : 首先我们应该每隔一定时间(setInterval)就去刷新作战区,如果在刷新的时候,子弹坐标变换了,给人的感觉就是子弹在飞!]
  drawHeroBullet();
  //敌人的坦克
  //判断一下敌人坦克是否击中
  isHitEnemyTank();
  drawEnemyBomb();
  drawEnemyBullet();  
  //画出所有敌人坦克
  for(var i=0;i<3;i++){
   drawTank(enemyTanks[i]);
  }   
 }
 //这是一个接受用户按键函数
 function getCommand(){  
  //我怎么知道,玩家按下的是什么键
  //说明当按下键后 事件--->event对象----->事件处理函数()
  var code=event.keyCode;//对应字母的ascii码->我们看码表 
  switch(code){
   case 87://上
    hero.moveUp();    
      break;
   case 68:   
     hero.moveRight();
      break;
    case 83:    
    hero.moveDown();
    break;
   case 65:
    hero.moveLeft();
    break;
   case 74:
    hero.shotEnemy();
    break;
  }  
  //触发这个函数 flashTankMap();
  flashTankMap();
  //重新绘制所有的敌人的坦克.你可以在这里写代码(思想,我们干脆些一个函数,专门用于定时刷新我们的画布[作战区])
 } 
 //每隔100毫秒去刷新一次作战区
 window.setInterval("flashTankMap()",100);
</script>

javascript部分代码如下:

//为了编程方便,我们定义两个颜色数组
var heroColor=new Array("#BA9658","#FEF26E");
var enmeyColor=new Array("#00A2B5","#00FEFE");
//其它的敌人坦克,这里的扩展性,还是不错的.
//定义一个炸弹类
function Bomb(x,y){
 this.x=x;
 this.y=y;
 this.isLive=true; //炸弹是否活的,默认true;
 //炸弹有一个生命值
 this.blood=9;
 //减生命值
 this.bloodDown=function(){
  if(this.blood>0){
   this.blood--;
  }else{
   //说明炸弹死亡
   this.isLive=false;
  }
 }
}


//子弹类
//type表示:这颗子弹是敌人的,还是自己的
//tank表示对象,说明这颗子弹,属于哪个坦克.
function Bullet(x,y,direct,speed,type,tank){
 this.x=x;
 this.y=y;
 this.direct=direct;
 this.speed=speed;
 this.timer=null;
 this.isLive=true;
 this.type=type;
 this.tank=tank;
 this.run=function run(){

   //在该表这个子弹的坐标时,我们先判断子弹是否已经到边界
   //子弹不前进,有两个逻辑,1.碰到边界,2. 碰到敌人坦克.
   if(this.x<=0||this.x>=400||this.y<=0||this.y>=300||this.isLive==false){
    //子弹要停止.
    window.clearInterval(this.timer);
    //子弹死亡
    this.isLive=false;

    if(this.type=="enemy"){
      this.tank.bulletIsLive=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").innerText="子弹x="+this.x+" 子弹y="+this.y;
 }
}

//这是一个Tank类
function Tank(x,y,direct,color){

  this.x=x;
  this.y=y;
  this.speed=1;
  this.isLive=true;
  this.direct=direct;
  //一个坦克,需要两个颜色.
  this.color=color;
  //上移
  this.moveUp=function(){
   this.y-=this.speed;
   this.direct=0;
  }
  //向右
  this.moveRight=function(){
   this.x+=this.speed;
   this.direct=1;
  }

  //下移
  this.moveDown=function(){
   this.y+=this.speed;
   this.direct=2;
  }
  //左
  this.moveLeft=function(){
   this.x-=this.speed;
   this.direct=3;
  }
}

//定义一个Hero类
 //x 表示坦克的 横坐标, y 表示纵坐标, direct 方向 
 function Hero(x,y,direct,color){

  //下面两句话的作用是通过对象冒充,达到继承的效果
  this.tank=Tank;
  this.tank(x,y,direct,color);

  //增加一个函数,射击敌人坦克.
  this.shotEnemy=function(){

   //创建子弹, 子弹的位置应该和hero有关系,并且和hero的方向有关.!!!
   //this.x 就是当前hero的横坐标,这里我们简单的处理(细化)

   switch(this.direct){
    case 0:
    heroBullet=new Bullet(this.x+9,this.y,this.direct,1,"hero",this);
    break;
    case 1:
    heroBullet=new Bullet(this.x+30,this.y+9,this.direct,1,"hero",this);
    break;
    case 2:
    heroBullet=new Bullet(this.x+9,this.y+30,this.direct,1,"hero",this);
    break;
    case 3: //右
    heroBullet=new Bullet(this.x,this.y+9,this.direct,1,"hero",this);
    break;
   }

   //把这个子弹对象放入到数组中  -> push函数
   heroBullets.push(heroBullet);
   //调用我们的子弹run, 50 是老师多次测试得到的一个结论., 这里技术难度比较大.
   //就算你工作过1-2年,你也未必想到, 下面启动方式,每个子弹的定时器是独立,如果按原来的方法
   //则所有子弹共享一个定时器.
   var timer=window.setInterval("heroBullets["+(heroBullets.length-1)+"].run()",50);
   //把这个timer赋给这个子弹(js对象是引用传递!)
   heroBullets[heroBullets.length-1].timer=timer;

  }



 }

 //定义一个EnemyTank类
 function EnemyTank (x,y,direct,color){

  //也通过对象冒充,来继承Tank
  this.tank=Tank;
  this.count=0;
  this.bulletIsLive=true;

  this.tank(x,y,direct,color);

  this.run=function run(){

   //判断敌人的坦克当前方向
   switch(this.direct){

    case 0:
     if(this.y>0){
      this.y-=this.speed;
     } 
     break;
    case 1:
     if(this.x+30<400){
      this.x+=this.speed;
     }
     break;
    case 2:
     if(this.y+30<300){
      this.y+=this.speed;
     }
     break;
    case 3:
     if(this.x>0){
      this.x-=this.speed;
     }
     break;
   }
   //改变方向,走30次,再改变方向
   if(this.count>30){
    this.direct=Math.round(Math.random()*3);//随机生成 0,1,2,3
    this.count=0;
   }
   this.count++;

   //判断子弹是否已经死亡,如果死亡,则增加新的一颗子弹
   if(this.bulletIsLive==false){
    //增子弹,这是需要考虑当前这个敌人坦克的方向,在增加子弹
     switch(this.direct){
      case 0:
      etBullet=new Bullet(this.x+9,this.y,this.direct,1,"enemy",this);
      break;
      case 1:
      etBullet=new Bullet(this.x+30,this.y+9,this.direct,1,"enemy",this);
      break;
      case 2:
      etBullet=new Bullet(this.x+9,this.y+30,this.direct,1,"enemy",this);
      break;
      case 3: //右
      etBullet=new Bullet(this.x,this.y+9,this.direct,1,"enemy",this);
      break;
    }

    //把子弹添加到敌人子弹数组中
    enemyBullets.push(etBullet);
    //启动新子弹run
    var mytimer=window.setInterval("enemyBullets["+(enemyBullets.length-1)+"].run()",50);
    enemyBullets[enemyBullets.length-1].timer=mytimer;

    this.bulletIsLive=true;
   }

  }
 }

  //画出自己的子弹,多说一句,你也可以把该函数封装到Hero类中
  function drawHeroBullet(){

    //现在要画出所有子弹
    for( var i=0;i后活 (初学者最好用这个方法)
    //先画出左面的矩形
    cxt.fillRect(tank.x,tank.y,5,30);
    //画出右边的矩形(这时请大家思路->一定要一个参照点)
    cxt.fillRect(tank.x+15,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,360,true);
    cxt.fill();
    //画出炮筒(直线)
    cxt.strokeStyle=tank.color[1];
    //设置线条的宽度
    cxt.lineWidth=1.5;
    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+15,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,360,true);
    cxt.fill();
    //画出炮筒(直线)
    cxt.strokeStyle=tank.color[1];
    //设置线条的宽度
    cxt.lineWidth=1.5;
    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;

   }
  }
 }

//编写一个函数,专门用于判断我的子弹,是否击中了某个敌人坦克
function isHitEnemyTank(){

  //取出每颗子弹
  for(var i=0;i=enemyTank.x&&heroBullet.x<=enemyTank.x+20
          &&heroBullet.y>=enemyTank.y&&heroBullet.y<=enemyTank.y+30){
          //把坦克isLive 设为false ,表示死亡
          enemyTank.isLive=false;
          //该子弹也死亡
          heroBullet.isLive=false;
          //创建一颗炸弹
          var bomb=new Bomb(enemyTank.x,enemyTank.y);
          //然后把该炸弹放入到bombs数组中
          bombs.push(bomb);
         }
        break;
        case 1: //敌人坦克向右
        case 3://敌人坦克向左
         if(heroBullet.x>=enemyTank.x&&heroBullet.x<=enemyTank.x+30
          &&heroBullet.y>=enemyTank.y&&heroBullet.y<=enemyTank.y+20){
          //把坦克isLive 设为false ,表示死亡
          enemyTank.isLive=false;
          heroBullet.isLive=false;

          //创建一颗炸弹
          var bomb=new Bomb(enemyTank.x,enemyTank.y);
          //然后把该炸弹放入到bombs数组中
          bombs.push(bomb);
         }
        break;

       }

      }


    }//for
   }
  }
}

//画出敌人炸弹 
function drawEnemyBomb(){

 for(var i=0;i6){  //显示最大炸弹图
    var img1=new Image();
    img1.src="bomb_1.gif";
    var x=bomb.x;
    var y=bomb.y;
    img1.onload=function(){
     cxt.drawImage(img1,x,y,30,30);
    }
   }else if(bomb.blood>3){
    var img2=new Image();
    img2.src="bomb_2.gif";
    var x=bomb.x;
    var y=bomb.y;
    img2.onload=function(){
     cxt.drawImage(img2,x,y,30,30);
    }
   }else {
    var img3=new Image();
    img3.src="bomb_3.gif";
    var x=bomb.x;
    var y=bomb.y;
    img3.onload=function(){
     cxt.drawImage(img3,x,y,30,30);
    }
   }

   //减血
   bomb.bloodDown();
   if(bomb.blood<=0){
    //怎么办?把这个炸弹从数组中去掉
    bombs.splice(i,1);

   }
  }
 }
}

代码下载地址:

5 坦克大战(韩顺平版本) html
5代码部分如下: hmtl5-经典的坦克大战 数据 script type=”text/javascript”
src=”tankGame7.js”/scriptscript type=”text/jav…

复制代码 代码如下:

各位已经开始做基于Fusion Viewer或者Mobile
Viewer的开发了吗?如果你正在做或者准备做,这篇文章也许对你有帮助。Fusion
Viewer和Mobile
Viewer主要由大量的Javascript和部分php代码实现,估计你的开发工作多半会是和Javascript搏斗,对于JavaScript
的调试,FireFox + Firebug是个不错的选择。

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>无标题文档</title>
<script type=”text/javascript”
src=”
/jquery/1.4.0/jquery.min.js”></script>
<style type=”text/css”>
.aa,.bb{width:200px; height:200px; margin:10px;
background-color:#000}
.bb{background-color:#F00; opacity:0.5}
</style>
<script type=”text/javascript”>
    $(function(){
        $(“.aa”).css(“opacity”,0.1)   
    })
</script>
</head>

 

<body>
<div class=”aa”></div>
<h2>JQ版</h2>
<div class=”bb”></div>
<h2>CSS版</h2>
</body>
</html>

在Fusion Viewer和Mobile
Viewer里,为了提高性能,使用的是一个压缩版本的JavaScript类库,但这样对于调试就不方便了。你需要使用非压缩版本用于调试:

如果你复制并运行了上面的代码。你会发现。IE6下第一个块是透明的。

 

原理我也不知道。应该是JQuery本身就已经考虑到了这块的兼容。而是大家没有发现而已。只是在这里给大家来个提醒。

对于Fusion
Viewer,比如你使用的是Slate模版,你可以用notepad++打开C:\Program
Files\Autodesk\Autodesk Infrastructure Web Server Extension
2013\www\fusion\templates\mapguide\slate\index.html,把下面的代码
<script type=”text/javascript”
src=”../../../lib/fusionSF-compressed.js”></script>

PS:部分电脑IETester版本IE6查看不是透明的。这应该是IETester的问题。测试没有发现系统差异。

改成

相关文章