JS 连锁泡泡 v1.1- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS 连锁泡泡 v1.1

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

Javascript 中的 JS 连锁泡泡 v1.1

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 467 ::

收藏到网摘: n/a

网页自动跳转代码收集 javascript的onchange事件与jQuery的change()方法比较

前几天在朋友的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/tech/20091012/20091012100813_c3992e9a68c5ae12bd18488bc579b30d.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/tech/20091012/20091012100813_e07413354875be01a996dc560274708e.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 全选提示:你可先修改部分代码,再按运行]

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

网页自动跳转代码收集 javascript的onchange事件与jQuery的change()方法比较

Javascript 中的 JS 连锁泡泡 v1.1

评论 (0) All