html5拼图微信小游戏,微信小程序:拼图游戏
微信小程序:拼图游戏
源代码:https://github.com/lcp1551/lcpISfat
游戏界面
初始化游戏:
游戏成功:
思路&功能:
1.初始化,将数字1~8存放在数组中,随机打乱后拼接一个9(空白格),修改空白格的样式
2.点击数字,判断空白格对于其所在位置的方向,进行相应的上下左右移动
3.上下左右移动,及把移动的两个数字互换在数组中的位置
4.判断数组中元素是否是[1,2,3,4,5,6,7,8,9],是则游戏成功,
5.计时,利用定时器,结束,清除定时器
代码:
项目中所用到的数据:
data: {
num: ['★', '★', '★', '★', '★', '★', '★', '★', '★'], //初始化前
hidden: true, //隐藏空白格中的数字
time:0, //秒数
t:'' //定时器
}
构建页面:index.wxml
{{item}}
需要传两个数据过去,一个是被点击块的下标index和块中的数字item
动态为空白格[9]添加样式active
{{item == 9?'active':''}}复制代码
游戏初始化:
init:function(){
this.setData({
num:this.sortArr([1,2,3,4,5,6,7,8]).concat([9])
})
}
初始化的时候,这里用了sortArr(arr)打乱数组,并拼接个空白格[9],这样让空白格初始化的时候永远处于最后一位。
随机打乱数组:
sortArr: function (arr) {
return arr.sort(function () {
return Math.random() - 0.5
})
}
这里用了最简单的打乱方法,缺点就是打乱不完全
给每个块添加点击事件onMoveTap:
onMoveTap: function (e) {
var index = e.currentTarget.dataset.index;
var item = e.currentTarget.dataset.item;
if (this.data.num[index + 3] == 9) {
this.down(e);
}
if (this.data.num[index - 3] == 9) {
this.up(e);
}
if (this.data.num[index + 1] == 9 && index != 2 && index != 5) {
this.right(e);
}
if (this.data.num[index - 1] == 9 && index != 3 & index != 6) {
this.left(e);
}
如果空白格的下标比所点击的块的下表大3,则表示空白格在所点击块的下方,那么点击后向下移动;
如果空白格的下标比所点击的块的下表小3,则表示空白格在所点击块的上方,那么点击后向上移动;
如果空白格的下标比所点击的块的下表大1,则表示空白格在所点击块的右方,那么点击后向右移动,需考虑点击快是否在容器右边缘;
如果空白格的下标比所点击的块的下表小1,则表示空白格在所点击块的左方,那么点击后向左移动,需考虑点击快是否在容器左边缘;
移动:
以向上移动举例
up: function (e) {
var index = e.currentTarget.dataset.index; //当前数字下标
var temp = this.data.num[index];
this.data.num[index] = this.data.num[index - 3]
this.data.num[index - 3] = temp;
this.setData({
num: this.data.num
})
if (this.data.num.toString() == [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) {
this.success();
}
}
移动后,将所点击块与空白格互换在数组中的位置,并判断目前的数组是否满足游戏成功的条件,判断数组相等,我这里把数组转化成字符串做的比较
游戏成功:
success: function () {
var that = this;
wx.showToast({
title: '闯关成功',
icon: 'success',
success: function () {
that.init();
}
})
}
游戏成功,弹出交互反馈窗口,并初始化重新打乱数组
定时器:
timeCount:function(){
var that = this;
var timer = that.data.time;
that.setData({
t:setInterval(function(){
timer++;
that.setData({
time:timer
})
},1000)
})
}
开始结束游戏:
timeBegin:function(){
clearInterval(this.data.t);
this.setData({
time:0
})
this.timeCount();
this.init();
},
timeStop:function(){
clearInterval(this.data.t);
if (this.data.num.toString() != [1, 2, 3, 4, 5, 6, 7, 8, 9].toString()) {
this.fail();
}
}
给开始按钮绑定timeBegin事件,初始化游戏
给结束按钮绑定timeStop事件,判断是否游戏成功
html5拼图微信小游戏,微信小程序:拼图游戏相关推荐
- 通过java程序写一个简单的创造游戏角色的程序
一.题目分析: 题目要求,编写一个简化的创造游戏角色的程序,游戏角色应有:姓名,性别,种族,职业,力量,敏捷,体力,智力,智慧,生命值,魔法值等属性. 题目思路:根据题目可知,无论创建什么种族角色,都 ...
- 微信小程序(游戏)----拼图游戏(设计思路)
微信小程序(游戏)----拼图游戏(设计思路) 设计思路 1.将一张海报等分成 N*N 的矩阵 方法一:利用两个组件循环完成,view组件和image组件,view组件作为盒子规定大小--超出部分不显 ...
- 微信小程序拼图游戏(有效果图)
效果图 仿win10拼图游戏,默认数字拼图,可以自己上传图片进行拼图,图片缓存本地,同一横同一竖可以进行多个移动,可以自定义拼图宽高rpx. 下载地址:https://download.csdn.ne ...
- 基于微信小程序的游戏账号交易小程序
文末联系获取源码 开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/my ...
- 小程序源码:修复图片音频全新升级带特效喝酒神器小游戏微信小程序
这是一款全新升级带特效喝酒神器小游戏微信小程序源码 小编发现很多喝酒神器小程序都不带特效和音效的 感觉差了那么一点意思而且感觉也不炫酷 所以小编今天给大家带来一款带特效,音效炫酷的喝酒神器 该款神器由 ...
- 微信小游戏和小程序的区别
微信小游戏在小程序的基础上提供了WebGL接口的封装,使渲染能力和性能有大幅度提升. 和H5游戏相比 小游戏 = H5游戏 + (微信社交能力.文件系统.工具链) - (DOM.BOM.CSS.EVA ...
- H5飞翔的小鸟游戏微信小程序源码
Java SpringMVC+H5飞翔的小鸟游戏微信小程序源码 试验性质的一个微信小程序,用canvas做的一个类似flappy-bird的小游戏. 包含一些基本的功能:躲避障碍物.计分.排行榜等等. ...
- Java SpringMVC+H5飞翔的小鸟游戏微信小程序源码
源码介绍 Java SpringMVC+H5飞翔的小鸟游戏微信小程序源码 试验性质的一个微信小程序,用canvas做的一个类似flappy-bird的小游戏. 包含一些基本的功能:躲避障碍物.计分.排 ...
- 微信小程序猜拳游戏步骤及代码
完整步骤: 1. 创建小程序项目:使用微信开发者工具创建一个小程序项目,并在项目中添加一个页面,用于猜拳游戏. 2. 定义数据结构:定义一个数据结构,用于存储猜拳游戏的信息,包括玩家出拳.计算结果等信 ...
- 小程序经典游戏,微信欢乐坦克大战攻略
微信小程序游戏火爆,其中微信欢乐坦克大战是比较不错的小游戏之一,但有的小伙伴打不过一些对手,我们下面就给大家些技巧攻略吧. 猥琐流和闪电战攻略大全: 1.猥琐流 猥琐流的玩法:躲在墙边等敌人在你的扫射 ...
最新文章
- 使用Bot Service创建Bot Framework
- 有了实例化需求,交付高质量软件不再是空谈
- C++实现最小二乘法对y=exp(x)的二次拟合
- 比特币黄金首遭“51%攻击”,可能动摇数字货币世界的根基
- 保障粮食安全-农业大健康-温铁军 谋定落实粮食安全责任
- Hbase总结(十)Hhase性能调优
- mysql代码不熟_mysql存储过程的错误,语法不熟,找了好久没找到错误。。。
- 手机闪存速度排行_2020年双十二3000-4000元高性价比手机推荐!
- Java:单例模式的七种写法 (转)
- postman 测试excel下载_使用Postman轻松实现接口数据关联
- 名字正则只能是中文英文_【R语言新书】1.5 正则表达式
- 手机app通达信添加自定义公式(分时T+0)为例子讲解
- 结合springboot搭建日志采集系统EFK
- Python爬虫分析,全国结婚率连续5年下降,这届年轻人,为什么不敢结婚?
- 【转】征集华人操作系统项目列表
- 用telnet逛bbs
- Android 语言码_国家码
- 【软件工程】机房文档--可行性研究报告
- 合成文本图像_设计中哪个更重要:图像还是文本?
- 图片转文字怎么转?这些方法我只告诉你
热门文章
- php函数strrchr、substr、is_dir、unlink
- arcgis desktop 地理编码服务发布
- 分享一个自己写的py扫描路径工具
- Python(七)Socket编程、IO多路复用、SocketServer
- 打印出现:You've implemented -[UIApplicationDelegate application:didReceiveRemoteNotification:...
- Exchange2016-抢先体验
- [转] 基于 Apache Mahout 构建社会化推荐引擎
- 2008 DHCP中继器代理服务
- mysql基本概念之关系_Mysql数据库学习(一):数据库基本概念、关系型数据库、Mysql数_MySQL...
- python+requests+pytest_Python+Requests+Pytest 在window下的安装(附pip升级过程遇到的问题)...