(1)微信打飞机体验
- 文档地址:https://mp.weixin.qq.com/debug/wxagame/dev/index.html
- 开发工具下载地址:https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?t=201813
- 第一步:下载开发工具后,安装
- 第二步:项目目录(选择一个空目录 )、AppID(点击蓝色的小游戏)、项目名称(输入项目名)
- 进入开发工具之后
(2)小游戏项目目录
- 必要文件只有两个
- game.js 小游戏入口文件
- game.json 配置文件
(3)game.json配置
- 小游戏开发者通过在根目录编写一个 game.json 文件进行配置,开发者工具和客户端需要读取这个配置,完成相关界面渲染和属性设置
- 代码例子
{
"deviceOrientation": "portrait",
"showStatusBar": false,
"networkTimeout": {
"request": 50000,
"connectSocket": 50000,
"uploadFile": 50000,
"downloadFile": 50000
},
"workers":"workers"
}
- deviceOrientation两种取值:portrait(竖屏)、 landscape(横屏)
- showStatusBar:显示状态栏
- networkTimeout:网络超时
- workers:子线程放置的目录(上述写法表示在根目录下创建一个workers文件夹,需自己创建)
(4)game.js
- 小游戏启动之后就会调用game.js
- 主要逻辑
- 导入weapp-adapter小游戏官方提供的适配器,用于注入canvas以及模拟DOM以及BOM(后续会具体说明这个文件
- 导入symbol的polyfill,主要用于模拟ES6类的私有变量
- 导入Main类并实例化Main,于是顺藤摸瓜我们将目光移至Main.js
import './js/libs/weapp-adapter'
import './js/libs/symbol'
import Main from './js/main'
new Main()
- Main.js主要是js文件夹下的各种JavaScript的调用,我们先来看看js文件夹下的各种js文件,了解下大致文件的作用,一下子全部弄明白也不现实
./js
├── base // 定义游戏开发基础类
│ ├── animatoin.js // 帧动画的简易实现
│ ├── pool.js // 对象池的简易实现
│ └── sprite.js // 游戏基本元素精灵类
├── libs
│ ├── symbol.js // ES6 Symbol简易兼容
│ └── weapp-adapter.js // 小游戏适配器
├── npc
│ └── enemy.js // 敌机类
├── player
│ ├── bullet.js // 子弹类
│ └── index.js // 玩家类
├── runtime
│ ├── background.js // 背景类
│ ├── gameinfo.js // 用于展示分数和结算界面
│ └── music.js // 全局音效管理器
├── databus.js // 管控游戏状态
└── main.js // 游戏入口主函数
- 微信小游戏开发和H5小游戏开发的区别
- 绘图api、事件api基本相似
- 微信小游戏通过官方提供的 webapp-adapter.js ,该js会注入window对象并提供相应的canvas全局变量
- 说了这么多理论知识,我们先来试试小游戏的api
(4)wx API实践
例子1:绘制矩形
- 直接删除掉game.js中的代码
- 创建Canvas对象,获取上下文对象,并用CanvasRenderingContext2D对象绘制一个红色100*100矩形
- 并且我们在绘制完之后改变canvas对象宽高,发现之前绘制的内容被清空
// 创建Canvas对象
var canvas = wx.createCanvas()
// 宽高与屏幕等宽等高414*736
console.log(canvas.width, canvas.height)
// 获取2d渲染上下文('2d'获取CanvasRenderingContext2D对象;'webgl'获取WebGLRenderingContext对象)
var context = canvas.getContext('2d')
context.fillStyle = 'red' //填充颜色
//画一个矩形
context.fillRect(0, 0, 100, 100)
//改变Canvas对象的宽高,会导致Canvas内容的清空和渲染上下文的重置
// canvas.width = 300
// canvas.height = 300
// console.log(canvas.width, canvas.height)
例子2:绘制一个图片
// 创建Canvas对象
var canvas = wx.createCanvas()
var context = canvas.getContext('2d')
context.fillStyle = 'red'
context.fillRect(0, 0, 100, 100)
// 创建一个Image对象
var image = wx.createImage()
// 图片加载完毕时会执行注册的 onload 回调函数
image.onload = function () {
console.log(image.width, image.height)
context.drawImage(image, 100, 100)
}
//src 属性可以加载一张本地图片或网络图片
image.src = 'images/hero.png'
例子3:多个Canvas绘制
- 创建多个Canvas
- 首次调用 wx.createCanvas 接口创建的是一个上屏 Canvas,此canvas绘制的内容将显示在屏幕上
- 以后调用 wx.createCanvas 创建的都会是离屏 Canvas,离屏Canvas绘制的内容并不会显示在屏幕上
- 如果需要把离屏绘制到上屏,调用drawImage(相当于把离屏canvas当成一个图片绘制上屏)
//上屏
var screenCanvas = wx.createCanvas()
//离屏
var offScreenCanvas = wx.createCanvas()
//离屏上下文
var offContext = offScreenCanvas.getContext('2d')
offContext.fillStyle = 'red'
offContext.fillRect(0, 0, 100, 100)离屏canvas绘制并没有显示到屏幕上
//把离屏的 offScreenCanvas 绘制到上屏的 screenCanvas 上
var screenContext = screenCanvas.getContext('2d')
screenContext.drawImage(offScreenCanvas, 0, 0)
例子4:触摸事件
- 响应用户与屏幕的交互是游戏中必不可少的部分
- 小游戏参照 DOM 中的 TouchEvent 提供了以下监听触摸事件的 API
wx.onTouchStart(function (e) {
console.log('onTouchStart')
console.log(e.touches[0].clientX)//数组第一个是按下点的详细坐标
console.log(e.touches[0].clientY)
})
wx.onTouchMove(function (e) {
console.log('onTouchMove')
console.log(e.touches)
})
wx.onTouchEnd(function (e) {
console.log('onTouchEnd')
console.log(e.touches)
})
wx.onTouchCancel(function (e) {
console.log('onTouchCancel')
console.log(e.touches)
})
例子5:定时器
/**
* 每2秒周期回调定时函数,并传值
* 参数1:定时回调的函数,可接受参数
* 参数2:时间间隔
* 参数3:回调函数的参数,可以是任何类型
* return:定时器的编号,这个值可以传递给 clearTimeout 来取消该定时。
*/
var number = setInterval(function(e){
console.log(e)
},2000,'传给回调函数的值')
/**
* 取消定时器
*/
clearInterval(number)
/**
* 2秒后触发(参数和setInterval一致)
*/
var num = setTimeout(function (e) {
console.log(e)
}, 2000, '传给回调函数的值')
/**
* 取消延时
*/
clearTimeout(num)
下面是我的公众号“Monkey旺”,欢迎大家关注,一起学习,一起交流
关注公众号,回复关键字“小游戏体验”,获取本文笔记(.html/.enex)