泡泡的移动，碰撞，消失都完成了，越写越觉得没意思，后面的关于游戏性的东西（比如游戏有多少关，打破多少泡泡算过关）就懒得写了。有兴趣的朋友可以读一下，因为很多地方用到闭包修正setInterval(这个函数比较贱)。面向对象，注释比较完整。 原创JS连锁泡泡 v1.1 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; } 0 原创JS连锁泡泡 v1.1 原创作者 sunxing007 转载请务必注明来自： http://blog.csdn.net/sunxing007 开发环境：IE8 暂时没有考虑兼容性 /******************************************************* * 原创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; i0){ for(var i=0; i(container_width-big_radius-1-little_radius)||l(container_height-big_radius-1-little_radius)||tl&&pt[i][1]>t&&pt[i][0] [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]转载请务必注明来自：http://blog.csdn.net/sunxing007

　　推荐阅读

　　jQuery 使用手册(一)

一：核心部分$(expr)说明：该函数可以通过css选择器，Xpath或html代码来匹配目标元素，所有的jQuery操作都以此为基础参数：expr：字符串，一个查询表达式或一段html字符串例子：未执行jQuery前： <p>one</p><div> >>>详细阅读

本文标题：JS 连锁泡泡 v1.1

地址：http://www.17bianji.com/kaifa2/JS/28056.html

 1/2    1