采用面向对象和样式表控制逻辑和界面
面向对象的好处就：可以同时创建多个实例，可扩展性维护性强。
样式表控制界面的好处：轻松实现换肤。
游戏页面
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);
};