微信小游戏入门案例—

微信小游戏入门案例——拼图游戏

涉及内容:canvas组件、小程序界面绘图API

目录结构：

pages\game\game.js

// pages/game/game.js
// 方块的初始位置
var num = [['00', '01', '02'],['10', '11', '12'],['20', '21', '22']
]// 方块的宽度
var w = 100// 图片的初始地址
var url = '/images/pic01.jpg'Page({/*** 页面的初始数据*/data: {isWin: false},/*** 自定义函数--随机打乱方块顺序*/shuffle: function() {// 先令所有方块回归初始位置num = [['00', '01', '02'],['10', '11', '12'],['20', '21', '22']]// 记录当前空白方块的行和列var row = 2var col = 2// 随机打乱方块顺序100次for (var i = 0; i < 100; i++) {// 随机生成一个方向：上0,下1,左2,右3var direction = Math.round(Math.random() * 3)// 上：0if (direction == 0) {// 空白方块不能在最上面一行if (row != 0) {// 交换位置num[row][col] = num[row - 1][col]num[row - 1][col] = '22'// 更新空白方块的行row -= 1}}// 下：1if (direction == 1) {// 空白方块不能在最下面一行if (row != 2) {// 交换位置num[row][col] = num[row + 1][col]num[row + 1][col] = '22'// 更新空白方块的行row += 1}}// 左：2if (direction == 2) {// 空白方块不能在最左边一列if (col != 0) {// 交换位置num[row][col] = num[row][col - 1]num[row][col - 1] = '22'// 更新空白方块的列col -= 1}}// 右：3if (direction == 3) {// 空白方块不能在最右边一列if (col != 2) {// 交换位置num[row][col] = num[row][col + 1]num[row][col + 1] = '22'// 更新空白方块的列col += 1}}}},/*** 自定义函数--绘制画布内容*/drawCanvas: function() {let ctx = this.ctx// 清空画布ctx.clearRect(0, 0, 300, 300)// 使用双重for循环语句绘制3x3拼图for (var i = 0; i < 3; i++) {for (var j = 0; j < 3; j++) {if (num[i][j] != '22') {// 获取行和列var row = parseInt(num[i][j] / 10)var col = num[i][j] % 10// 绘制方块ctx.drawImage(url, col * w, row * w, w, w, j * w, i * w, w, w)}}}ctx.draw()},/*** 自定义函数--监听点击方块事件*/touchBox: function(e) {// 如果游戏已经成功，不做任何操作if (this.data.isWin) {// 终止本函数return}// 获取被点击方块的坐标x和yvar x = e.changedTouches[0].xvar y = e.changedTouches[0].y// console.log('x:'+x+',y:'+y)// 换算成行和列var row = parseInt(y / w)var col = parseInt(x / w)// 如果点击的不是空白位置if (num[row][col] != '22') {// 尝试移动方块this.moveBox(row, col)// 重新绘制画布内容this.drawCanvas()// 判断游戏是否成功if (this.isWin()) {// 在画面上绘制提示语句let ctx = this.ctx// 绘制完整图片ctx.drawImage(url, 0, 0)// 绘制文字ctx.setFillStyle('#e64340')ctx.setTextAlign('center')ctx.setFontSize(60)ctx.fillText('游戏成功', 150, 150)ctx.draw()}}},/*** 自定义函数--移动被点击的方块*/moveBox: function(i, j) {// 情况1：如果被点击的方块不在最上方，检查可否上移if (i > 0) {// 如果方块的上方是空白if (num[i - 1][j] == '22') {// 交换当前被点击的方块和空白的位置num[i - 1][j] = num[i][j]num[i][j] = '22'return}}// 情况2：如果被点击的方块不在最下方，检查可否下移if (i < 2) {// 如果方块的下方是空白if (num[i + 1][j] == '22') {// 交换当前被点击的方块和空白的位置num[i + 1][j] = num[i][j]num[i][j] = '22'return}}// 情况3：如果被点击的方块不在最左侧，检查可否左移if (j > 0) {// 如果方块的左侧是空白if (num[i][j - 1] == '22') {// 交换当前被点击的方块和空白的位置num[i][j - 1] = num[i][j]num[i][j] = '22'return}}// 情况4：如果被点击的方块不在最右侧，检查可否右移if (j < 2) {// 如果方块的右侧是空白if (num[i][j + 1] == '22') {// 交换当前被点击的方块和空白的位置num[i][j + 1] = num[i][j]num[i][j] = '22'return}}},/*** 自定义函数--判断游戏是否成功*/isWin: function() {// 使用双重for循环检查整个数组for (var i = 0; i < 3; i++) {for (var j = 0; j < 3; j++) {// 如果有方块位置不对if (num[i][j] != i * 10 + j) {// 返回假，游戏尚未成功return false}}}// 游戏成功，更新状态this.setData({isWin: true})// 返回真，游戏成功return true},/*** 自定义函数--重新开始游戏*/restartGame: function() {// 更新游戏状态this.setData({isWin: false})// 打乱方块顺序this.shuffle()// 绘制画布内容this.drawCanvas()},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {// console.log(options.level)// 更新图片路径地址url = '/images/' + options.level// 更新提示图的地址this.setData({url: url})// 创建画布上下文this.ctx = wx.createCanvasContext("myCanvas")// 打乱方块顺序this.shuffle()// 绘制画布内容this.drawCanvas()},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {}
})

pages\game\game.wxml

<view class="container"><view class="title">提示图</view><image src="{{url}}"></image><canvas canvas-id="myCanvas" bindtouchstart="touchBox"></canvas><button type="warn" bindtap="restartGame">重新开始</button>
</view>

pages\game\game.wxss

/* pages/game/game.wxss */
/* 提示图 */
image{width: 250rpx;height: 250rpx;
}/* 游戏画布区域 */
canvas{border: 1rpx solid;width: 300px;height: 300px;
}

pages\index\index.js

Page({/*** 页面的初始数据*/data: {levels:['pic01.jpg','pic02.jpg','pic03.jpg','pic04.jpg','pic05.jpg','pic06.jpg',]},chooseLevel:function(e){let level = e.currentTarget.dataset.levelwx.navigateTo({url: '../game/game?level='+level,})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

pages\index\index.wxml

<view class="container"><view class="title">游戏选关</view><view class="levelBox"><view class="box" wx:for="{{levels}}" wx:key="levels{{index}}" bindtap="chooseLevel" data-level="{{item}}"><image src="/images/{{item}}"></image><text>第{{index+1}}关</text></view></view>
</view>

pages\index\index.wxss

/**index.wxss**/
/* 关卡区域列表 */
.levelBox{width: 100%;
}/* 单个关卡区域 */
.box{width: 50%;float: left;margin: 25rpx 0;display: flex;flex-direction: column;align-items: center;
}/* 选关图片 */
image{width: 260rpx;height: 260rpx;
}

app.json

{"pages":["pages/index/index","pages/game/game"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#E64340","navigationBarTitleText": "拼图游戏","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json"
}

app.wxss

/**app.wxss**/
/* 页面容器样式 */
.container{height: 100vh;color: #e64340;font-weight: bold;display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;
}/* 顶端标题样式 */
.title{font-size: 18pt;
}

app.js

App({/*** 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/onLaunch: function () {},/*** 当小程序启动，或从后台进入前台显示，会触发 onShow*/onShow: function (options) {},/*** 当小程序从前台进入后台，会触发 onHide*/onHide: function () {},/*** 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息*/onError: function (msg) {}
})

运行截图；

微信小游戏入门案例——拼图游戏相关推荐

微信小程序入门案例-会议邀请函
微信小程序入门案例-会议邀请函涉及内容:地图目录结构: pages\index\index.wxml <view class="box"><view clas ...
微信小程序云开发--拼图游戏
声明:在写这个拼图游戏以前也参看过很多其他的小程序拼图相关的列子.我的这个与其他的不同,是采用小程序云开发的模式,省去了服务器,供读者参考,同时,也希望各位能帮忙扫下二维,点一下小广告.挣钱不容易,谢 ...
微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
java 拼图游戏_Java小项目之：拼图游戏！
Java小项目之:拼图游戏! 今天教大家用java做出一个拼图游戏,很适合java初学者练手. 所用素材: 部分代码: package picture_mosical; import java.awt ...
微信小程序开发 | 微信小程序入门
微信小程序入门 1.1 初识微信小程序 1.1.1 什么是微信小程序 1.1.2 微信小程序的账号 1.1.3 微信小程序的特点 1.1.4 微信小程序的发展前景 1.2 开发环境搭建 1.2.1 注 ...
Taro 开发微信小程序入门与实战
目前比较流行的小程序开发框架主要有 WePY.Mpvue.Taro. WePY,Mpvue 是完全用 Vue 的开发方式来开发小程序,WePY 是比较早的小程序开发框架了,相对而言 Mpvue 的开发 ...
微信小程序入门与实战（七月）
微信小程序入门与实战(七月) 第1章初识微信小程序第2章小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
微信小程序入门---01
目录微信小程序入门一.小程序简介二.第一个小程序二.小程序代码的构成三.WXML模块四.WXSS 样式五.JS 逻辑交互六.组件七.API 八.WXML 模板语法 - 数据绑定九. ...
微信小程序入门教程---列表渲染多层嵌套循环及wx:key的使用(双层for循环)
前言入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for="{{items} ...

微信小游戏入门案例——拼图游戏

微信小游戏入门案例——拼图游戏

涉及内容:canvas组件、小程序界面绘图API

目录结构：

pages\game\game.js

pages\game\game.wxml

pages\game\game.wxss

pages\index\index.js

pages\index\index.wxml

pages\index\index.wxss

app.json

app.wxss

app.js

运行截图；

微信小游戏入门案例——拼图游戏相关推荐

最新文章

热门文章