*{box-sizing:border-box;填充：0；margin:0;}html{font-size:14px;}body{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing：抗锯齿；-moz-osx-font-smoothing：灰度；背景颜色：#fff；}li{列表样式：无；}a，画布{光标：指针；-webkit-tap-highlight-color:transparent;}canvas{user-select:none;转换：translateZ(0)；背面可见性：隐藏；perspective:1000px;}a{text-decoration:none;}打算做一个小游戏开发系列教程。涉及的游戏有：2048、连连看、走出迷宫、扫雷、拼图、贪吃蛇、数独、人机对战五子棋、对局对局、俄罗斯方块等，说不定还会有其他游戏，比如：泡泡龙，这取决于我的能力和精力。其实以上10款游戏都是我6年前写的。当时我能力有限，无法完成BubbleBobble的开发，所以就搁置了。这是我心中的遗憾；太烂了，上手难，所以我打算采用新的架构设计，用我现在的技术重新开发，力求在手机端和电脑端都有很好的呈现。由于这周很忙，工作很累，所以我也想在工作日的晚上休息一下。我可能不能每天写一篇文章，但我会尽力；本篇我们来个比较轻松的教程：小游戏开发项目搭建。新版小游戏我打算使用vite+vue3+vue-router+canvas。用于开发的编程语言是JavaScript。曾经想过用typescript，但是怕很多童鞋不熟悉typescript。想了想还是用JavaScript比较好；vite是Vuejs作者开源的基于Rollup和esbuild的打包工具。这是非常容易使用。大家可以去vite官网了解一下。我们的游戏代码将使用vue3的一些组合API。可以去vuejs官网学习。这很简单。是的;由于我们的游戏界面是用canvas绘制的，所以我们需要用到很多canvas的API。你可以去mdn了解canvasAPI。您不需要熟悉它们。我会简单介绍一下使用到的API，力求让所有的童鞋都能看懂。现在，让我们开始构建项目。首先在小游戏项目存放目录下打开cmd，运行如下命令初始化一个vue3项目。我用的是yarn，推荐大家用。我假设童鞋们会用npm或者yarn。#yarn>>>yarncreateviteh5-games--templatevue#npm6.x>>>npminitvite@latesth5-games--templatevue#npm7+,需要额外的双破折号>>>npminitvite@最新的h5-games----templatevue1.2.3.4.5.6。项目创建完成后，进入h5-games目录，安装依赖。>>>cdh5-games>>>纱线1.2。依赖安装完成后，我们可以运行如下命令启动项目；然后，我们打开浏览器，在地址栏输入：http://localhost:3000就可以访问我们的网站了。纱线dev1.现在，我们添加一些依赖，首先安装vue-router@4.x。纱线添加vue-router@41。然后添加支持less的开发环境依赖。纱线添加较少-D1。然后，在src目录下新建一个views文件夹，在该文件夹下新建2个文件：Home.vue、Game.vue，并新建一些占位符代码，如下：//Home.vueHome
//Game.vue游戏
1.2.3.4.5.6.7.8.然后，将App.vue文件中的代码替换为：*{box-sizing:border-box;填充：0；margin:0;}html{font-size:14px;}body{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing：抗锯齿；-moz-osx-font-smoothing：灰度；背景颜色：#fff；}li{列表样式：无；}a，画布{光标：指针；-webkit-tap-highlight-color:transparent;}canvas{user-select:none;转换：translateZ(0)；背面可见性：隐藏；perspective:1000px;}a{text-decoration:none;}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目录下创建router.js文件，代码如下：import{createRouter,createWebHashHistory}from'vue-router'exportdefaultcreateRouter({history:createWebHashHistory(),routes:[{path:'/',component:()=>import('./views/Home.vue')},{路径:'/:id',名称:'游戏',组件:()=>import('./views/Game.vue')}]})1.2.3.4.5.6.7.8.9.10。11.12.13.14.15。然后，将main.js文件代码替换为：app.mount('#app')1.2.3.4.5.6。然后，结束开发服务，运行yarndev重启，确保访问http://localhost:3000URL时，Home显示在页面左上角，访问http://localhost:3000/时#/33网站，游戏显示在页面左上角；最后放个代码截图给大家看懂了，感谢阅读！
