微信小游戏2

达达前端

发布于 2019-07-28 14:05:11

1.3K0

发布于 2019-07-28 14:05:11

文章被收录于专栏：达达前端

创建画布

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
    // }
  }
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.07.26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript