建站
咨詢
售后
建站咨詢
新聞中心
我計劃做一個小游戲開發(fā)的連載教程，涉及的游戲包括：2048，連連看，走出迷宮，掃雷，拼圖，貪吃蛇，數(shù)獨，人機對戰(zhàn)五子棋，消消看，俄羅斯方塊等，也許還會有其它游戲，比如：泡泡龍，要看我的能力和精力了。
彭州網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司從2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
其實以上10款游戲是我6年前寫好的，當(dāng)時能力受限，沒能完成泡泡龍的開發(fā)，就一直擱置了，這是我心中的一個遺憾;現(xiàn)在，重新閱讀舊代碼，感覺寫得很爛，難以拿出手，所以打算采用新的架構(gòu)設(shè)計，用現(xiàn)在所掌握的技術(shù)重新開發(fā)一遍，力爭做到在手機和電腦上都可以很好呈現(xiàn)。
由于這周開始比較忙了，工作比較累，工作日的晚上我也想休息一下，可能無法每天一篇了，但我會盡力而為;本篇我們來個輕松一點的教程：小游戲開發(fā)項目搭建。
我新版本小游戲計劃采用vite + vue3 + vue-router + canvas，開發(fā)用的編程語言是JavaScript，我曾經(jīng)想過使用typescript，但害怕很多童鞋不熟悉typescript，經(jīng)過思考，還是用JavaScrip比較好;vite是Vuejs作者開源的一個基于Rollup和esbuild的打包工具，很容易上手，大家可以去vite官網(wǎng)了解一下，我們的游戲代碼中會使用一些vue3的組合式API，大家可以到vuejs官網(wǎng)學(xué)習(xí)一下，很簡單的;由于我們的游戲界面是使用canvas繪制的，所以需要使用大量canvas API，大家可以到mdn了解一下canvas API，不需要一定很熟悉，用到的API我都會簡單介紹的，爭取讓所有童鞋都能夠理解。
現(xiàn)在，我們開始搭建起項目。首先，在小游戲項目存放目錄打開cmd，運行以下命令初始化一個vue3的項目，我使用的yarn，也推薦大家使用，我假定童鞋們都會使用npm或yarn。
# yarn
>>> yarn create vite h5-games --template vue
# npm 6.x
>>> npm init vite@latest h5-games --template vue
# npm 7+, 需要額外的雙橫線
>>> npm init vite@latest h5-games -- --template vue1.2.3.4.5.6.
項目創(chuàng)建完成后，進入h5-games目錄，安裝依賴。
>>> cd h5-games
>>> yarn 1.2.
依賴安裝完成后，我們就可以運行以下命令啟動項目了;然后，我們打開瀏覽器，地址欄輸入：http://localhost:3000，就可以訪問我們的網(wǎng)站了。
yarn dev1.
現(xiàn)在，我們添加一些依賴，首先安裝vue-router@4.x。
yarn add vue-router@41.
然后，添加用于支持less的開發(fā)環(huán)境依賴。
yarn add less -D1.
然后，在src目錄創(chuàng)建一個views文件夾，并在該文件夾新增2個文件：Home.vue，Game.vue，創(chuàng)建一些占位代碼，如下這樣：
// Home.vue
Home
// Game.vue
Game
1.2.3.4.5.6.7.8.
然后，將App.vue文件代碼替換為：
1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.
然后，在src目錄創(chuàng)建router.js文件，代碼如下：
import { createRouter, createWebHashHistory } from 'vue-router'
export default createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
component: () => import('./views/Home.vue')
},
{
path: '/:id',
name: 'game',
component: () => import('./views/Game.vue')
}
]
})1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.然后，將main.js文件代碼替換為：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')1.2.3.4.5.6.
然后，結(jié)束開發(fā)服務(wù)，運行yarn dev重新啟動，確保訪問http://localhost:3000網(wǎng)址時，頁面左上角顯示Home，訪問http://localhost:3000/#/33網(wǎng)址時，頁面左上角顯示Game;最后，給大家放張代碼截圖。
H5小游戲項目搭建
這就是我們的小游戲基礎(chǔ)項目搭建，希望童鞋們都能理解，感謝閱讀!
本文名稱：H5小游戲開發(fā)教程之基礎(chǔ)項目搭建
本文網(wǎng)址：http://www.5511xx.com/article/djdiepi.html
