火星網校
h5 游戲開發(fā)教程(H5小游戲開發(fā)教程之基礎項目搭建)
發(fā)布時間：2023-11-27 06:46:44 瀏覽量：103次
?H5小游戲開發(fā)教程之基礎項目搭建
我計劃做一個小游戲開發(fā)的連載教程，涉及的游戲包括：2048，連連看，走出迷宮，掃雷，拼圖，貪吃蛇，數獨，人機對戰(zhàn)五子棋，消消看，俄羅斯方塊等，也許還會有其它游戲，比如：泡泡龍，要看我的能力和精力了；
其實以上10款游戲是我6年前寫好的，當時能力受限，沒能完成泡泡龍的開發(fā)，就一直擱置了，這是我心中的一個遺憾；現在，重新閱讀舊代碼，感覺寫得很爛，難以拿出手，所以打算采用新的架構設計，用現在所掌握的技術重新開發(fā)一遍，力爭做到在手機和電腦上都可以很好呈現；
由于這周開始比較忙了，工作比較累，工作日的晚上我也想休息一下，可能無法每天一篇了，但我會盡力而為；本篇我們來個輕松一點的教程：小游戲開發(fā)項目搭建
我新版本小游戲計劃采用vite + vue3 + vue-router + canvas，開發(fā)用的編程語言是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項目創(chuàng)建完成后，進入h5-games目錄，安裝依賴
>>> cd h5-games
>>> yarn 依賴安裝完成后，我們就可以運行以下命令啟動項目了；然后，我們打開瀏覽器，地址欄輸入：http://localhost:3000，就可以訪問我們的網站了；
yarn dev現在，我們添加一些依賴，首先安裝vue-router@4.x
yarn add vue-router@4然后，添加用于支持less的開發(fā)環(huán)境依賴
yarn add less -D然后，在src目錄創(chuàng)建一個views文件夾，并在該文件夾新增2個文件：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')然后，結束開發(fā)服務，運行yarn dev重新啟動，確保訪問http://localhost:3000網址時，頁面左上角顯示Home，訪問http://localhost:3000/#/33網址時，頁面左上角顯示Game；最后，給大家放張代碼截圖；
H5小游戲項目搭建
這就是我們的小游戲基礎項目搭建，希望童鞋們都能理解，感謝閱讀！
熱門課程推薦
熱門資訊
-
探討游戲引擎的文章，介紹了10款游戲引擎及其代表作品，涵蓋了RAGE Engine、Naughty Dog Game Engine、The Dead Engine、Cry Engine、Avalanche Engine、Anvil Engine、IW Engine、Frostbite Engine、Creation引擎、Unreal Engine等引擎。借此分析引出了游戲設計領域和數字藝術教育的重要性，歡迎點擊咨詢報名。
-
2. 手機游戲如何開發(fā)(如何制作傳奇手游，都需要準備些什么？)
?如何制作傳奇手游，都需要準備些什么？提到傳奇手游相信大家都不陌生，他是許多80、90后的回憶；從起初的端游到現在的手游，說明時代在進步游戲在更新，更趨于方便化移動化。而如果我們想要制作一款傳奇手游的
-
3. B站視頻剪輯軟件「必剪」：免費、炫酷特效，小白必備工具
B站視頻剪輯軟件「必剪」，完全免費、一鍵制作炫酷特效，適合新手小白?？靵碓囋?！
-
游戲中玩家將面臨武俠人生的掙扎抉擇,戰(zhàn)或降?殺或放?每個抉定都將觸發(fā)更多愛恨糾葛的精彩奇遇。《天命奇御》具有多線劇情多結局,不限主線發(fā)展,高自由...
-
5. Bigtime加密游戲經濟體系揭秘，不同玩家角色的經濟活動
Bigtime加密游戲經濟模型分析，探討游戲經濟特點，幫助玩家更全面了解這款GameFi產品。
-
6. 3D動畫軟件你知道幾個?3ds Max、Blender、Maya、Houdini大比拼
當提到3D動畫軟件或動畫工具時,指的是數字內容創(chuàng)建工具。它是用于造型、建模以及繪制3D美術動畫的軟件程序。但是,在3D動畫軟件中還包含了其他類型的...
-
7. 3D動漫建模全過程，不是一般人能學的會的，會的多不是人?
步驟01:面部,頸部,身體在一起這次我不準備設計圖片,我從雕刻進入。這一次,它將是一種純粹關注建模而非整體繪畫的形式。像往常一樣,我從Sphere創(chuàng)建它...
-
8. 如何自己開發(fā)一款游戲(游戲開發(fā)入門必看：五大獨立游戲開發(fā)技巧)
?游戲開發(fā)入門必看：五大獨立游戲開發(fā)技巧無論您是剛剛起步開發(fā)自己的第一款游戲，還是已經制作了幾款游戲，本篇文章中的5大獨立游戲開發(fā)技巧都可以幫助您更好地設計下一款游戲。無論你對游戲有著什么樣的概念，都
-
?三昧動漫對于著名ARPG游戲《巫師》系列，最近CD Projekt 的高層回應并不會推出《巫師4》。因為《巫師》系列在策劃的時候一直定位在“三部曲”的故事框架，所以在游戲的出品上不可能出現《巫師4》
-
想讓你的3D打印模型更堅固？不妨嘗試一下Cura參數設置和設計技巧，讓你輕松掌握！
