Home > Developer > JavaScript
The movement, collision, and disappearance of bubbles have all been completed. The more you write, the less boring you are. The gameplay things that follow (such as how many game customs are involved and how many bubbles are broken) I am too lazy to write. If you are interested, you can read it, because the closure is often used to correct setInterval (this function is cheap ). Object-oriented, complete annotations.
<Html> <pead> <title> original JS chained 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) n O-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;/** 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: # ff F; padding: 5px ;}# score {float: right; border: solid # ccc 1px; height: 10px; width: 80px; margin: 5px; font-size: 30px ;} </style> </pead> <body> 0 original JS chain bubble v1.1 Original Author sunxing007 reprint please be sure to indicate from: http://blog.csdn.net/sunxing007 development environment: for the moment, IE8 does not consider compatibility </body> </ptml> <script type = "text/javascript"> /**************** **************************************** original JS chain bubble v1.1 * Original Author sunxing007 * reprinted 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 {// cache the background image document.exe cCommand ("BackgroundImageCache", false, true) for ie6;} catch (e) {alert (e )}; /*************************************** * ************** // system parameter // small bubble radius var little_radius = 7; // Radius of the bubble after explosion var big_radius = 30; // radius difference var delta_radius = big_radius-little_radius; // container width var container_width = 800; // container height var container_height = 600; // Four Directions for moving the defined bubble // [x, y] indicates the increment in the x direction and the increment in the y direction, the moving direction var direct = [[], [1,-1], [-], [-1,-1] is determined. // var chained_bubbles = []; // all bubbles facilitate management of 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 reference container: $ ('main'), // move bubble move: function () {if (chained_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 for consecutive Bubble Movement. Because setInterval, // is used, this function is used as the closure var _ f = function () {if (chained_bubbles.length> 0) {for (var I = 0; I <chained_bubbles.length; I ++) {if (this. crushed (chained_bubbles [I]) {this. explode (); Break ;}} var l = parseInt (this. element. style. left) + direct [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); // moving speed}, 10)}, // stop moving st Op: function () {clearInterval (this. timer) ;}, // The boundary check to see if the bubble has exceeded the 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;}, // change the direction of the bubble after hitting the wall changeDirect: function () {var _ l = parseInt (this. element. style. left); var _ t = parseInt (this. elemen T. style. top); for (var I = 1; I <= 4; I ++) {if (direct [this. dirIndex] [0] =-direct [(I + this. dirIndex) % 4] [0] & direct [this. 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 it has collided with another explosion bubble **/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) & pt [I] [1] <= (t + h) {return true ;}} return false ;}, // The burst 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 many objects involve mutual reference between objects. // you need to remove circular references in the destructor, to prevent memory leakage distroy: function () {if (this. timer) {clearInterval (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
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Reprint please be sure to indicate from: http://blog.csdn.net/sunxing007
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
