Bubble move, collision, disappeared are completed, the more write more feel boring, the back of the game on the things (such as how many games, how to break the number of bubbles to pass) will not bother to write. Interested friends can read, because a lot of places use the closure fix setinterval (this function is cheap). Object-oriented, the annotation is more complete.
<ptml> <pead> <title> original JS chain bubble 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/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; /** to center the displayed score **/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> </pead> <body> <div id= "main" > <div id= "score" >0</div> </d iv> <div id= "info" > Original JS chain Bubble v1.1 Original Creator sunxing007 reproduced please be sure to indicate from: http://b LOG.CSDN.NET/SUNXING007 development environment: IE8 does not consider compatibility </div> </body> </ptml> <script Type= "Text/javascript" >/******************************************************* * Original JS chain Bubble v1.1 * Original Creator Sunxing007 * Reproduced please be sure to indicate from: http://blog.csdn.net/sunxing007 *************************************************** /var doc = document; function $ (ID) {return Doc.getelementbyid (ID)}; var container = $ (' main '); var Score_ele = $ (' score '); try{//IE6 cache background Map Document.execcommand ("Backgroundimagecache", false, true); }catch (e) {alert (e)};/*******************************************************///System parameters//Small bubble radius var little_radius = 7; After explosion the bubble radius var big_radius = 30; The radius difference var Delta_radius = Big_radius-little_radius; Container width var container_width = 800; Container height var container_height = 600; With the definition of the bubble moving in 4 directions//[x,y] represents the x direction increment and the y direction increment, also determines the move direction var direct = [[1,1],[1,-1],[-1,1],[-1,-1]]; The bubble set after the explosion var chained_bubbles = []; All bubbles facilitate the management of var all_bubbles = []; /*****************************************************///Bubble model 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 reference container: $ (' main '),//Move Bubble move:function () {if (c hained_bubbles.length>0) {for (var i=0; i<chained_bubbles.length; i++) { if (this.crushed (Chained_bubbles[i])) {This.explode (); }} var _self = this; The function of moving bubbles continuously because the setinterval is used,//So this function is closed to the var _f = functions () {if (chained_bubbles.length>0) { for (var i=0; i<chained_bubbles.length; i++) {if (this.crushed chain Ed_bubbles[i])) {This.explode (); Break } {var L = parseint (this.element.style.left) + dir ECT[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); Move Speed}, 10)},//Stop Moving stop:function () {clearinterval (This.timer); },//border check to see if bubbles have exceeded container 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) by changing the direction of bubble movement after hitting the wall; 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[thi s.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; }},//Bubble Explosion 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); Whether/** collided with another bubble that has exploded **/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) &&p T[i][1]<= (t+h)) {return true; return false; The bubble gradually disappears 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); },//destructor because there are many places in the object that involve objects being cross-referenced//need to eliminate circular references in destructors to prevent memory leaks distroy:function () {if (This.timer) {Clea Rinterval (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); The factory method creates the Bubble 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 (); /******************************************************* * Original JS chain Bubble v1.1 * Original Author sunxing007 * Reproduced please be sure to indicate from: HTTP://BLOG.CSD n.net/sunxing007 *******************************************************/</script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Reproduced please be sure to indicate from: http://blog.csdn.net/sunxing007
