创建画布
const canvas = wx.createCanvas()
在 game.JS 中输入以上代码并保存
image.PNG
横向居中
image.PNG
context.fillRect(canvas.width / 2 - 50, 0, 100, 100)
创建函数:
- function drawRect(x, y) {
- // 作用是每次绘制前都先清除原有矩形
- context.clearRect(x, y - 1, 100, 100)
- context.fillRect(x, y, 100, 100)
- }
- drawRect(canvas.width / 2 - 50, 0)
image.PNG
- const rectX = canvas.width / 2 - 50
- let rectY = 0
- setInterval(function(){
- drawRect(rectX, rectY++)
- }, 16)
image
image.PNG
- const image = wx.createImage()
- const imgX = canvas.width / 2 - 50
- let imgY = 500
- image.onload = function () {
- context.drawImage(image, imgX, imgY)
- }
- image.src = 'images/hero.png'
使飞机图片跟随触摸移动
image.PNG
- // 存储当前飞机左上角坐标
- let touchX = imgX
- let touchY = imgY
- wx.onTouchMove(function (res) {
- context.clearRect(touchX, touchY, 100, 100); // 清除画布上原有的飞机
- touchX = res.changedTouches[0].clientX // 重新判断当前触摸点 x 坐标
- touchY = res.changedTouches[0].clientY // 重新判断当前触摸点 x 坐标
- context.drawImage(image, touchX, touchY);
- })
判断飞机是否碰撞到下落中的矩形
- if (touchX>= rectX - 100 && touchX <= rectX + 100 && touchY>= rectY - 100 && touchY <= rectY + 100) { // 飞机与矩形发生碰撞
- wx.showModal({
- title: '提示',
- content: '发生碰撞, 游戏结束!'
- })
- }
在手机上预览
上传至体验版
image
获得体验版本小游戏二维码
- {
- "description": "项目配置文件.",
- "setting": {
- "urlCheck": false,
- "es6": true,
- "postCSS": true,
- "minified": true,
- "newFeature": true,
- "autoAudits": false,
- "checkInvalidKey": true,
- "uglifyFileName": true
- },
- "compileType": "game",
- "libVersion": "1.9.94",
- "appid": "",
- "projectname": "wxgame",
- "simulatorType": "wechat",
- "simulatorPluginLibVersion": {},
- "condition": {
- "search": {
- "current": -1,
- "list": []
- },
- "conversation": {
- "current": -1,
- "list": []
- },
- "game": {
- "currentL": -1,
- "list": []
- },
- "miniprogram": {
- "current": -1,
- "list": []
- }
- }
- }
开发版, 体验版, 正式版 三种
代码包总大小不能超过 8M, 单个分包不能超过 4M.
小游戏配置
game.JSON 文件
- {
- "deviceOrientation": "portrait",
- "networkTimeout": {
- "request": 5000,
- "connectSocket": 5000,
- "uploadFile": 5000,
- "downloadFile": 5000
- },
- "navigateToMiniProgramAppIdList": [
- "wxe5f52902cf4de896"
- ]
- }
用户选择对 scope 来进行授权, 当授权给一个 scope 之后, 其对应的所有接口都可以直接使用.
如果用户已拒绝授权, 则不会出现弹窗, 而是直接进入接口 fail 回调. 请开发者兼容用户拒绝授权的场景.
wx.getSetting(Object object)
获取用户的当前设置.
- wx.getSetting({
- success (res) {
- console.log(res.authSetting)
- // res.authSetting = {
- // "scope.userInfo": true,
- // "scope.userLocation": true
- // }
- }
- })
若本号内容有做得不到位的地方 (比如: 涉及版权或其他问题), 请及时联系我们进行整改即可, 会在第一时间进行处理.
请点赞! 因为你们的赞同 / 鼓励是我写作的最大动力!
来源: http://www.jianshu.com/p/e6fdb8d998ba