资讯 安全 论坛 下载 读书 程序开发 数据库 系统 网络 电子书 微信学院 站长学院 QQ 考试
频道栏目
软件开发| web前端| Web开发| 移动开发| 综合编程|
登录注册
首页 > 微信学院 > 微信小程序 > 正文
微信小程序之拼图游戏实战教程
2019-12-07 10:02:52           
收藏   我要投稿

微信小程序：拼图游戏

游戏界面

初始化游戏：

游戏成功：

 

思路&功能：

1.初始化，将数字1~8存放在数组中，随机打乱后拼接一个9(空白格),修改空白格的样式

2.点击数字，判断空白格对于其所在位置的方向，进行相应的上下左右移动

3.上下左右移动，及把移动的两个数字互换在数组中的位置

4.判断数组中元素是否是[1,2,3,4,5,6,7,8,9]，是则游戏成功，

5.计时，利用定时器，结束，清除定时器

 

代码：

项目中所用到的数据：

 



    

  1. data: {
    2. 

  2. num: ['★', '★', '★', '★', '★', '★', '★', '★', '★'], //初始化前
    3. 

  3. hidden: true, //隐藏空白格中的数字
    4. 

  4. time:0, //秒数
    5. 

  5. t:'' //定时器
    6. 

  6. },复制代码
    7. 



构建页面：index.wxml


 




    

    2. 

    3. 

    4. 

  4.  
    5. 

  5. 复制代码
    6. 



需要传两个数据过去，一个是被点击块的下标index和块中的数字item


动态为空白格[9]添加样式active


 




    

  1. {{item == 9'active':''}}复制代码
    2. 



游戏初始化：


 




    

  1. init:function(){
    2. 

  2. this.setData({
    3. 

  3. num:this.sortArr([1,2,3,4,5,6,7,8]).concat([9])
    4. 

  4. })
    5. 

  5. },复制代码
    6. 



初始化的时候，这里用了sortArr(arr)打乱数组，并拼接个空白格[9]，这样让空白格初始化的时候永远处于最后一位。


随机打乱数组:


 




    

  1. sortArr: function (arr) {
    2. 

  2. return arr.sort(function () {
    3. 

  3. return Math.random() - 0.5
    4. 

  4. })
    5. 

  5. }复制代码
    6. 



这里用了最简单的打乱方法，缺点就是打乱不完全


给每个块添加点击事件onMoveTap:


 




    

  1. onMoveTap: function (e) {
    2. 

  2. var index = e.currentTarget.dataset.index;
    3. 

  3. var item = e.currentTarget.dataset.item;
    4. 

  4. if (this.data.num[index + 3] == 9) {
    5. 

  5. this.down(e);
    6. 

  6. }
    7. 

  7. if (this.data.num[index - 3] == 9) {
    8. 

  8. this.up(e);
    9. 

  9. }
    10. 

  10. if (this.data.num[index + 1] == 9 && index != 2 && index != 5) {
    11. 

  11. this.right(e);
    12. 

  12. }
    13. 

  13. if (this.data.num[index - 1] == 9 && index != 3 & index != 6) {
    14. 

  14. this.left(e);
    15. 

  15. } }复制代码
    16. 



如果空白格的下标比所点击的块的下表大3，则表示空白格在所点击块的下方，那么点击后向下移动；


如果空白格的下标比所点击的块的下表小3，则表示空白格在所点击块的上方，那么点击后向上移动；


如果空白格的下标比所点击的块的下表大1，则表示空白格在所点击块的右方，那么点击后向右移动，需考虑点击快是否在容器右边缘；


如果空白格的下标比所点击的块的下表小1，则表示空白格在所点击块的左方，那么点击后向左移动，需考虑点击快是否在容器左边缘；


 


移动：


以向上移动举例


 




    

  1. up: function (e) {
    2. 

  2. var index = e.currentTarget.dataset.index; //当前数字下标
    3. 

  3. var temp = this.data.num[index];
    4. 

  4. this.data.num[index] = this.data.num[index - 3]
    5. 

  5. this.data.num[index - 3] = temp;
    6. 

  6. this.setData({
    7. 

  7. num: this.data.num
    8. 

  8. })
    9. 

  9. if (this.data.num.toString() == [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) {
    10. 

  10. this.success();
    11. 

  11. }
    12. 

  12. }复制代码
    13. 



移动后，将所点击块与空白格互换在数组中的位置，并判断目前的数组是否满足游戏成功的条件，判断数组相等，我这里把数组转化成字符串做的比较


 


游戏成功：


 




    

  1. success: function () {
    2. 

  2. var that = this;
    3. 

  3. wx.showToast({
    4. 

  4. title: '闯关成功',
    5. 

  5. icon: 'success',
    6. 

  6. success: function () {
    7. 

  7. that.init();
    8. 

  8. }
    9. 

  9. })
    10. 

  10. }复制代码
    11. 



游戏成功，弹出交互反馈窗口，并初始化重新打乱数组


 


定时器：


 




    

  1. timeCount:function(){
    2. 

  2. var that = this;
    3. 

  3. var timer = that.data.time;
    4. 

  4. that.setData({
    5. 

  5. t:setInterval(function(){
    6. 

  6. timer++;
    7. 

  7. that.setData({
    8. 

  8. time:timer
    9. 

  9. })
    10. 

  10. },1000)
    11. 

  11. })
    12. 

  12. }复制代码
    13. 



 


开始结束游戏：


 




    

  1. timeBegin:function(){
    2. 

  2. clearInterval(this.data.t);
    3. 

  3. this.setData({
    4. 

  4. time:0
    5. 

  5. })
    6. 

  6. this.timeCount();
    7. 

  7. this.init();
    8. 

  8. },
    9. 

  9. timeStop:function(){
    10. 

  10. clearInterval(this.data.t);
    11. 

  11. if (this.data.num.toString() != [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) {
    12. 

  12. this.fail();
    13. 

  13. }
    14. 

  14. }复制代码
    15. 



给开始按钮绑定timeBegin事件，初始化游戏


给结束按钮绑定timeStop事件，判断是否游戏成功


 


试玩:


源代码：github.com/lcp1551/lcp…


 


待开发：


选择难度


自传图片



赞赏

						

		

	

	

		
		
	

	

		
点击复制链接 与好友分享!回本站首页

		

  		
	  

	

	
相关TAG标签
																		 微信
								 		         															 小程序
								 		         															 拼图游戏
								 		         															 实战教程
								 		             

	

		
上一篇：小程序生成海报保存分享图片详细教程

		
下一篇：微信小程序有旋转动画效果的音乐组件实例展示

	

	

	
相关文章

	

	
	
热门专题推荐
																														 微商怎么做
													 微信表情包
													 微信教程
													 微信昵称
													 微信头像
													 python
													 小马激活工具
													 office激活
													 qq网名
													 qq表情包
										 				 				 	
    

    

	

		
		
	

	

	

		
图文推荐

	

    

	
	
	

	
	
	

	

		

        
        
		

		

			
文章
推荐

                
		

		
		

		
		
		

		
		

			
点击排行

			

				

					

																			

			

		

		

		
           
		

		

			

				
			

		

		

			
			
        

	
























关于我们 |
联系我们 |
广告服务 |
投资合作 |
版权申明 |
在线帮助 |
网站地图 |
作品发布 |
Vip技术培训 |
举报中心



版权所有: 全峰安全联盟--致力于做实用的IT技术学习网站