智游網(wǎng)項目分析 省賽獲獎

《物聯(lián)網(wǎng)Web前端開發(fā)基礎(chǔ)》課程

智游網(wǎng)項目分析【任務(wù)9-8】智游網(wǎng)頁面開發(fā)項目介紹頁面效果：（不含游戲部分）【任務(wù)9-8】智游網(wǎng)頁面開發(fā)準(zhǔn)備工作使用VSCode編輯器創(chuàng)建一個新項目，從完整源代碼中將images圖片素材目錄復(fù)制到這個新項目中。分析一下頁面結(jié)構(gòu)，頁面從上到下一共分為4部分?！救蝿?wù)9-8】智游網(wǎng)頁面開發(fā)準(zhǔn)備工作【任務(wù)9-8】智游網(wǎng)頁面開發(fā)頂部導(dǎo)航在結(jié)構(gòu)圖中，頂部導(dǎo)航整體是一個通欄，在通欄內(nèi)有個container布局容器，用于限定內(nèi)容寬度為1000px，在容器內(nèi)放左、右兩個鏈接區(qū)域。【任務(wù)9-8】智游網(wǎng)頁面開發(fā)頂部導(dǎo)航動手編寫代碼，完成頂部導(dǎo)航的開發(fā)?！救蝿?wù)9-8】智游網(wǎng)頁面開發(fā)頭部區(qū)域分析頭部區(qū)域的組成部分。頭部區(qū)域分為左、右兩部分，左邊是網(wǎng)站LOGO，右邊有一個搜索框。頭部區(qū)域整體是一個通欄，內(nèi)容放在container容器中，網(wǎng)站LOGO和搜索框分布在容器內(nèi)的左右兩邊?！救蝿?wù)9-8】智游網(wǎng)頁面開發(fā)頭部區(qū)域動手編寫代碼，完成頭部導(dǎo)航的開發(fā)。【任務(wù)9-8】智游網(wǎng)頁面開發(fā)頭部區(qū)域主體區(qū)域分為左右兩部分，左側(cè)顯示2048的游戲畫面，右側(cè)是相關(guān)游戲推薦。左側(cè)的2048游戲，我們將在后面的任務(wù)中完成，本節(jié)先完成右側(cè)的相關(guān)游戲推薦。【任務(wù)9-8】智游網(wǎng)頁面開發(fā)頭部區(qū)域動手編寫代碼，完成主體區(qū)域的開發(fā)?！救蝿?wù)9-8】智游網(wǎng)頁面開發(fā)底部區(qū)域?qū)Φ撞繀^(qū)域的頁面效果進(jìn)行分析。底部區(qū)域整體是一個通欄，通欄里有個container容器，用于包裹內(nèi)容。底部區(qū)域的內(nèi)容分為上下兩部分，上部分是友情鏈接，下部分是網(wǎng)站的信息和提示語?！救蝿?wù)9-8】智游網(wǎng)頁面開發(fā)底部區(qū)域動手編寫代碼，完成底部區(qū)域的開發(fā)。【任務(wù)9-9】智游網(wǎng)游戲開發(fā)需求分析按鍵盤的上（↑）、下（↓）、左（←）、右（→）控制數(shù)字的移動。

每移動一次，所有的數(shù)字方塊都會往移動的方向靠攏，然后系統(tǒng)會在空白的地方隨機出現(xiàn)一個數(shù)字（2或4）方塊。

相同數(shù)字的方塊在移動的過程中會疊加，通過不斷的疊加，最終拼湊出2048這個數(shù)字就算成功?！救蝿?wù)9-9】智游網(wǎng)游戲開發(fā)需求分析【任務(wù)9-9】智游網(wǎng)游戲開發(fā)需求分析游戲界面構(gòu)成2048游戲頁面是由標(biāo)題、分?jǐn)?shù)和游戲操作區(qū)組成。

游戲操作區(qū)是由4×4的棋盤格子和數(shù)字格組成。

數(shù)字格是由數(shù)字和背景色格子組成。

數(shù)字的顏色有黑色和白色。

數(shù)字格的背景色，根據(jù)數(shù)字值的不同而不同。

游戲結(jié)束時的頁面由提示信息（文字和分?jǐn)?shù)）和“重新開始”按鈕組成。【任務(wù)9-9】智游網(wǎng)游戲開發(fā)需求分析游戲規(guī)則游戲操作鍵為：上（↑）下（↓）左（←）右（→）。數(shù)字格子移動的條件是，當(dāng)操作方向的其他格子是空或相鄰兩個格子的數(shù)值相同時才可以移動。

值相同的數(shù)字格子疊加后，在分?jǐn)?shù)區(qū)域顯示對應(yīng)分值（相同數(shù)值的累加值）。當(dāng)玩家成功疊加出2048的數(shù)字格子后，游戲就算順利通關(guān)了。當(dāng)數(shù)字填滿所有格子，并且相鄰的格子也無法移動的話，游戲結(jié)束?！救蝿?wù)9-9】智游網(wǎng)游戲開發(fā)需求分析涉及的相關(guān)技術(shù)游戲界面的設(shè)計：HTML和CSS。

游戲的功能實現(xiàn)：JavaScript和jQuer