JS 连锁泡泡 v1.1

更新时间：2009年09月28日 17:04:44 作者：

前几天在朋友的iPhone上面玩了一个连锁泡泡游戏，头脑发热就想用js写一个。

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

<html> <head> <title>原创JS连锁泡泡 v1.1</title> <style>      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> <div id="main">         <div id="score">0</div> </div> <div id="info">          原创JS连锁泡泡 v1.1          原创作者 sunxing007          转载请务必注明来自：          <a href="http://blog.csdn.net/sunxing007">http://blog.csdn.net/sunxing007</a>          开发环境：IE8 暂时没有考虑兼容性            </div> </body> </html> <script type="text/javascript">      /*******************************************************      * 原创JS连锁泡泡 v1.1      * 原创作者 sunxing007      * 转载请务必注明来自：http://blog.csdn.net/sunxing007      *******************************************************/ 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<all_bubbles.length; i++){                 if(!all_bubbles[i].element){                         all_bubbles.splice(i, 1);                 }                 if(all_bubbles[i]===this){                         all_bubbles.splice(i, 1);                         status = 'distroyed from all_bubbles[' + i + ']';                         break;                 }         }         var _e = this.element;         this.element = null;         _e.onclick = null;         _e.onmouseover = null;         _e.onmouseout = null;         _e.bubble = null;         var _c = this.container;         this.container = null;         _c.removeChild(_e);          } } //工厂方法 创造泡泡 function createBubble(){ var left = Math.floor(Math.random()*710) + 31; var top = Math.floor(Math.random()*510) + 31; var bgIndex = Math.floor(Math.random()*6); var score = Math.floor(Math.random()*10) * 50; var dirIndex = Math.floor(Math.random()*4) var b = new Bubble(left, top, bgIndex, score, dirIndex); all_bubbles.push[b]; return b; } createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); createBubble().move(); /******************************************************* * 原创JS连锁泡泡 v1.1 * 原创作者 sunxing007 * 转载请务必注明来自：http://blog.csdn.net/sunxing007 *******************************************************/ </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

转载请务必注明来自：http://blog.csdn.net/sunxing007

原生js编写autoComplete插件
这篇文章主要为大家详细介绍了原生js编写的autoComplete插件，感兴趣的小伙伴们可以参考一下
2016-04-04
详解微信小程序（Taro）手动埋点和自动埋点的实现
这篇文章主要介绍了详解微信小程序（Taro）手动埋点和自动埋点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
原生js实现针对Dom节点的CRUD操作示例
这篇文章主要介绍了原生js实现针对Dom节点的CRUD操作,结合实例形式分析了javascript操作dom节点的创建、获取、增删改查等相关操作技巧,需要的朋友可以参考下
2019-08-08
ES2020系列之空值合并运算符 ''??''
这篇文章主要介绍了ES2020系列之空值合并运算符 '??'，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
JavaScript 解决ajax中parsererror错误案例详解
这篇文章主要介绍了JavaScript 解决ajax中parsererror错误案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-08-08
一个简易的js图片轮播效果
这篇文章主要为大家详细介绍了一个简易的js图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
在Windows上安装Node.js模块的方法
Node.js逐渐升温，很多朋友已经开始关注。但是在Windows平台上需要基于Cygwin安装配置环境，让很多人望而却步。
2011-09-09
JavaScript中两个字符串的匹配
本文分享JavaScript中两个字符串的匹配的一个实例代码，希望能给大家做一个参考。
2016-06-06
微信小程序实现下拉框功能
这篇文章主要为大家详细介绍了微信小程序实现下拉框功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
微信小程序实现点击生成随机验证码
这篇文章主要为大家详细介绍了微信小程序实现点击生成随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09

软件下载

源码下载

软件编程

网络编程

在线工具

数据库

CMS

常用工具

JS 连锁泡泡 v1.1

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具