二十一天——打卡第四天

昨天寫了一部分不踩白塊的代碼，今天繼續完善，

游戲開始的控制：點擊 游戲開始 游戲才進行 點擊kuai外面或者kuai掉下去后游戲結束彈出重新開始和游戲結束畫面，

即給menu添加點擊事件，點擊

即kuai開始往下掉

function begin_game() {			
					var menu=document.querySelector('.menu');
					var menuChildren=menu.children;
					menuChildren[0].onclick=function() { //點擊開始游戲后menu就隱藏
						this.style.display='none';
						if(menuChildren.length>1) menu.removeChild(menuChildren[menuChildren.length-1]);
						clear_all_kuai();    //清除現存的所有的kuai
						count_grade1(-1);    //計分函式
						kuai_down();        //kuai下落函式
					}
				}

接著是計分：每完成點擊加一分

就給每一個kuai添加點擊事件，當且僅當點擊第一個時count加一分

function count_grade1(a) {            //計分函式
					var count=document.querySelector('.count');
					count.innerHTML=a+1+'分';
				};


function clickkuai(kuaiAll) {    
					kuaiAll[0].onclick=function(e) {        // 點擊消除塊并加分
						e.stopPropagation();
						var kuang=document.querySelector('.kuang');
						var count_grade=document.querySelector('.count').innerHTML;
						kuang.removeChild(kuaiAll[0]);
						count_grade1(parseInt(count_grade.substr(0,count_grade.length-1)));//計分函式
					}
					for(var i=1;i<kuaiAll.length-1;i++) {
						kuaiAll[i].onclick=function(e){
							e.stopPropagation();
						}
					}
				}

parseInt()是將字符型轉換成整型，substr()是截取字串函式，

下面是完整的js代碼，運用定時器讓kuai沒秒增加其初始下落速度的0.1倍，

				// 得到小方塊
				function getkuai(){
					var kuang=document.querySelector('.kuang');
					var kuai=document.createElement('div');
					var num1=Math.floor(Math.random()*4);
					var kuai_color=['white','black','yellow','blue'];
					var num2=Math.floor(Math.random()*4);
					kuang.appendChild(kuai);
					kuai.className="kuai";
					kuai.style.backgroundColor=kuai_color[num2];
					kuai.style.left=kuai.offsetWidth*num1 + 'px';
					kuai.style.top= -kuai.offsetHeight + 1 + 'px';
				}
				
				// 結束游戲
				
				function over_window(a){
						
						var menu=document.querySelector('.menu');
						var over_game_div=document.createElement('div');
						over_game_div.innerHTML='游戲結束';
						menu.children[0].style.display='block';
						menu.children[0].innerHTML='重新開始';
						menu.appendChild(over_game_div);
						clearInterval(a);
						a=null;
				}
				
				function over_game(a) {
					var kuai=document.querySelector('.kuai');
					var kuang=document.querySelector('.kuang');
					
					if(kuai.offsetTop>=kuang.offsetHeight) {					
						over_window(a);
					}
					kuang.onclick=function() {
						var menu_second=document.querySelector('.menu').children[1];
						if(menu_second==null) over_window(a);
					}					
				}
				
				
				// 清除所有的小方塊
				
				function clear_all_kuai() {
					var kuaiAll=document.querySelectorAll('.kuai');
					var kuang=document.querySelector('.kuang');
					for(var i=0;i<kuaiAll.length-1;i++)
						kuang.removeChild(kuaiAll[i]);
				};
				
				
				
				// 計分
				
				function count_grade1(a) {
					var count=document.querySelector('.count');
					count.innerHTML=a+1+'分';
				};
				
				
				// 點擊消除塊
				
				function clickkuai(kuaiAll) {
					kuaiAll[0].onclick=function(e) {
						e.stopPropagation();
						var kuang=document.querySelector('.kuang');
						var count_grade=document.querySelector('.count').innerHTML;
						kuang.removeChild(kuaiAll[0]);
						count_grade1(parseInt(count_grade.substr(0,count_grade.length-1)));
					}
					for(var i=1;i<kuaiAll.length-1;i++) {
						kuaiAll[i].onclick=function(e){
							e.stopPropagation();
						}
					}
				}
				
				
				
				// 開始游戲
				function begin_game() {			
					var menu=document.querySelector('.menu');
					var menuChildren=menu.children;
					menuChildren[0].onclick=function() {
						this.style.display='none';
						if(menuChildren.length>1) menu.removeChild(menuChildren[menuChildren.length-1]);
						clear_all_kuai();
						count_grade1(-1);
						kuai_down();
					}
				}
				
				
				// 小方塊下落
				
				
				function kuai_down() {
					//getkuai();
					var count_time=0;
					var x=1;
					var time_down=setInterval(function(){
					var kuaiAll=document.querySelectorAll('.kuai');
					if(count_time>1000) {
						count_time=0;
						x=x+0.1;
					}
					else ++count_time;
					for(var i=0;i<kuaiAll.length;i++) {
						kuaiAll[i].style.top=kuaiAll[i].offsetTop + x + 'px';
						clickkuai(kuaiAll);
					}
					if(kuaiAll.length==0) getkuai();
					if(kuaiAll[kuaiAll.length-1].offsetTop>=0) getkuai();
					over_game(time_down);
					},1)
				}
				
				begin_game();