거품의 움직임, 충돌, 사라지는 현상이 모두 완료되었습니다. 글을 많이 쓸수록 게임 관련 내용(예: 게임에 몇 개의 레벨이 있는지, 레벨을 통과하기 위해 얼마나 많은 거품이 깨졌는지). 클로저는 여러 곳에서 setInterval을 수정하는 데 사용되기 때문에 관심 있는 친구들은 이 글을 읽을 수 있습니다(이 기능은 상대적으로 저렴합니다). 객체 지향적이며 주석은 비교적 완벽합니다. <title>원래 JS 체인 버블 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; /**使显示的分数居中**/ 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> <div id="main"> <div id="score">0</div> </div> <div id="info"> 원본 JS 체인 버블 v1.1 원저자 sunxing007 재인쇄시 반드시 출처를 밝혀주세요. <a href="http://blog.csdn.net/sunxing007">http://blog.csdn.net/sunxing007</a> 개발 환경: IE8은 당분간 호환성을 고려하지 않습니다. </div> [Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ] /******************************************************* * 原创JS连锁泡泡 v1.1 * 原创作者 sunxing007 * 转载请务必注明来自：http://blog.csdn.net/sunxing007 *******************************************************/ var doc = document; function $(id){return doc.getElementById(id)}; var container = $('main'); var score_ele = $('score'); try{ //针对ie6缓存背景图 document.execCommand("BackgroundImageCache", false, true); }catch(e){alert(e)}; /*******************************************************/ //系统参数 //小泡泡半径 var little_radius = 7; //爆炸后的泡泡半径 var big_radius = 30; //半径差 var delta_radius = big_radius - little_radius; //容器宽度 var container_width = 800; //容器高度 var container_height = 600; //与定义的泡泡移动的4个方向 //[x,y]代表x方向的增量和y方向的增量，也就确定了移动方向 var direct = [[1,1],[1,-1],[-1,1],[-1,-1]]; //爆炸后的泡泡集合 var chained_bubbles = []; //所有的泡泡 方便管理 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: $('main'), //移动泡泡 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; //连续移动泡泡的函数，因为要用到setInterval, //所以这个函数作成闭包 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); //移动速度 }, 10) }, //停止移动 stop: function(){ clearInterval(this.timer); }, //边界检查 看泡泡有没有超出容器 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); 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[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; } } }, //泡泡爆炸 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); }, /**是否和另外一个已经爆炸的泡泡碰撞了**/ 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; }, //爆炸的泡泡逐渐消失 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); }, //析构方法 因为对象中很多地方涉及对象相互引用 //需要在析构函数中消除环形引用，以防内存泄露 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<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); } } //工厂方法 创造泡泡 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(); /******************************************************* * 原创JS连锁泡泡 v1.1 * 原创作者 sunxing007 * 转载请务必注明来自：http://blog.csdn.net/sunxing007 *******************************************************/ 부탁드립니다 재인쇄시 반드시 출처를 밝혀주세요 ：http://blog.csdn.net/sunxing007
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
