前段时间看见园子里有同学用js+jquery实现了消星星游戏，自己也早有这个想法，于是就利用业余时间用js+html5实现了一下消星星游戏。
主要是想实现效果，运用了css3中的动画属性。游戏积分算法是随便写的，所以玩起来难度不高。
由于时间仓促，代码上还有一些冗余，还可以进一步优化。等以后有时间吧。
上代码：
<!doctype html> <html> <head> <title></title> <style> #box{height:600px;width:600px;margin:20px auto;border:2px solid #123;position:relative;} #box div{position:absolute;height:58px;width:58px;border:1px solid #fff;border-radius:4px;transition:all linear 0.25s 0s;-moz-transition:all linear 0.25s 0s;} [r="1"]{top:540px;} [r="2"]{top:480px;} [r="3"]{top:420px;} [r="4"]{top:360px;} [r="5"]{top:300px;} [r="6"]{top:240px;} [r="7"]{top:180px;} [r="8"]{top:120px;} [r="9"]{top:60px;} [r="10"]{top:0px;} [c="1"]{left:0px} [c="2"]{left:60px} [c="3"]{left:120px} [c="4"]{left:180px} [c="5"]{left:240px} [c="6"]{left:300px} [c="7"]{left:360px} [c="8"]{left:420px} [c="9"]{left:480px} [c="10"]{left:540px} #box div[s="s"]{border-color:red;} .red { background-color: rgba(255, 0, 0, 0.5); } .green { background-color: rgba(0, 255, 0, 0.5); } .blue { background-color: rgba(0, 0, 255, 0.5); } .yellow { background-color: rgba(255, 255, 0, 0.5); } .lightblue { background-color: rgba(0, 255, 255, 0.5); } </style> </head> <body> <div id="title"> </div> <div id="msg"> </div> <div id="box"> </div> <script> Array.prototype.has_item = function(item){ for(var i=0,l=this.length;i<l;i++){ //if(d == true) console.log(item,this[i],item == this[i]); if(item == this[i]){ return true; } } return false; } !function(){ var stage = 0, stage_target = 0, score = 0, selected_color = null, selected_stars = [], colors = ['red','green','blue','yellow','lightblue'], box = $('box'); if(box === null) return false; init(); function $(id){ return document.getElementById(id) ? document.getElementById(id) : null; } // 页面初始化函数 function init(){ stage++; if(stage == 1){ stage_target = 1000; }else{ stage_target = stage_target + 2000; } $('title').innerHTML = "stage:"+stage+";target:"+stage_target; var frag = document.createDocumentFragment(); for(var r=1;r<=10;r++){ for(var c=1;c<=10;c++){ var color = colors[Math.floor(Math.random() * 5)]; var div = document.createElement('div'); div.id = r+'_'+c; div.setAttribute('r',r); div.setAttribute('c',c); div.className = color; div.onclick = click_star; frag.appendChild(div); } } box.appendChild(frag); } // 单机星星事件函数 function click_star(){ if(selected_stars.length == 0 || !selected_stars.has_item(this)){ clear_selected(); select_stars(this); }else if(selected_stars.length > 1){ pop_selected(); clear_selected(); after_pop(); check_single(); } } // 首次单击时选中相同颜色相邻星星 function select_stars(current_star){ if(current_star.getAttribute('s') == 's') return; current_star.setAttribute('s','s'); selected_color = current_star.className; selected_stars.push(current_star); var r = parseInt(current_star.getAttribute('r')), c = parseInt(current_star.getAttribute('c')), t_star = {}, r_star = {}, b_star = {}, l_star = {}; var all_stars = $('box').getElementsByTagName('div'); for(var i=0,l=all_stars.length;i<l;i++){ if(all_stars[i].getAttribute('r') == r+1 && all_stars[i].getAttribute('c') == c){ t_star = all_stars[i]; }else if(all_stars[i].getAttribute('r') == r && all_stars[i].getAttribute('c') == c+1){ r_star = all_stars[i]; }else if(all_stars[i].getAttribute('r') == r-1 && all_stars[i].getAttribute('c') == c){ b_star = all_stars[i]; }else if(all_stars[i].getAttribute('r') == r && all_stars[i].getAttribute('c') == c-1){ l_star = all_stars[i]; } } if(t_star.className == selected_color){ select_stars(t_star); } if(r_star.className == selected_color){ select_stars(r_star); } if(b_star.className == selected_color){ select_stars(b_star); } if(l_star.className == selected_color){ select_stars(l_star); } } // 取消已选中星星状态 function clear_selected(){ selected_stars = []; var all_stars = $('box').getElementsByTagName('div'); for(var i=0,l=all_stars.length;i<l;i++){ all_stars[i].setAttribute('s',''); } } // 消掉已选中星星 function pop_selected(){ for(var i=0,l=selected_stars.length;i<l;i++){ selected_stars[i].parentNode.removeChild(selected_stars[i]); } score += 5 * l * l; $('msg').innerHTML = 'score:'+score; } // 一次消星星动作完成以后的回调函数，用来填补已消掉星星空出来的空白 function after_pop(){ var all_stars = $('box').getElementsByTagName('div'); var not_exist_c = [1,2,3,4,5,6,7,8,9,10]; for(var i=0,l=all_stars.length;i<l;i++){ var r = all_stars[i].getAttribute('r'); var c = parseInt(all_stars[i].getAttribute('c')); //console.log('======='+c+'======='); if(not_exist_c.has_item(c)){ not_exist_c.splice(c-1,1,null); } if(r > 1){ after_pop_d(all_stars[i],r-1,c); } } //console.log(not_exist_c); for(var i=9;i>=0;i--){ if(not_exist_c[i] == null){ not_exist_c.splice(i,1); } } after_pop_l(not_exist_c.reverse()); } // 消星星以后被消星星上面的星星向下移动，填补空白 function after_pop_d(star,r,c){ if(document.getElementById(r+'_'+c)){ return; }else{ star.setAttribute('r',r); star.id=r+'_'+c; if(r > 1){ after_pop_d(star,r-1,c) } } } // 消星星以后被如果出现空列，空列右侧的列向左移动，填补空白列 function after_pop_l(not_exist_c){ for(var i=0,l=not_exist_c.length;i<l;i++){ var all_stars = $('box').getElementsByTagName('div'); for(var j=0,n=all_stars.length;j<n;j++){ var c = all_stars[j].getAttribute('c'); var r = all_stars[j].getAttribute('r'); if(c > not_exist_c[i]){ c--; all_stars[j].setAttribute('c',c); all_stars[j].id = r+'_'+c; } } } } // function check_single(){ if(selected_stars.length>1) return; var all_stars = $('box').getElementsByTagName('div'); for(var i=0,l=all_stars.length;i<l;i++){ clear_selected(); select_stars(all_stars[i]); //console.log(selected_stars); if(selected_stars.length>1){ clear_selected(); return true; } } setTimeout( function(){ clear_star(); if(stage_target>score){ box.innerHTML = "game over!"; return false; } init(); }, 2000 ); } // function clear_star(){ box.innerHTML = ''; } }(window); </script> </body> </html>