简单的BubbleBreaker削球游戏javascript版
采用面向对象和样式表控制逻辑和界面
面向对象的好处就：可以同时创建多个实例，可扩展性维护性强。
样式表控制界面的好处：轻松实现换肤。
游戏页面
http://www.renrousousuo.com/tools/BubbleBreaker.html
界面截图
代码
- HTML code
<html>
<body>
<style type="text/css">
.table_back{width:320px;height:320px;border-bottom:1px solid black;border-right:1px solid black;}
.floor{border-left:1px solid black;border-top:1px solid black;font-size:1px;line-height:1px;}
.red{background:#ff99cc;}
.red_hot{background:#ff0000;}
.purple{background:#cc99ff;}
.purple_hot{background:#ff00ff;}
.blue{background:#99ccff;}
.blue_hot{background:#3366ff;}
.green{background:#ccffcc;}
.green_hot{background:#339966;}
.gray{background:#c0c0c0;}
.gray_hot{background:#808080;}
.f1{background:url(http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/3.gif) no-repeat scroll 2px 2px;}
.f1_hot{background:url(http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/4.gif) no-repeat scroll 2px 2px;}
.f2{background:url(http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/70.gif) no-repeat scroll 2px 2px;}
.f2_hot{background:url(http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/36.gif) no-repeat scroll 2px 2px;}
.f3{background:url(http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/64.gif) no-repeat scroll 2px 2px;}
.f3_hot{background:url(http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/63.gif) no-repeat scroll 2px 2px;}
.f4{background:url(http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/66.gif) no-repeat scroll 2px 2px;}
.f4_hot{background:url(http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/65.gif) no-repeat scroll 2px 2px;}
.f5{background:url(http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/85.gif) no-repeat scroll 2px 2px;}
.f5_hot{background:url(http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/89.gif) no-repeat scroll 2px 2px;}
</style>
<table> <tr> <td id="td_left"> </td> <td id="td_right"> </td> </tr> </table>
<script type="text/javascript">
/*--
标题：BubbleBreaker
设计：王集鹄
博客：http://blog.csdn.net/zswang
日期：2010年7月6日
--*/
function BubbleBreaker(options) {
var self = this;
for (var p in options) this[p] = options[p];
this.rowCount = this.rowCount || 11;
this.colCount = this.colCount || 11;
this.parent = this.parent || document.body;
this.hues = this.hues || ["gray", "blue", "green", "purple", "red"];
this.hots = {};
this.hotCount = 0;
this.button_replay = document.createElement("input");
this.button_replay.type = "button";
this.button_replay.value = "replay";
this.button_replay.onclick = function() {
self.replay();
};
this.parent.appendChild(this.button_replay);
this.table_back = document.createElement("table");
this.table_back.className = "table_back";
this.table_back.cellPadding = "0px";
this.table_back.cellSpacing = "0px";
this.playing = false; // 是否在进行中
this.floors = {}; // 矩阵地板矩阵 [y,x]
for (var i = 0; i < this.rowCount; i++) {
var tr = this.table_back.insertRow(-1);
for (var j = 0; j < this.colCount; j++) {
var td = tr.insertCell(-1);
td.className = "floor";
td.innerHTML = " ";
td.pos = [i, j];
td.onmouseover = function() {
self.updateHots(this.pos);
};
td.onclick = function() {
if (self.hotCount <= 1) return;
for (var p in self.hots) {
self.floors[p].type = -1;
self.updateFloor(p);
}
self.stackBottom();
self.moveRight();
self.hots[this.pos] = false;
self.updateHots(this.pos);
};
this.floors[[i, j]] = {
td: td,
pos: [i, j],
type: -1 // -1: 空 颜色:序号
};
this.updateFloor([i, j]);
}
}
this.parent.appendChild(this.table_back);
this.replay();
}
BubbleBreaker.prototype = {
replay: function() {
this.hots = {}; // 预爆破的区域
for (var i = 0; i < this.rowCount; i++) {
for (var j = 0; j < this.colCount; j++) {
this.floors[[i, j]].type =
Math.floor(Math.random() * this.hues.length);
this.updateFloor([i, j]);
}
}
},
updateFloor: function(pos) {
if (!this.floors[pos]) return;
var className = "floor " + this.hues[this.floors[pos].type] + (this.hots[pos] ? "_hot" : "");
if (this.floors[pos].td.className != className)
this.floors[pos].td.className = className;
},
offsets: [[-1, 0], [+1, 0], [0, -1], [0, +1]],
stackBottom: function() {
var changes = {};
for (var x = 0; x < this.colCount; x++) {
for (var y = this.rowCount - 1; y > 0; y--) {
if (this.floors[[y, x]].type >= 0) continue;
for (var k = y; k >= 0; k--) {
if (this.floors[[k, x]].type >= 0) {
changes[[k, x]] = changes[[y, x]] = true;
this.floors[[y, x]].type = this.floors[[k, x]].type;
this.floors[[k, x]].type = -1;
break;
}
}
}
}
for (var p in changes) this.updateFloor(p);
},
moveRight: function() {
var changes = {};
for (var x = this.colCount - 1; x >= 0; x--) {
var exists = false; // 存在非空
for (var y = this.rowCount - 1; y >= 0; y--) {
if (this.floors[[y, x]].type >= 0) {
exists = true;
break;
}
}
if (exists) continue;
var t = -1;
for (var j = x - 1; j >= 0; j--) {
exists = false;
for (var y = this.rowCount - 1; y >= 0; y--) {
if (this.floors[[y, j]].type >= 0) {
exists = true;
break;
}
}
if (exists) {
t = j;
break;
}
}
if (t < 0) continue;
for (var y = this.rowCount - 1; y >= 0; y--) {
changes[[y, x]] = changes[[y, t]] = true;
this.floors[[y, x]].type = this.floors[[y, t]].type;
this.floors[[y, t]].type = -1;
}
}
for (var p in changes) this.updateFloor(p);
},
updateHots: function(pos) {
if (this.hots[pos]) return;
var floor = this.floors[pos];
if (!floor) return;
var oldHots = this.hots;
this.hots = {};
this.hotCount = 0;
var self = this;
(function(pos, type) {
if (self.hots[pos]) return;
var floor = self.floors[pos];
if (!floor || floor.type < 0 || floor.type != type) return;
self.hotCount++;
self.hots[pos] = true;
for (var i = 0; i < self.offsets.length; i++) {
var offset = self.offsets[i];
arguments.callee([pos[0] + offset[0], pos[1] + offset[1]], type);
}
})(pos, floor.type);
for (var p in oldHots) this.updateFloor(p);
for (var p in this.hots) this.updateFloor(p);
}
}
function $(id) { return document.getElementById(id); }
new BubbleBreaker({parent: $("td_left")});
new BubbleBreaker({parent: $("td_right"), hues: ["f1", "f2", "f3", "f4", "f5"]});
</script>
</body>
</html>
以往的作品
贪吃蛇
http://www.renrousousuo.com/tools/Snake.html
正则调试工具
http://www.renrousousuo.com/tools/regex_debug.html
小型金山词霸
http://www.renrousousuo.com/tools/dict.html
做得比较简陋，要加积分和得分提示得自己加了。
[解决办法]
sf么？
[解决办法]
good
[解决办法]
哇 支持下！今晚看球吗？
[解决办法]
look look ~
[解决办法]
路过，看来我还有很远。。。
[解决办法]
[解决办法]
[解决办法]
哦，支持下，试试
[解决办法]
接分！！！
[解决办法]
kanlaishigebucuodeedongxi a .
[解决办法]
做得比较简陋
[解决办法]
为什么要说简陋呢~~~~~~~~~简陋的对我也很华丽啊
[解决办法]
[解决办法]
1 学习了,顶
[解决办法]
非常好，我是做不出了，惭愧
[解决办法]
[解决办法]
学习。。。
[解决办法]
支持楼主的智慧！
[解决办法]
good thing
[解决办法]
来接分.....强人在出新品..
[解决办法]
不错，帮顶
[解决办法]
路过，瞧瞧~！
[解决办法]
没玩过这个游戏啊
[解决办法]
牛人，必须得顶~
[解决办法]
又出新游戏了
[解决办法]
好厉害
[解决办法]
顶。。。。。。
[解决办法]
learning......
[解决办法]
膜拜一下伴水
[解决办法]
玩了几盘，都没消掉....
[解决办法]
和微软的那个ppc内置游戏差不多吧
------解决方案--------------------
不错!
[解决办法]
太不错了
[解决办法]
倾力支持！！！
[解决办法]
看顶再看。
[解决办法]
每天回帖，意识存在！
[解决办法]
[解决办法]
做的不错，把他写成手机应用
[解决办法]
学习
[解决办法]
谢谢分享！
[解决办法]
哇,好多啊
[解决办法]
鸡蛋高
[解决办法]
顶啊！
[解决办法]
这个根踩雷一样吗?楼主强人！
[解决办法]
[解决办法]
不错，顶
[解决办法]
做的是不错，不过可玩性不强啊
[解决办法]
很强大
[解决办法]
~~~~~~~~jF
[解决办法]
大神，，，膜拜~~~
[解决办法]
支持一下。。。。。。。。。。。。。
[解决办法]
这是完整代码吗？？
[解决办法]
NB
[解决办法]
拷贝下来了
拿来有空再读读。
[解决办法]
mark
[解决办法]
看看吧
[解决办法]
不错，学习了。顶。
[解决办法]
BUCUO :) :)
[解决办法]
楼主蛮强大的。学习了。
[解决办法]
下下来试试看吧~~
[解决办法]
学习学习~~~
[解决办法]
伴水哥又出新作啦？
拜读～～接分～～
[解决办法]
学习了
[解决办法]
哥你好强哟
[解决办法]
这种游戏娱乐性不行呀
[解决办法]
NB，好好学习一下。
------解决方案--------------------
[解决办法]
[解决办法]
[解决办法]
思科网迅（杭州）招聘 web 前端开发工程师（前端交互实现），有意者可以发简历至colinj@hz.webex.com。我的手机：13588834257, QQ：94154232
面试方式：非杭州本地，电话面试
待遇：
1. 6级： 10K+, 8级：15K+。具体级别和薪资要根据面试结果定；
2. 五险一金，额外的商业保险（包括配偶和子女，门诊基本可以100%报销，从医保卡里扣的钱也可以报，老婆生小孩可以报8000。）；
3. 年休假 > 11 天；
4. 周二，周四有水果，每天有两次零食可以拿，饮料自己随时可以冲；
技能要求：
Position Requirements:
- At least 3years experience of front-end technologies, including JavaScript, CSS, HTML, XML, JSON, DOM.
- At least 2 years experience of server-side knowledge, such as PHP, JSP, ASP.NET, Ruby on Rails etc.
- Experience in multiple Browsers debugging, including IE, Firefox, Safari, Chrome etc.
- Experience in at least 2 JavaScript libraries, such as jQuery, Prototype, Mootools, YUI, Extjs, Dojo etc.
- Deep understanding of IT trends, keeping eyes on emerging technologies in the areas of JavaScript, CSS, HTML, Web2.0, Open Source etc.
- Bachelor or master degree in computer science or equivalent experience.
- Excellent written and good spoken communication skills in English.
-Colin Ju
[解决办法]
又有新游戏了啊？哈哈
[解决办法]
[解决办法]
[解决办法]
果然牛逼娃娃。。。。。。