本文主要介绍手把手教你做h5小游戏(h5小游戏制作软件)，下面一起看看手把手教你做h5小游戏(h5小游戏制作软件)相关资讯。
打算做一个小游戏开发的系列教程。涉及的游戏有：2048、连连看、走出迷宫、扫雷、拼图、贪吃蛇、数独、人机五子棋、消失、俄罗斯方块等。也许还会有其他游戏，比如泡泡龙，看我的能力和精力；
其实以上10个游戏是我六年前写的。当时能力有限，无法完成《泡泡龙》的开发，所以一直搁置。这是我心中的遗憾。现在重读旧代码，觉得写得很烂，很难拿出来，所以打算采用新的架构设计。
用你现在拥有的技术重新开发，争取在手机和电脑上都能很好的呈现；
因为这周工作又忙又累，平日也想休息一下。我可能不能每天写一篇，但我会尽力。在本文中，我们来一个轻松的教程：小游戏开发项目的构建。
我的新版本游戏计划用vite vue3 vue-router canvas，开发用的编程语言是javascript。我曾经想过使用typescript。
但是我怕很多童鞋不熟悉typescript。想了想，还是用javascrip比较好。vite是vuejs作者基于rollup和esbuild的开源打包工具，简单易用。
可以去vite官网了解一下。我们的游戏代码会用到vue3的一些组合api。可以去vuejs官网学习，很简单；因为我们的游戏界面是用画布绘制的，
因此，你需要使用大量的canvas apis。可以去mdn了解一下canvas apis。你不需要熟悉他们。我简单介绍一下使用的api，让各位童鞋都能看懂。
现在，我们开始建设项目。首先在小游戏项目的存储目录下打开cmd，运行下面的命令初始化一个vue3项目。我用的纱线也推荐给大家。我假设童鞋会用npm或者纱线；
#纱纱创建维特h5-游戏-模板vue # npm 6。x npm初始邀请@最新h5-游戏-模板vue# npm 7，需要额外的双横线npm初始化邀请@最新h5-游戏-模板某视频剪辑软件项目创建完成后，
cd h5-games yarn依赖项安装完成后，我们可以运行以下命令来启动项目；然后，我们打开浏览器，在地址栏输入：访问我们的网站。
yarn dev现在，我们来添加一些依赖项，先安装vue-router @ 4.x。
yarnandvue-router @ 4然后，添加开发环境依赖来支持更少。
yarn add less -d然后，在src目录下创建一个views文件夹，在这个文件夹下添加两个文件：home.vue，game.vue，并创建一些占位符代码，如下：
//家。vue模板div首页/div/模板//游戏。vue模板div游戏/div/模板然后，
将app.vue文件代码替换为：
template router-view //templatestyle 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然后，
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') } ]})然后，
import { createapp } from 'vue'import app from './app.vue'import router from './router'const app=createapp(app)app.use(router)app.mount('#app')然后，
h5小游戏项目搭建
这就是我们的小游戏基础项目搭建，希望童鞋们都能理解，感谢阅读！