微信小程序实现拼图小游戏


Posted in Javascript onOctober 22, 2020

微信小游戏入门案例——拼图游戏,供大家参考,具体内容如下

涉及内容: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 = 2
 var col = 2
 
 // 随机打乱方块顺序100次
 for (var i = 0; i < 100; i++) {
 // 随机生成一个方向:上0,下1,左2,右3
 var direction = Math.round(Math.random() * 3)
 
 // 上:0
 if (direction == 0) {
 // 空白方块不能在最上面一行
 if (row != 0) {
  // 交换位置
  num[row][col] = num[row - 1][col]
  num[row - 1][col] = '22'
 
  // 更新空白方块的行
  row -= 1
 }
 }
 
 // 下:1
 if (direction == 1) {
 // 空白方块不能在最下面一行
 if (row != 2) {
  // 交换位置
  num[row][col] = num[row + 1][col]
  num[row + 1][col] = '22'
 
  // 更新空白方块的行
  row += 1
 }
 }
 
 // 左:2
 if (direction == 2) {
 // 空白方块不能在最左边一列
 if (col != 0) {
  // 交换位置
  num[row][col] = num[row][col - 1]
  num[row][col - 1] = '22'
 
  // 更新空白方块的列
  col -= 1
 }
 }
 
 // 右:3
 if (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和y
 var x = e.changedTouches[0].x
 var 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.level
 wx.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) {
 
 }
})

运行截图:

微信小程序实现拼图小游戏

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery BS,dialog控件自适应大小
Jul 06 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
js实现三角形粒子运动
Sep 22 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 #Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 #Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 #Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 #Javascript
jquery实现抽奖功能
Oct 22 #jQuery
Vue实现简单的留言板
Oct 23 #Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 #Javascript
You might like
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
python之wxPython菜单使用详解
2014/09/28 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
毕业典礼主持词大全
2014/03/26 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
员工保密协议书
2014/09/27 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
写给医院的感谢信
2015/01/22 职场文书
《我的长生果》教学反思
2016/02/20 职场文书