简单的BubbleBreaker削球游戏javascript版解决方法-JavaSript-爱易网页

简单的BubbleBreaker削球游戏javascript版解决方法

日期：2014-05-16　浏览次数：20710 次

简单的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 = "&nbsp;"; 
 			t

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

简单的BubbleBreaker削球游戏javascript版解决方法

相关资料更多>

推荐阅读更多>