日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

開發(fā)網(wǎng)頁游戲需要多少錢 怎么開發(fā)網(wǎng)頁游戲

云知道


開發(fā)網(wǎng)頁游戲需要多少錢 怎么開發(fā)網(wǎng)頁游戲


上篇文章我們完成了基礎(chǔ)項(xiàng)目搭建，童鞋們都跟著教程完成了嗎？沒完成的童鞋們可以閱讀上篇文章，先搭建好基礎(chǔ)項(xiàng)目；這篇文章我們來完成頁面基礎(chǔ)布局的開發(fā) 。
先給大家看下本篇文章我們實(shí)現(xiàn)的界面，如下圖所示：
首先，在components文件夾創(chuàng)建10個(gè)文件夾，分別是：2048，llk，maze，mine，pintu，snake，sudoku，tetris，wzq，xxk；然后，再創(chuàng)建一個(gè)index.js文件；然后，在剛才創(chuàng)建的10個(gè)文件夾中分別創(chuàng)建一個(gè)Index.vue文件，該文件的內(nèi)容類似這樣如下代碼，其中2048是所屬文件夾名字，目前該代碼僅用于占位，以后將被我們真正可玩的游戲取代 。
<template>
<div>
2048
</div>
</template>
<script setup>
</script>
<style lang="scss">
</style>
現(xiàn)在，我們在components文件夾下的index.js文件中寫下如下代碼，代碼都很簡單，童鞋們都能看懂吧？我在JS中喜歡使用文檔注釋，文檔注釋可以使編輯器的語法提示更智能，編寫代碼不易出錯(cuò)，對文檔注釋不熟悉的童鞋們可以搜索一下jsdoc，學(xué)習(xí)一下文檔注釋的語法；下面的文檔注釋都添加了描述，希望童鞋們都能理解 。
/**
* @typedef Game 定義一個(gè)類型，我們叫它游戲類型
* @property {string} name 聲明一個(gè)屬性name，游戲的名字
* @property {import('vue').AsyncComponentLoader} component 異步組件加載器
*/
/** @type {object.<string, Game>} 聲明類型一個(gè)對象類型，屬性名為字符串，值為游戲類型 */
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ù)獨(dú)',
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 聲明一個(gè)參數(shù)：游戲ID
* @returns {Game} 聲明返回值類型：游戲
*/
export const getGame = id => gameMap[id]
現(xiàn)在，我們在src文件夾創(chuàng)建一個(gè)文件夾layouts，該文件夾用于存放布局組件，我們在該文件夾創(chuàng)建一個(gè)Main.vue文件，該組件定義了2個(gè)prop：title用于定義頭部顯示的標(biāo)題，hasBack用于定義是否包含返回按鈕，我們在main標(biāo)簽下定義了一個(gè)slot插槽，該插槽用于渲染游戲；本系列教程重點(diǎn)是JS部分，HTML和CSS都比較簡單，我假裝童鞋們都懂，就不多講了；該文件源碼如下：
<template>
<div :class="cls">
<header :class="`${cls}_header`">
<span v-if="hasBack" :class="`${cls}_btn-back`" @click="goBack">< 后退</span>
<div :class="`${cls}_title`">{{ title }}</div>

推薦閱讀