激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢(xún)電話(huà)：400-810-1418 服務(wù)與監(jiān)督電話(huà)：400-810-1418轉(zhuǎn)接2

h5游戲 開(kāi)發(fā)(H5小游戲開(kāi)發(fā)教程之基礎(chǔ)項(xiàng)目搭建)

發(fā)布時(shí)間：2023-11-27 14:18:44 瀏覽量：124次

?H5小游戲開(kāi)發(fā)教程之基礎(chǔ)項(xiàng)目搭建

h5游戲 開(kāi)發(fā)(H5小游戲開(kāi)發(fā)教程之基礎(chǔ)項(xiàng)目搭建)

我計(jì)劃做一個(gè)小游戲開(kāi)發(fā)的連載教程，涉及的游戲包括：2048，連連看，走出迷宮，掃雷，拼圖，貪吃蛇，數(shù)獨(dú)，人機(jī)對(duì)戰(zhàn)五子棋，消消看，俄羅斯方塊等，也許還會(huì)有其它游戲，比如：泡泡龍，要看我的能力和精力了；

其實(shí)以上10款游戲是我6年前寫(xiě)好的，當(dāng)時(shí)能力受限，沒(méi)能完成泡泡龍的開(kāi)發(fā)，就一直擱置了，這是我心中的一個(gè)遺憾；現(xiàn)在，重新閱讀舊代碼，感覺(jué)寫(xiě)得很爛，難以拿出手，所以打算采用新的架構(gòu)設(shè)計(jì)，用現(xiàn)在所掌握的技術(shù)重新開(kāi)發(fā)一遍，力爭(zhēng)做到在手機(jī)和電腦上都可以很好呈現(xiàn)；

由于這周開(kāi)始比較忙了，工作比較累，工作日的晚上我也想休息一下，可能無(wú)法每天一篇了，但我會(huì)盡力而為；本篇我們來(lái)個(gè)輕松一點(diǎn)的教程：小游戲開(kāi)發(fā)項(xiàng)目搭建

我新版本小游戲計(jì)劃采用vite + vue3 + vue-router + canvas，開(kāi)發(fā)用的編程語(yǔ)言是JavaScript，我曾經(jīng)想過(guò)使用typescript，但害怕很多童鞋不熟悉typescript，經(jīng)過(guò)思考，還是用JavaScrip比較好；vite是Vuejs作者開(kāi)源的一個(gè)基于Rollup和esbuild的打包工具，很容易上手，大家可以去vite官網(wǎng)了解一下，我們的游戲代碼中會(huì)使用一些vue3的組合式API，大家可以到vuejs官網(wǎng)學(xué)習(xí)一下，很簡(jiǎn)單的；由于我們的游戲界面是使用canvas繪制的，所以需要使用大量canvas API，大家可以到mdn了解一下canvas API，不需要一定很熟悉，用到的API我都會(huì)簡(jiǎn)單介紹的，爭(zhēng)取讓所有童鞋都能夠理解；

現(xiàn)在，我們開(kāi)始搭建起項(xiàng)目。首先，在小游戲項(xiàng)目存放目錄打開(kāi)cmd，運(yùn)行以下命令初始化一個(gè)vue3的項(xiàng)目，我使用的yarn，也推薦大家使用，我假定童鞋們都會(huì)使用npm或yarn；

# yarn
>>> yarn create vite h5-games --template vue

# npm 6.x
>>> npm init vite@latest h5-games --template vue

# npm 7+, 需要額外的雙橫線(xiàn)
>>> npm init vite@latest h5-games -- --template vue

項(xiàng)目創(chuàng)建完成后，進(jìn)入h5-games目錄，安裝依賴(lài)

>>> cd h5-games
>>> yarn

依賴(lài)安裝完成后，我們就可以運(yùn)行以下命令啟動(dòng)項(xiàng)目了；然后，我們打開(kāi)瀏覽器，地址欄輸入：http://localhost:3000，就可以訪問(wèn)我們的網(wǎng)站了；

yarn dev

現(xiàn)在，我們添加一些依賴(lài)，首先安裝vue-router@4.x

yarn add vue-router@4

然后，添加用于支持less的開(kāi)發(fā)環(huán)境依賴(lài)

h5游戲 開(kāi)發(fā)(H5小游戲開(kāi)發(fā)教程之基礎(chǔ)項(xiàng)目搭建)

yarn add less -D

然后，在src目錄創(chuàng)建一個(gè)views文件夾，并在該文件夾新增2個(gè)文件：Home.vue，Game.vue，創(chuàng)建一些占位代碼，如下這樣：

// Home.vue
<template>
  <div>Home</div>
</template>

// Game.vue
<template>
  <div>Game</div>
</template>

然后，將App.vue文件代碼替換為：

<template>
  <router-view />
</template>

<style lang="less">
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-size: 14px;
}

body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff;
}

li {
  list-style: none;
}

a, canvas {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

canvas {
  user-select: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

a {
  text-decoration: none;
}
</style>

然后，在src目錄創(chuàng)建router.js文件，代碼如下：

import { createRouter, createWebHashHistory } from 'vue-router'

export default createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      component: () => import('http://www.toutiao.com/a7078261708611174949/views/Home.vue')
    },
    {
      path: '/:id',
      name: 'game',
      component: () => import('http://www.toutiao.com/a7078261708611174949/views/Game.vue')
    }
  ]
})

然后，將main.js文件代碼替換為：

import { createApp } from 'vue'
import App from 'http://www.toutiao.com/a7078261708611174949/App.vue'
import router from 'http://www.toutiao.com/a7078261708611174949/router'

const app = createApp(App)
app.use(router)
app.mount('#app')

然后，結(jié)束開(kāi)發(fā)服務(wù)，運(yùn)行yarn dev重新啟動(dòng)，確保訪問(wèn)http://localhost:3000網(wǎng)址時(shí)，頁(yè)面左上角顯示Home，訪問(wèn)http://localhost:3000/#/33網(wǎng)址時(shí)，頁(yè)面左上角顯示Game；最后，給大家放張代碼截圖；


H5小游戲項(xiàng)目搭建


這就是我們的小游戲基礎(chǔ)項(xiàng)目搭建，希望童鞋們都能理解，感謝閱讀！

h5游戲 開(kāi)發(fā)(H5小游戲開(kāi)發(fā)教程之基礎(chǔ)項(xiàng)目搭建)

熱門(mén)課程推薦

熱門(mén)資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話(huà)暢通！
確定