1. 首頁 > 生活百科 > >

網頁游戲怎么制作 H5小游戲開發教程之基礎項目搭建

生活百科

我計劃做一個小游戲開發的連載教程，涉及的游戲包括：2048，連連看，走出迷宮，掃雷，拼圖，貪吃蛇，數獨，人機對戰五子棋，消消看，俄羅斯方塊等，也許還會有其它游戲，比如：泡泡龍，要看我的能力和精力了；其實以上10款游戲是我6年前寫好的，當時能力受限，沒能完成泡泡龍的開發，就一直擱置了，這是我心中的一個遺憾；現在，重新閱讀舊代碼，感覺寫得很爛，難以拿出手，所以打
我計劃做一個小游戲開發的連載教程，涉及的游戲包括：2048，連連看，走出迷宮，掃雷，拼圖，貪吃蛇，數獨，人機對戰五子棋，消消看，俄羅斯方塊等，也許還會有其它游戲，比如：泡泡龍，要看我的能力和精力了；
其實以上10款游戲是我6年前寫好的，當時能力受限，沒能完成泡泡龍的開發，就一直擱置了，這是我心中的一個遺憾；現在，重新閱讀舊代碼，感覺寫得很爛，難以拿出手，所以打算采用新的架構設計，用現在所掌握的技術重新開發一遍，力爭做到在手機和電腦上都可以很好呈現；
由于這周開始比較忙了，工作比較累，工作日的晚上我也想休息一下，可能無法每天一篇了，但我會盡力而為；本篇我們來個輕松一點的教程：小游戲開發項目搭建
我新版本小游戲計劃采用vite + vue3 + vue-router + canvas，開發用的編程語言是JavaScript，我曾經想過使用typescript，但害怕很多童鞋不熟悉typescript，經過思考，還是用JavaScrip比較好；vite是Vuejs作者開源的一個基于Rollup和esbuild的打包工具，很容易上手，大家可以去vite官網了解一下，我們的游戲代碼中會使用一些vue3的組合式API，大家可以到vuejs官網學習一下，很簡單的；由于我們的游戲界面是使用canvas繪制的，所以需要使用大量canvas API，大家可以到mdn了解一下canvas API，不需要一定很熟悉，用到的API我都會簡單介紹的，爭取讓所有童鞋都能夠理解；
現在，我們開始搭建起項目 。首先，在小游戲項目存放目錄打開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 vue
項目創建完成后，進入h5-games目錄，安裝依賴
>>> cd h5-games>>> yarn
依賴安裝完成后，我們就可以運行以下命令啟動項目了；然后，我們打開瀏覽器，地址欄輸入：http://localhost:3000，就可以訪問我們的網站了；
yarn dev
現在，我們添加一些依賴，首先安裝vue-router@4.x
yarn add vue-router@4
然后，添加用于支持less的開發環境依賴
yarn add less -D
然后，在src目錄創建一個views文件夾，并在該文件夾新增2個文件：Home.vue，Game.vue，創建一些占位代碼，如下這樣：
// Home.vueHome// Game.vueGame
然后，將App.vue文件代碼替換為：
* {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;}
然后，在src目錄創建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’)}]})
然后，將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’)
然后，結束開發服務，運行yarn dev重新啟動，確保訪問http://localhost:3000網址時，頁面左上角顯示Home，訪問http://localhost:3000/#/33網址時，頁面左上角顯示Game；最后，給大家放張代碼截圖；

網頁游戲怎么制作 H5小游戲開發教程之基礎項目搭建

文章插圖
網頁游戲怎么制作 H5小游戲開發教程之基礎項目搭建

文章插圖
H5小游戲項目搭建
【網頁游戲怎么制作 H5小游戲開發教程之基礎項目搭建】這就是我們的小游戲基礎項目搭建，希望童鞋們都能理解，感謝閱讀！

推薦閱讀