微信小程序别踩白方块（有效果图）

效果图

.wxml

<view class="block_index"><view wx:for="{{noe_list}}" wx:key="block_list" class="block_list" style="top:{{item.top}}vh;{{!ction || item.top < -24?'':'transition: top linear 0.1s;'}}"><view wx:for="{{item.arr}}" wx:for-item="cell" wx:key="key"style="{{item.index == index?(item.check == 1?'background:#000;':item.check == 2?'background:#aaa;':''):cell == 1?'animation:wrong 3 0.3s;background:#e54d42;':''}}"bindtap="block_tab" data-index="{{item.cell}}" data-status="{{item.index == index?false:true}}" data-arr="noe" data-cell="{{index}}"></view></view>
</view>
<view class="model" wx:if="{{!ction}}"><view bindtap="list">开始游戏</view>
</view>

.wxss

view{box-sizing: border-box;}
.block_index{width: 100%;height: 100vh;overflow: hidden;position: relative;}
.block_list{width: 100%;height: 25vh;float: left;position: absolute;border-bottom:1px solid #fff;border-top:1px solid #fff;}
.block_list>view{width: 25%;height: 100%;float: left;background: #fff;border-left: 1px solid #fff;}
@keyframes wrong{from {background-color: #e54d42;}to {background-color: #fff;}
}
.model{width: 100%;height: 100vh;background: rgba(0, 0, 0, 0.6);z-index: 10;position: fixed;left: 0;top: 0;
display: flex;align-items: center;justify-content: center;}
.model>view{height: 64rpx;line-height: 64rpx;font-size: 28rpx;border-radius: 50rpx;padding: 0 36rpx;
color: #fff;background-color: #e54d42;}

.js

Page({data: {noe_list:[],ction:false,for_index:0,},list(e){var that = this;that.setData({for_index:0,ction:true,})that.noe_tab()that.terval()},terval(){var that = this,noe_list = that.data.noe_list;that.data.time_terval = setInterval(function() {for(let i = 0;i < 6;i++){if(noe_list[i].top >= 80 && noe_list[i].check != 2){that.failed()}else{if(noe_list[i].top > 110){noe_list[i].index = Math.floor(Math.random() * 4)noe_list[i].check = 1noe_list[i].top = -26that.setData({noe_list:noe_list})}else{if(i == 0 || noe_list[i - 1].top >= -25 || noe_list[i].top > -25){noe_list[i].top += 4}}}}that.setData({noe_list:noe_list})},50)},block_tab(e){var that = thisvar index = e.currentTarget.dataset.index,status = e.currentTarget.dataset.status,block_list = that.data.noe_list;if(status){block_list[index].arr[e.currentTarget.dataset.cell] = 1that.setData({noe_list:block_list,})that.failed()return}block_list[index].check = 2that.setData({for_index:that.data.for_index + 1})that.setData({noe_list:block_list,})},noe_tab(e){var noe_list = [],arr = [];for(let i = 0;i < 6;i++){arr = Math.floor(Math.random() * 4) + 1noe_list.push({index:arr - 1,cell:i,check:1,arr:[],top:-50})for(let j = 0;j < 4;j++){noe_list[i].arr.push('')}}this.setData({noe_list:noe_list,})},failed(e){var that = thisclearInterval(that.data.time_terval)that.setData({ction:false,})wx.showModal({title: '提示',content: '失败了，消灭了'+that.data.for_index+'个黑方块',confirmText:'重新开始',success (res) {if (res.confirm) {that.list()}}})},
})

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。

微信小程序别踩白方块（有效果图）相关推荐

【无标题】uniapp中页面跳转白屏微信小程序跳转白屏
微信小程序tab切换白屏这几个图标切换会出现短暂的白屏解决方法如下组件引入 1.先在common 下建立一个文件夹mixin 下 lodaingPlus.vue 组件 <template&g ...
【微信小程序】自定义弹窗蒙版输入框效果图完整代码
[微信小程序]自定义弹窗文本输入框效果图&完整代码效果图在输入框中进行内容的输入点击确认后在姓名一栏进行更新修改点击返回后姓名一栏不做任何修改在这个的基础上你可以自定义任何弹窗 wx ...
微信小程序开发踩坑日记
2017.12.29 踩坑记录引用图片名称不要使用中文,尽量使用中文命名,IDE中图片显示无异样,手机上图片可能出现不显示的情况. 2018.1.5 踩坑记录微信小程序设置元素满屏,横向直接w ...
微信小程序入门踩坑记（妥妥的干货，新手快快看过来）
初次上手微信小程序,各种踩坑各种百度,草草扫过官网的文字,呃....表示记不住不想看,然后看了一本入门基础, 诺,就这本啦(链接:https://pan.baidu.com/s/15hKlDNpowU ...
微信小程序开发踩坑合集
微信搜索:凯小白学编程回复小程序领取1000套小程序源码本文分享一下开发小程序是遇到的一些问题.展示了曾经开发过的两个小程序中遇到的坑下一篇文章预告:<Maven入门> ...
微信小程序开发踩坑经验——小蜗社群
2019独角兽企业重金招聘Python工程师标准>>> 之前遇到并且解决的坑,这边也渐渐忘记了,在这里就不列出来了-- 1.wx.redirectTo和wx.navigateTo ...
微信小程序 NFC 踩坑记录
需求读取URL 写入URL 操作流程一.读取 1. 获取NFC适配器实例 this.NFCAdapter = wx.getNFCAdapter() 2. 开始监听贴卡 this.NFCAdapte ...
微信小程序——日常踩坑（wx.pageScrollTo滚动时有抖动问题）
在小程序的开发过程中,有个功能是点击后需要往view层中添加数据内容,在添加后需要将内容滚动到最下面一条,以便有更好的用户体验. 开始是选择了使用wx.pageScrollTo接口,通过获取当前vie ...
微信小程序加水印（含代码效果图）
watermark.wxml组件 <view class="water_top" style="pointer-events: none;">< ...

微信小程序别踩白方块（有效果图）

效果图

.wxml

.wxss

.js

微信小程序别踩白方块（有效果图）相关推荐

最新文章

热门文章