js實現消滅星星(web簡易版)
昨天看視頻之后，整理思路，自己完成了簡易版消滅星星
思路：
模塊1：初始化
初始化總分數、當前分數、背景圖、選擇的星星分數 初始化星星（生成二維數組，對二維數組的每一個對象設置樣式（長、寬、背景圖），生成二維數組個div元素節點插入到游戲面板中）模塊2：預判
判斷：
鼠標移動到某一個方塊，判斷上下左右是否有連接著的小方塊（采用遞歸方法），然后將其存儲到數組choose[]，移到其他方塊時，choose置為空
閃爍：
將已選中的小方塊設置樣式（縮放）
顯示選擇分數：
設置初始分數和遞增分數，根據選中的塊數算出選中的分數
模塊3：點擊
消失:
點擊已選中的小方塊，將連著的所有小方塊在二維數組的位置設置為空，清空choose數組
移動：
下移：設置一個指針，指向最下面的行。每當行+1，若遇到不為空的方塊，則pointer++,若遇到該列某行為空，則將pointer的行數設為i
左移：最底部的一行若有一列為空，將右邊的所有方塊的列-1
判斷：
每次點擊完成之后判斷游戲是否結束
代碼部分
html
html結構很簡單
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <script src='http://www.gepszalag.com/bcjs/index.js'></script> <link rel='stylesheet' href='http://www.gepszalag.com/bcjs/index.css' ></head><body> <div id='pop_star'> <div id='target_score'>目標分數：2000</div> <div id='now_score'>當前分數：0</div> <div id='select_score'>0塊 0分</div> </div></body></html>
CSS
css布局也很簡單，相信不用我來說
* { margin: 0px; padding: 0px; }html, body { height: 100%; width: 100%;}#pop_star { width: 500px; height: 100%; background: url('./pic/background.png'); margin-left: auto; margin-right: auto; position: relative; background-size: cover; font-size: 0px;}#target_score { width: 100%; height: 50px; line-height: 50px; text-align: center; color: white; font-size: 20px; position: relative;}#now_score { width: 100%; height: 50px; line-height: 50px; text-align: center; color: white; font-size: 20px; position: relative;}#select_score { width: 100%; height: 50px; line-height: 50px; text-align: center; color: white; font-size: 20px; position: relative; opacity: 0;}
JS
/* 創建二維數組 * * * */var table ;var suqareWidth = 50 ; //一個星星/方塊邊長var boardWidth = 10 ; //橫豎方塊個數var squareSet = [];//小方塊的集合，二維數組var choose = [];//有相鄰的小方塊，將其放到這個數組var timer = null ;var baseScore = 5 ;var stepScore = 10 ;var totalScore = 0 ;var targetScore = 1500;var flag = true ;var tempSquare = null;//在處理鼠標動作過程中，動作被屏蔽，導致事件處理完成，有不連貫現象function createSquare(value , row , col){ //創建小方塊節點 var blocks = document.createElement(’div’); //設置樣式 blocks.style.width = suqareWidth + ’px’; blocks.style.height = suqareWidth + ’px’; blocks.style.display = ’inline-block’; blocks.style.boxSizing = ’border-box’; blocks.style.position = ’absolute’; blocks.style.borderRadius = '12px'; //小方塊的行和列，小方塊的num.jpg blocks.num = value ; blocks.row = row ; blocks.col = col ; return blocks;}function refresh(){ for(var i = 0 ; i < squareSet.length ; i ++){ for (var j = 0 ; j < squareSet[i].length ; j++) { //嚴謹判斷 if (squareSet[i][j] == null) { continue; } //將二維數組里面的小方塊對應面板的行和列顯示 squareSet[i][j].row = i; squareSet[i][j].col = j; //列*方塊長度 squareSet[i][j].style.transition = 'left 0.3s, bottom 0.3s'; squareSet[i][j].style.left = squareSet[i][j].col * suqareWidth + ’px’; squareSet[i][j].style.bottom = squareSet[i][j].row * suqareWidth + ’px’; //背景圖 squareSet[i][j].style.backgroundImage = 'url(’img/' + squareSet[i][j].num + '.png’)'; squareSet[i][j].style.backgroundSize = ’cover’; squareSet[i][j].style.transform = ’scale(0.95)’;//是圖片縮小至原來的0.95倍 } }}function checkLinked(square , arr){ //嚴謹判斷 if(square == null){ return; } //添加小方塊到arr arr.push(square); /* 判斷位于該小方塊左邊的小方格是否能被收錄進選擇數組 1.小方格不能是最左邊的 2.小方格左邊必須有小方塊 3.小方塊左邊的要和該小方塊顏色相同 4.該小方塊左邊沒有被收錄到數組中去 5.遞歸 * * */ //向左 if(square.col > 0 && squareSet[square.row][square.col - 1] && squareSet[square.row][square.col - 1].num == square.num && arr.indexOf(squareSet[square.row][square.col - 1]) == -1){ checkLinked(squareSet[square.row][square.col - 1] , arr); } //向右 if(square.col < boardWidth - 1 && squareSet[square.row][square.col + 1] && squareSet[square.row][square.col + 1].num == square.num && arr.indexOf(squareSet[square.row][square.col + 1]) == -1){ checkLinked(squareSet[square.row][square.col + 1] , arr); } //向上 if(square.row < boardWidth - 1 && squareSet[square.row + 1][square.col ] && squareSet[square.row + 1][square.col].num == square.num && arr.indexOf(squareSet[square.row + 1][square.col ]) == -1){ checkLinked(squareSet[square.row + 1][square.col] , arr); } //向上 if(square.row > 0 && squareSet[square.row - 1][square.col] && squareSet[square.row - 1][square.col].num == square.num && arr.indexOf(squareSet[square.row - 1][square.col]) == -1){ checkLinked(squareSet[square.row - 1][square.col] , arr); }}//讓選中的小方塊閃爍function flicker(arr){ var num = 0 ; //設置計時器，讓其一之閃爍 timer = setInterval(function(){ for (var i = 0 ; i < arr.length ; i++) { //設置縮放樣式 arr[i].style.border = '3px solid #BFEFFF'; arr[i].style.transform = 'scale('+(0.9 + 0.05 *Math.pow(-1 , num))+')'; } //小方塊閃爍完成之后num++,使其再次縮放 num++; },300);}function back(){ //若計時器還存在，清楚計數器 if(timer != null){ clearInterval(timer); } //返回原樣式 for(var i = 0 ; i < squareSet.length ; i++){ for(var j = 0 ; j < squareSet[i].length ; j++){ //嚴謹判斷 if (squareSet[i][j] == null) { continue; } squareSet[i][j].style.border = '0px solid #BFEFFF'; squareSet[i][j].style.transform = 'scale(0.95)'; } } }//選中分數function selectScore(){ var socre = 0 ; //遍歷choose for(var i = 0 ; i < choose.length ; i++){ socre += baseScore + stepScore * i ; } //嚴謹判斷 if (socre <= 0) { return ; } //設置select_score的樣式 var select_score = document.getElementById(’select_score’); select_score.innerHTML = choose.length + '塊' + socre + '分'; select_score.style.transition = null ; //設置透明度，讓其突然顯示 select_score.style.opacity = 1 ; //讓其逐漸消失 setTimeout(function(){ select_score.style.transition = ’opacity 1s’; select_score.style.opacity = 0; },1000); }//鼠標移動到該小方塊時，閃爍function mouseOver(obj){ //當鼠標在移動到該方塊突然移動到其他位置時 if(!flag){ tempSquare = obj; return ; } //當鼠標移開選中的方塊之后，讓其回到原來的樣式 back(); //選擇相鄰相同的小方格 //傳一個數組 choose = []; checkLinked(obj , choose);//obj是當前鼠標移到的小方塊，choose是存儲響鈴小方塊的數組 if (choose.length <= 1) { choose = [] ; return; } //將選中的設置樣式，讓其閃爍 flicker(choose); //顯示所選中的小方塊的分數 selectScore();}function move(){ /* 1.設置一個指針，開始的時候指針指向最下面一行 2.此時指針和j是否一樣，一樣都++。 3.若改行該列該列有小方塊，均++，反之j++,pointer不變，循環判斷該條件 3.當j移動到該列某行的小方塊，該小方塊存在，則將j指向的小方塊的位置設置為指針指向的那一個小方塊的位置 * */ //向下移動 for (var i = 0 ; i < boardWidth ; i ++) { var pointer = 0;//pointer指向小方塊，當遇到null的時候停止，等待上面的小方塊落到這里來 for (var j = 0 ; j < boardWidth ; j ++) { if (squareSet[j][i] != null) { if (j != pointer) { squareSet[pointer][i] = squareSet[j][i]; squareSet[j][i].row = pointer; squareSet[j][i] = null; } pointer ++; } } } //橫向移動 for (var i = 0 ; i < squareSet[0].length ; ) { if (squareSet[0][i] == null) { for (var j = 0 ; j < boardWidth ; j ++) { squareSet[j].splice(i, 1); } continue; } i ++; } refresh();}function isFinish(){ for (var i = 0 ; i < squareSet.length ; i++) { for (var j = 0 ; j < squareSet[i].length ; j++) { //判斷周圍是否還有可消除的方塊 var temp = []; checkLinked(squareSet[i][j] , temp); if(temp.length > 1){ return false ; } } } return true;}function init(){ //獲取面板 table = document.getElementById(’pop_star’); //創建二維數組 for(var i = 0 ; i < boardWidth ; i++){ squareSet[i] = new Array(); for(var j = 0 ; j < boardWidth; j++){ //創建小方塊 var square = createSquare(Math.floor(Math.random() * 5), i, j); //鼠標移動到該方塊 square.onmouseover = function(){ mouseOver(this); } //點擊小方塊時的操作 square.onclick = function(){ //小方塊在被點擊的時候其他操作不能影響他的執行 if(choose.length == 0 || !flag ){ return ; } flag = false; tempSquare = null ; /* 1.增加當前分數 2.小方塊消失 3.向下或想做移動 4.判斷游戲是否結束 */ var socre = 0 ; //遍歷choose for(var i = 0 ; i < choose.length ; i++){ socre += baseScore + stepScore * i ; } totalScore += socre ;//總分數 //改變樣式 document.getElementById(’now_score’).innerHTML = ’當前分數：’ + totalScore; //小方塊消失 /* 1.從二維數組里面移除選擇了的小方塊 2.在面板上移除div，不然div會一直占著格子 * */ for(var i = 0 ; i < choose.length ; i++){ //立即函數，立即出發該函數，否則的話，不會執行 (function(i){ setTimeout(function(){ //將二維數組的某一值設置為空，后面的會向前移 squareSet[choose[i].row][choose[i].col] = null ; //移除div table.removeChild(choose[i]); },i * 100); })(i); } //移動 setTimeout(function(){ move(); setTimeout(function(){ var finished = isFinish(); if(finished){ if (totalScore >= targetScore) { alert(’闖關成功’); } else{ alert(’闖關失敗’); } }else{//還可以繼續 choose = [] ; flag = true; mouseOver(tempSquare); } } , 300 + choose.length * 150); },choose.length * 100); } //將小方塊放進二維數組 squareSet[i][j] = square; //將創建好的小方塊插入到面板中 table.appendChild(square); } } //顯示小星星，刷新整個面板 refresh();}//頁面加載完成之后，初始化所有操作window.onload = function(){ init();}
其實這里還有優化的就是闖關部分，大致的思路就是，游戲每過一關增加目標分數，當游戲結束時，闖關失敗，目標分數恢復初始值。
大家有什么不懂，可以在評論區評論。
jq進階版的源碼詳情見我github，網址
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備