JS 连锁泡泡 v1.1

泡泡的移动，碰撞，消失都完成了，越写越觉得没意思，后面的关于游戏性的东西（比如游戏有多少关，打破多少泡泡算过关）就懒得写了。有兴趣的朋友可以读一下，因为很多地方用到闭包修正setInterval(这个函数比较贱)。面向对象，注释比较完整。

<html> <head> <title>原创JS连锁泡泡 v1.1</title> <sty1e>      body{ margin: 0px; padding: 0px; background-color: #000; } #main{ border: solid red 0px; width: 800px; height: 600px; font-size: 48px; position: absolute; background-color: #fff; } .little{ height: 15px; width: 15px; font-size: 1px; border: solid #ccc 0px; position: absolute; left: 100px; top: 100px; background: url(/upload/20090928170442418.gif) no-repeat; filter: alpha(opacity=30); } .big{ height: 61px; width: 61px; font-size: 9pt; border: solid #ccc 0px; position: absolute; left: 0px; top: 0px; background: url(/upload/20090928170442175.gif) no-repeat;  line-height: 61px; color: #fff; filter: alpha(opacity=30); } #info{  position: absolute;  left: 820px;  top 20px;  border: solid #fff 1px;  height: 600px;  width: 300px;  color: #fff;  padding: 5px; } #score{  float: right;  border: solid #ccc 1px;  height: 10px;  width: 80px;  margin: 5px;  font-size: 30px; } </style> </head> <body>   0     原创JS连锁泡泡 v1.1   原创作者 sunxing007   转载请务必注明来自：   http://blog.csdn.net/sunxing007   开发环境：IE8 暂时没有考虑兼容性      </body> </html> <script type="text/javascript">       var doc = document; function $(id){return doc.getElementById(id)}; var container = $('main'); var score_ele = $('score'); try{  //针对ie6缓存背景图   document.execCommand("BackgroundImageCache", false, true);  }catch(e){alert(e)};  //系统参数 //小泡泡半径 var little_radius = 7; //爆炸后的泡泡半径 var big_radius = 30; //半径差 var delta_radius = big_radius - little_radius; //容器宽度 var container_width = 800; //容器高度 var container_height = 600; //与定义的泡泡移动的4个方向 //[x,y]代表x方向的增量和y方向的增量，也就确定了移动方向 var direct = [[1,1],[1,-1],[-1,1],[-1,-1]]; //爆炸后的泡泡集合 var chained_bubbles = []; //所有的泡泡 方便管理 var all_bubbles = [];  //泡泡模型 function Bubble(left, top, bgPos, score, dirIndex){ var ele = doc.createElement('div'); ele.align = 'center'; ele.className = 'little'; ele.style.left = left + 'px'; ele.style.top = top + 'px'; this.bgPos = bgPos; ele.style.backgroundPositionX = -bgPos*(little_radius*2+1); this.element = ele; ele.bubble = this; this.score = score; this.exploded = false; this.dirIndex = dirIndex; this.container.appendChild(ele); this.container.onclick = function(){  if(window.curBubble){   //curBubble.distroy.apply(curBubble);   chained_bubbles.push(curBubble);   curBubble.explode.apply(curBubble);   curBubble.container.onclick = null;  } } ele.onmouseover = function(){  this.style.filter = 'alpha(opacity=100)';  window.curBubble = ele.bubble;   } ele.onmouseout = function(){  this.style.filter = 'alpha(opacity=30)'; } } Bubble.prototype = {  //容器的引用      container: $('main'),      //移动泡泡 move: function(){if(chained_bubbles.length>0){ for(var i=0; i<chained_bubbles.length; i++){  if(this.crushed(chained_bubbles[i])){   this.explode();  }     }    } var _self = this; //连续移动泡泡的函数，因为要用到setInterval, //所以这个函数作成闭包 var _f = function(){      if(chained_bubbles.length>0){  for(var i=0; i<chained_bubbles.length; i++){   if(this.crushed(chained_bubbles[i])){    this.explode();    break;   }      }     }  var l = parseInt(this.element.style.left) + direct[this.dirIndex][0];  var t = parseInt(this.element.style.top) + direct[this.dirIndex][1];  //status = 'l:' + l + " t:" + t;  if(this.checkBorder(l, t)){   this.element.style.left = l;   this.element.style.top = t;     }     else{      //this.stop();      this.changeDirect();     } } this.timer = setInterval(function(){ _f.apply(_self); //移动速度 }, 10) }, //停止移动 stop: function(){  clearInterval(this.timer); }, //边界检查 看泡泡有没有超出容器 checkBorder: function(l, t){  if(l>(container_width-big_radius-1-little_radius)||l<(big_radius-little_radius)||t>(container_height-big_radius-1-little_radius)||t<(big_radius-little_radius)){   return false;      }  return true; }, //碰壁后改变泡泡的移动方向 changeDirect: function(){  var _l = parseInt(this.element.style.left);  var _t = parseInt(this.element.style.top);  for(var i=1; i<=4; i++){if(direct[this.dirIndex][0]==-direct[(i+this.dirIndex)%4][0]&&direct[this.dirIndex][1]==-direct[(i+this.dirIndex)%4][1]){ continue;}   var l = _l + direct[(i+this.dirIndex)%4][0];   var t = _t + direct[(i+this.dirIndex)%4][1];   if(this.checkBorder(l, t)){    this.dirIndex = (i+this.dirIndex)%4;    break;   }   else{ continue;}  } }, //泡泡爆炸 explode: function(){  this.stop();  this.element.style.left = parseInt(this.element.style.left) - delta_radius;  this.element.style.top = parseInt(this.element.style.top) - delta_radius;  this.element.className = 'big';  this.element.style.backgroundPositionX = - this.bgPos*(big_radius*2+1);  this.element.innerText = this.score;  this.exploded = true;  score_ele.innerText = parseInt(score_ele.innerText) + this.score;  chained_bubbles.push(this);  this.fade.apply(this); },  crushed: function(other){  if(!other.exploded){   return false;      }  if(!other.element) return false;  var l = parseInt(other.element.style.left);  var t = parseInt(other.element.style.top);  var w = big_radius*2-8;//big_radius*2+1;  var h = w;  var pt = [,,,];  pt[0] = [parseInt(this.element.style.left) - delta_radius, parseInt(this.element.style.top) - delta_radius];  pt[1] = [pt[0][0]+w,pt[0][1]];  pt[2] = [pt[0][0]+w,pt[0][1]+h];  pt[3] = [pt[0][0],pt[0][1]+h];  for(var i=0; i<4; i++){   if(pt[i][0]>l&&pt[i][1]>t&&pt[i][0]<=(l+w)&&pt[i][1]<=(t+h)){return true;   }  }  return false; }, //爆炸的泡泡逐渐消失 fade: function(){  var _self = this;  var opacity = 28;  var _f = function(){   this.element.style.filter = 'alpha(opacity=' + (opacity-2) + ')';   opacity -=2;   if(opacity==0){    this.distroy();   }  };  this.timer = setInterval(function(){   _f.apply(_self);  }, 200); }, //析构方法 因为对象中很多地方涉及对象相互引用 //需要在析构函数中消除环形引用，以防内存泄露 distroy: function(){  if(this.timer){   clearInterval(this.timer);  }  for(var j=0; j<chained_bubbles.length; j++){   //if(chained_bubbles[j]==null) continue;   if(chained_bubbles[j]===this){    chained_bubbles.splice(j, 1);    //chained_bubbles[j] = null;    status = 'distroyed from chained_bubbles[' + j + ']';    break;   }  }  for(var i=0; i

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
转载请务必注明来自：http://blog.csdn.net/sunxing007

JS 连锁泡泡 v1.1

JavaScript相关栏目本月热门文章