微信小游戏2
创建画布
const canvas = wx.createCanvas()
在 game.js 中输入以上代码并保存
[外链图片转存失败(img-Raz17nJS-1564146105342)(https://upload-images.jianshu.io/upload_images/11158618-caa57a30137dbd1b.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
横向居中
[外链图片转存失败(img-uK8ya6v8-1564146105344)(https://upload-images.jianshu.io/upload_images/11158618-5a3cdd40830d1041.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
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)
[外链图片转存失败(img-BXVe3HGk-1564146105346)(https://upload-images.jianshu.io/upload_images/11158618-1d10be34e74df550.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
const rectX = canvas.width / 2 - 50
let rectY = 0
setInterval(function(){
drawRect(rectX, rectY++)
}, 16)
[外链图片转存失败(img-SCTHSQ77-1564146105351)(https://upload-images.jianshu.io/upload_images/11158618-99b77c5738af91d7.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
[外链图片转存失败(img-hwlMXac6-1564146105354)(https://upload-images.jianshu.io/upload_images/11158618-43b14e5e267f7f90.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
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'
使飞机图片跟随触摸移动
[外链图片转存失败(img-DrpEYQ27-1564146105359)(https://upload-images.jianshu.io/upload_images/11158618-d8509bad05e72fbc.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
// 存储当前飞机左上角坐标
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: '发生碰撞，游戏结束！'
})
}
在手机上预览
上传至体验版
[外链图片转存失败(img-edzookoL-1564146105361)(https://upload-images.jianshu.io/upload_images/11158618-9373334c5f3b959d.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
获得体验版本小游戏二维码
{
"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
// }
}
})
若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达叔小生的简书！
这是一个有质量，有态度的博客
[外链图片转存失败(img-4pYQthP6-1564146105363)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
