您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > 小程序

从0到1教你搭建微信小游戏项目

时间:2021-05-25 09:35:57  来源:今日头条  作者:开课吧科科

自从2019年微信公开课Pro在微信之夜演示《跳一跳》以来,微信小游戏已经不知不觉走过的三年,这三年中我们可以明显看到微信对小游戏的扶持,对于微信开发者来说,微信小游戏开发以及成为了必备技能之一。

从0到1教你搭建微信小游戏项目

 

5月22日的《HelloWorld公开课》,腾讯云TVP,《小程序从0到1:微信全栈工程师一本通》作者李艺老师就教你,如何从0开发一款微信小游戏项目

 创建项目

工欲善其事必先利其器,在正式开发游戏之前,我们要先到微信公众平台去注册账号,并下载相关开发工具。然后通读一遍微信小游戏开发文档,看微信官方为我们提供了哪些开发支持。

微信小游戏开发文档:
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

接下来我们开始创建项目,通过下面的图片可以看到,微信官方已经自动帮我们创建了一个项目模板,然后通过调试基础库,我们要勾选图片中所示的选项,这些都是在开发小游戏时必不可少的工具。

从0到1教你搭建微信小游戏项目

 

 项目结构与调试代码

通过这个小游戏demo,我们可以看到如下图所示的项目结构,其中audio是音频文件,存储了游戏中所需要的音频,images是图片文件,游戏中所需要的图片,比如我们这个小游戏中的飞机、地图等图片都存在这个文件夹中。

下面的JS文件夹就是项目的源码了,main.js是整个游戏项目的主类,libs是开发中常用的一些库。下面的NPC文件就是游戏中实现角色的文件夹,也就是我们日常理解的游戏NPC。player是实现游戏功能的模块,比如我们这个游戏demo是飞机大战,那么这个模块的作用就是实现子弹爆炸效果。

从0到1教你搭建微信小游戏项目

 

微信小游戏中的调试有两种方式,第一种是项目开发中的预览功能,第二种则是下图所示的二维码真机调试功能,你可以将这个二维码远程发给任何人,让他帮你来调试。

从0到1教你搭建微信小游戏项目

 

 创建游戏画布

游戏画布是整个游戏开发中最重要的组成部分,每一帧重会新绘制所有需要展示的元素。在微信小游戏开发中,根据官方API文档,我们通过createCanvas的方式来绘制画布,并往里填充属性,由于涉及到具体代码演示,感兴趣的同学可以点击下方链接观看这部分的内容。

 

 讲师介绍

李艺,腾讯云最具价值专家(TVP),《小程序从0到1:微信全栈工程师一本通》作者,拥有近20年互联网软件研发经验,曾是北京协同创新研究院人工智能项目负责人,Adobe中国15位社区管理员之一,目前是日行一课联合创始人兼CTO。

《Hello,World公开课》是由开课吧推出的面向广大开发工程师的免费加餐课,集结业内名师大咖,聚焦热门技术和实战解决方案,以专业知识分享交流为桥梁,链接正在创造世界的一群科技主力们,向初心致敬,为技术发烧。无论你是初入职场的应届生,还是准备升职加薪的职场精英,相信这里都有你需要的养料。



Tags:微信小游戏   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
自从2019年微信公开课Pro在微信之夜演示《跳一跳》以来,微信小游戏已经不知不觉走过的三年,这三年中我们可以明显看到微信对小游戏的扶持,对于微信开发者来说,微信小游戏开发以...【详细内容】
2021-05-25  Tags: 微信小游戏  点击:(212)  评论:(0)  加入收藏
作者:chrongzhang,腾讯 WXG 客户端开发工程师这是一篇介绍微信小游戏客户端底层,如果进行优化,可以让所有小游戏获得更好性能的文章。不是你想像的怎么优化某个小游戏的文章。来...【详细内容】
2020-08-18  Tags: 微信小游戏  点击:(69)  评论:(0)  加入收藏
▌简易百科推荐
一、项目背景随着小程序在用户规模和商业化上取得的极大成功,各大平台都推出了自己的小程序。然而这些平台的小程序开发在语法上又不尽相同,不同平台小程序代码的维护需要投入...【详细内容】
2021-11-05  携程技术    Tags:小程序   点击:(65)  评论:(0)  加入收藏
作者:灰灰来源:JS每日一题 一、背景传统的web开发实现登陆功能,一般的做法是输入账号密码、或者输入手机号及短信验证码进行登录服务端校验用户信息通过之后,下发一个代表登录态...【详细内容】
2021-10-29  Nodejs开发    Tags:微信小程序   点击:(43)  评论:(0)  加入收藏
总结列举微信小程序开放能力清单 硬件能力 蓝牙 NFC读写 连接WIFI设备 开放能力 ...【详细内容】
2021-09-27  软件开发分享    Tags:微信小程序   点击:(60)  评论:(0)  加入收藏
核心商城(CoreShop)介绍核心小程序商城系统(CoreShop) 是基于 Asp.Net 5.0、Uni-App开发、支持可视化布局的小程序商城系统;前后端分离,支持分布式部署,跨平台运行;拥有分销、代理、...【详细内容】
2021-07-20  码农也有梦想    Tags:小程序商城   点击:(115)  评论:(0)  加入收藏
介绍Vue3发布已经有一段时间了,从目前来看,其生态还算可以,也已经有了各种组件库给予了支持,但是不管是Vue3还是Vue2都无法直接用来开发小程序,因此国内一些技术团队针对Vue开发...【详细内容】
2021-07-13  爱分享Coder    Tags:小程序   点击:(203)  评论:(0)  加入收藏
首先明确几个概念1. W3C:指万维网联盟(World Wide Web Consortium),是一个国际的标准的制定机构。2. H5(HTML5,HyperText Markup Language 5的缩写),HTML5 是由W3C制定的新HTML标...【详细内容】
2021-07-06  畅游零和一的海洋    Tags:微信小程序   点击:(152)  评论:(0)  加入收藏
在开发微信公众号时,需要不时请求URL和数据封装。为了不做重复的工作。提取公共部分进行封装。产生了相应的公众类。今天先来写下请求类,代码如下:public class HttpRequestP...【详细内容】
2021-06-16  java浮萍  今日头条  Tags:公共类   点击:(134)  评论:(0)  加入收藏
小程序上线后,改版了很多次,包括一些 Api 接口也有改动。如果你学习一个很久之前的小程序项目是没有意义的,本文推荐的小程序都是最近有更新的。相信在你学习、部署的过程中,不...【详细内容】
2021-06-08    程序猿久一  Tags:微信小程序   点击:(206)  评论:(0)  加入收藏
自从2019年微信公开课Pro在微信之夜演示《跳一跳》以来,微信小游戏已经不知不觉走过的三年,这三年中我们可以明显看到微信对小游戏的扶持,对于微信开发者来说,微信小游戏开发以...【详细内容】
2021-05-25  开课吧科科  今日头条  Tags:微信小游戏   点击:(212)  评论:(0)  加入收藏
学习编程从hello world开始。学习微信小程序开发首先要安装一个微信开发者工具,官网上免费下载童叟无欺,下载完傻瓜式安装即可。 双击微信开发者工具,然后选择小程序,然后点击...【详细内容】
2021-05-12  程序员fearlazy  fearlazy  Tags:微信小程序   点击:(268)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条