火星网校
h5 游戏开发教程(H5小游戏开发教程之基础项目搭建)
发布时间：2023-11-27 06:46:44 浏览量：99次
H5小游戏开发教程之基础项目搭建
我计划做一个小游戏开发的连载教程，涉及的游戏包括：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.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目录创建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')然后，结束开发服务，运行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等引擎。借此分析引出了游戏设计领域和数字艺术教育的重要性，欢迎点击咨询报名。
-
游戏中玩家将面临武侠人生的挣扎抉择,战或降?杀或放?每个抉定都将触发更多爱恨纠葛的精彩奇遇。《天命奇御》具有多线剧情多结局,不限主线发展,高自由...
-
3. B站视频剪辑软件「必剪」：免费、炫酷特效，小白必备工具
B站视频剪辑软件「必剪」，完全免费、一键制作炫酷特效，适合新手小白。快来试试！
-
4. 手机游戏如何开发(如何制作传奇手游，都需要准备些什么？)
如何制作传奇手游，都需要准备些什么？提到传奇手游相信大家都不陌生，他是许多80、90后的回忆；从起初的端游到现在的手游，说明时代在进步游戏在更新，更趋于方便化移动化。而如果我们想要制作一款传奇手游的
-
5. 3D动画软件你知道几个?3ds Max、Blender、Maya、Houdini大比拼
当提到3D动画软件或动画工具时,指的是数字内容创建工具。它是用于造型、建模以及绘制3D美术动画的软件程序。但是,在3D动画软件中还包含了其他类型的...
-
三昧动漫对于著名ARPG游戏《巫师》系列，最近CD Projekt 的高层回应并不会推出《巫师4》。因为《巫师》系列在策划的时候一直定位在“三部曲”的故事框架，所以在游戏的出品上不可能出现《巫师4》
-
一、声音优化在绝地求生游戏中能够提前听到脚步声往往能提前取得战机,主要有两种方法:1、利用SoundLock软件,软件的功能主要是限制最大音量。百度搜索...
-
UI设计师、动画设计师、特效设计师每一个职位的功能和负责的方面都不同。所以,3D美术这方面需要大量的人才。但是要成为一个3D游戏建模师,也不是那么...
-
众所周知,虚幻引擎5(下面简称UE5)特别占用存储空间,仅一个版本安装好的文件就有60G,这还不包括我们在使用时保存的工程文件和随之产生的缓存文件。而...
-
想让你的3D打印模型更坚固？不妨尝试一下Cura参数设置和设计技巧，让你轻松掌握！
最新文章
