JS 连锁泡泡 v1.1

泡泡的移动，碰撞，消失都完成了，越写越觉得没意思，后面的关于游戏性的东西（比如游戏有多少关，打破多少泡泡算过关）就懒得写了。有兴趣的朋友可以读一下，因为很多地方用到闭包修正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