前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小游戏2

微信小游戏2

作者头像
达达前端
发布2019-07-28 14:05:11
1.3K0
发布2019-07-28 14:05:11
举报
文章被收录于专栏:达达前端

创建画布

代码语言:javascript
复制
const canvas = wx.createCanvas()

在 game.js 中输入以上代码并保存

image.png

横向居中

image.png

代码语言:javascript
复制
context.fillRect(canvas.width / 2 - 50, 0, 100, 100)

创建函数:

代码语言:javascript
复制
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

代码语言:javascript
复制
const rectX = canvas.width / 2 - 50
let rectY = 0
setInterval(function(){
  drawRect(rectX, rectY++)
}, 16)

image

image.png

代码语言:javascript
复制
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

代码语言:javascript
复制
// 存储当前飞机左上角坐标
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);
})

判断飞机是否碰撞到下落中的矩形

代码语言:javascript
复制
if (touchX >= rectX - 100 && touchX <= rectX + 100 && touchY >= rectY - 100 && touchY <= rectY + 100) { // 飞机与矩形发生碰撞
  wx.showModal({
    title: '提示',
    content: '发生碰撞,游戏结束!'
  })
}

在手机上预览 上传至体验版

image

获得体验版本小游戏二维码

代码语言:javascript
复制
{
    "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 文件

代码语言:javascript
复制
{
  "deviceOrientation": "portrait",
  "networkTimeout": {
    "request": 5000,
    "connectSocket": 5000,
    "uploadFile": 5000,
    "downloadFile": 5000
  },
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}

用户选择对 scope 来进行授权,当授权给一个 scope 之后,其对应的所有接口都可以直接使用。

如果用户已拒绝授权,则不会出现弹窗,而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。 wx.getSetting(Object object) 获取用户的当前设置。

代码语言:javascript
复制
wx.getSetting({
  success (res) {
    console.log(res.authSetting)
    // res.authSetting = {
    //   "scope.userInfo": true,
    //   "scope.userLocation": true
    // }
  }
})

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.07.26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档