小说阅读网站,有声小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

H5小游戲開發(fā)教程之頁面基礎(chǔ)布局的開發(fā)

這篇文章我們來完成頁面基礎(chǔ)布局的開發(fā)。

創(chuàng)新互聯(lián)長期為上千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為佛坪企業(yè)提供專業(yè)的成都網(wǎng)站制作、成都做網(wǎng)站，佛坪網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

先給大家看下本篇文章我們實現(xiàn)的界面，如下圖所示：

首先，在components文件夾創(chuàng)建10個文件夾，分別是：2048，llk，maze，mine，pintu，snake，sudoku，tetris，wzq，xxk;然后，再創(chuàng)建一個index.js文件;然后，在剛才創(chuàng)建的10個文件夾中分別創(chuàng)建一個Index.vue文件，該文件的內(nèi)容類似這樣如下代碼，其中2048是所屬文件夾名字，目前該代碼僅用于占位，以后將被我們真正可玩的游戲取代。

現(xiàn)在，我們在components文件夾下的index.js文件中寫下如下代碼，代碼都很簡單，童鞋們都能看懂吧?我在JS中喜歡使用文檔注釋，文檔注釋可以使編輯器的語法提示更智能，編寫代碼不易出錯，對文檔注釋不熟悉的童鞋們可以頭條搜索一下jsdoc，學(xué)習(xí)一下文檔注釋的語法;下面的文檔注釋都添加了描述，希望童鞋們都能理解。

/**
 * @typedef Game 定義一個類型，我們叫它游戲類型
 * @property {string} name 聲明一個屬性name，游戲的名字
 * @property {import('vue').AsyncComponentLoader} component 異步組件加載器
 */
/** @type {object.} 聲明類型一個對象類型，屬性名為字符串，值為游戲類型 */
export const gameMap = {
  2048: {
    name: '2048',
    component: () => import('./2048/Index.vue')
  },
  llk: {
    name: '連連看',
    component: () => import('./llk/Index.vue')
  },
  maze: {
    name: '走出迷宮',
    component: () => import('./maze/Index.vue')
  },
  mine: {
    name: '掃雷',
    component: () => import('./mine/Index.vue')
  },
  pintu: {
    name: '拼圖',
    component: () => import('./pintu/Index.vue')
  },
  snake: {
    name: '貪吃蛇',
    component: () => import('./snake/Index.vue')
  },
  sudoku: {
    name: '數(shù)獨',
    component: () => import('./sudoku/Index.vue')
  },
  tetris: {
    name: '俄羅斯方塊',
    component: () => import('./tetris/Index.vue')
  },
  wzq: {
    name: '五子棋',
    component: () => import('./wzq/Index.vue')
  },
  xxk: {
    name: '消消看',
    component: () => import('./xxk/Index.vue')
  }
}
/**
 * @param {string} id 聲明一個參數(shù)：游戲ID
 * @returns {Game} 聲明返回值類型：游戲
 */
export const getGame = id => gameMap[id]

現(xiàn)在，我們在src文件夾創(chuàng)建一個文件夾layouts，該文件夾用于存放布局組件，我們在該文件夾創(chuàng)建一個Main.vue文件，該組件定義了2個prop：title用于定義頭部顯示的標(biāo)題，hasBack用于定義是否包含返回按鈕，我們在main標(biāo)簽下定義了一個slot插槽，該插槽用于渲染游戲;本系列教程重點是JS部分，HTML和CSS都比較簡單，我假裝童鞋們都懂，就不多講了;該文件源碼如下：

然后，我們打開views文件夾下的Home.vue文件，替換為如下代碼：

然后，打開views文件夾下的Game.vue文件，替換為如下代碼。在Vue3中，component組件的is屬性如果綁定的值為異步組件，則必須將異步組件加載器傳入defineAsyncComponent函數(shù)，將defineAsyncComponent函數(shù)的返回值綁定到is屬性，否則，直接綁定異步組件加載器的話，將什么都渲染不出來，而且還會拋出警告;在該路由組件中，我們通過路由參數(shù)id來渲染不同的游戲;

感謝閱讀!以上就是我們本篇文章的全部內(nèi)容，這些代碼是不是很簡單呢?童鞋們閱讀起來是不是很輕松?

網(wǎng)頁名稱：H5小游戲開發(fā)教程之頁面基礎(chǔ)布局的開發(fā)
URL鏈接：http://m.fisionsoft.com.cn/article/cojsscc.html

新聞中心

其他資訊