js實現(xiàn)消滅星星(web簡易版)-創(chuàng)新互聯(lián)

昨天看視頻之后，整理思路，自己完成了簡易版消滅星星

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網(wǎng)站建設、成都網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的勐海網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

思路：

模塊1：初始化

初始化總分數(shù)、當前分數(shù)、背景圖、選擇的星星分數(shù)
初始化星星（生成二維數(shù)組，對二維數(shù)組的每一個對象設置樣式（長、寬、背景圖），生成二維數(shù)組個div元素節(jié)點插入到游戲面板中）

模塊2：預判

判斷：

鼠標移動到某一個方塊，判斷上下左右是否有連接著的小方塊（采用遞歸方法），然后將其存儲到數(shù)組choose[]，移到其他方塊時，choose置為空

閃爍：

將已選中的小方塊設置樣式（縮放）

顯示選擇分數(shù)：

設置初始分數(shù)和遞增分數(shù)，根據(jù)選中的塊數(shù)算出選中的分數(shù)

模塊3：點擊

消失:

點擊已選中的小方塊，將連著的所有小方塊在二維數(shù)組的位置設置為空，清空choose數(shù)組

移動：

下移：設置一個指針，指向最下面的行。每當行+1，若遇到不為空的方塊，則pointer++,若遇到該列某行為空，則將pointer的行數(shù)設為i

左移：最底部的一行若有一列為空，將右邊的所有方塊的列-1

判斷：

每次點擊完成之后判斷游戲是否結束

代碼部分

html

html結構很簡單

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="./index.js"></script>
 <link rel="stylesheet" href="index.css" >
</head>
<body>
 <div id="pop_star">
 <div id="target_score">目標分數(shù)：2000</div>
 <div id="now_score">當前分數(shù)：0</div>
 <div id="select_score">0塊 0分</div>
 </div>
</body>
</html>

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章題目：js實現(xiàn)消滅星星(web簡易版)-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://muchs.cn/article8/csjcip.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、App設計、域名注冊、小程序開發(fā)、做網(wǎng)站、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容