微信小程序-实战巩固(二)
刚刚写了小程序入门没几天,小程序就开放个人开发者资格,感觉为我而来啊 (≧▽≦)/。迫不及待的去注册,准备将之前的处女作传上去体验一把,结果卡在了服务器配置上:免费的果然不靠谱/(ㄒoㄒ)/~~,后来尝试用个人服务器转发代理请求,发现不支持http,必须https!必须https!必须https!
好不容易做的项目不能上线,感觉心被掏空了,这种憋屈大家懂得~,于是不甘寂寞的我,准备做个不需要请求的单机版,就是这么机智(*^__^*) 嘻嘻……文末高能,慎入~
接下来我们开始动手吧,之前做过类似连连看,这次准备尝试做个小程序扫雷,来个最终效果图,先睹为快吧
因为有了上一节入门基础,这一节就讲的快一点,如果有什么不太理解的,可以去看我的上一篇文章《微信小程序-开发入门(一)》
一、初始化项目
主要包括:设置app.js、app.json和app.wxss三个文件,建立pages文件结构
//app.js,将游戏配置文件放在APP中,可实现跨页之间共享
App({
row:12,//扫雷游戏的行数
column:8,//扫雷游戏的列数
bomb:8//包含雷的总数
})
二、游戏页面逻辑
重点在首页游戏逻辑的处理,因为小程序以数据为驱动,无法操作dom,所以很多实现最终要落实到数据上,查看如下index.js
//index.js
Page({
data: {
dialog_warn:false,//通过修改此数据值,改变弹框的显示状态
dialog_suc:false, //游戏成功,设为true,视图层通过wx:if来判断是否渲染该弹窗
count:null,//翻牌计数,初始值为app.row*app.column
gamearr:[]//游戏地图的基础数据(二维数组),根据此来生成游戏
}
})
<!--index.wxml-->
<view class="dialog warn" wx:if="{{dialog_warn}}">
<icon type="warn" size="60" color="orange"></icon>
<text>Game Over</text>
<button bindtap="reset">重新开始</button>
</view>
<view class="dialog success" wx:if="{{dialog_suc}}">
<icon type="success" size="60" color="green"></icon>
<text>Success~</text>
<button bindtap="reset">重新开始</button>
</view>
根据app.js中的数据,生成游戏地图数据:gamearr
setgamearr:function(row,column,bomb){//根据行列设置游戏二维数组(地图)
var that=this;
var arrmap=[];//二维初始数组,全为空
for(var i=row-1;i>=0;i--){
arrmap[i]=[];
for(var j=column-1;j>=0;j--){arrmap[i][j]={val:"",cover:true};}//val用来记录周边雷的数量,cover用来记录是否翻开:无dom操作只能用数据记录状态
}
var arr=[];//一维自然数
for(var k=row*column-1;k>=0;k--){arr[k]=k}
//随机炸弹位置
for(var h=bomb-1;h>=0;h--){
var seat=arr.splice(Math.floor(Math.random()*arr.length),1)[0]
var r=Math.floor(seat/column),c=Math.floor(seat%column);
//console.log(seat+'n'+r+","+c);
arrmap[r][c].val="B";
arrmap=that.addcount(r,c,arrmap)//给炸弹周围九宫格增加标记数
}
that.setData({gamearr:arrmap})
},
给炸弹周围九宫格增加标记数
addcount:function(r,c,arrmap){
var that=this;
if(r-1>=0){//九宫格上三个
if(c-1>=0 && arrmap[r-1][c-1].val!="B"){arrmap[r-1][c-1].val++}
if(arrmap[r-1][c].val!="B"){arrmap[r-1][c].val++}
if(c+1<app.column && arrmap[r-1][c+1].val!="B"){arrmap[r-1][c+1].val++}
}
if(r+1<app.row){//九宫格下三个
if(c-1>=0 && arrmap[r+1][c-1].val!="B"){arrmap[r+1][c-1].val++}
if(arrmap[r+1][c].val!="B"){arrmap[r+1][c].val++}
if(c+1<app.column && arrmap[r+1][c+1].val!="B"){arrmap[r+1][c+1].val++}
}
//九宫格左右两个
if(c-1>=0 && arrmap[r][c-1].val!="B"){arrmap[r][c-1].val++}
if(c+1<app.column && arrmap[r][c+1].val!="B"){arrmap[r][c+1].val++}
return arrmap;
}
生成数据后,根据数据生成页面视图
<view class="game">
<view class="tr" wx:for="{{gamearr}}" wx:for-index="row" wx:for-item="itemrow"><!--根据数据遍历行-->
<view class="td" wx:for="{{itemrow}}" wx:for-index="column" wx:for-item="itemcolumn" data-row="{{row}}" data-column="{{column}}" bindtap="taphandler">
<view class="mask" wx:if="{{itemcolumn.cover}}"></view><!--遮罩层,无法用伪元素before来更改状态,只能数据来判断了-->
<text wx:if="{{itemcolumn.val==''}}">{{itemcolumn.val}}</text><!--根据数值显示不同样式,如果是web能用jquery选择器就简单多了,这里略显复杂-->
<text class="color1" wx:elif="{{itemcolumn.val==1}}">{{itemcolumn.val}}</text>
<text class="color2" wx:elif="{{itemcolumn.val==2}}">{{itemcolumn.val}}</text>
<text class="color3" wx:else>{{itemcolumn.val}}</text>
</view>
</view>
</view>
游戏控制部分,单元格tap事件
//游戏控制部分
taphandler:function(e){
var that=this;
var r=e.currentTarget.dataset.row,c=e.currentTarget.dataset.column;//无法想jquery获得index,只能用数据记录,直接获取喽
if(that.data.gamearr[r][c].val!="B"){//如果没点到炸弹
that.data.gamearr[r][c].cover=false;
that.data.count--;
that.setData({count:that.data.count})
if(that.data.count==app.bomb){that.setData({dialog_suc:true})}//当剩余单元格计数等于雷数,游戏胜利
if(that.data.gamearr[r][c].val==""){//如果点到的是空,将它周围的四个打开
that.data.gamearr=that.show4(r,c,that.data.gamearr)
// that.data.gamearr=that.show9(r,c,that.data.gamearr)//原先考虑九点,结果递归直接栈溢出了,(⊙﹏⊙)b
}
console.log(that.data.count)
}else{that.setData({dialog_warn:true})}//点到了雷,游戏结束
that.setData({gamearr:that.data.gamearr})
}
如果点击为空,将它周围四个翻牌,并进行递归操作
show4:function(r,c,arrmap){//显示周边的4点
var that=this;
if(r-1>=0 && arrmap[r-1][c].val==""){//上
if(arrmap[r-1][c].cover){
arrmap[r-1][c].cover=false;that.data.count--;that.setData({count:that.data.count})
that.show4(r-1,c,arrmap)//递归
}
}
if(r+1<app.row && arrmap[r+1][c].val==""){//下
if(arrmap[r+1][c].cover){
arrmap[r+1][c].cover=false;that.data.count--;that.setData({count:that.data.count})
that.show4(r+1,c,arrmap)//递归
}
}
if(c-1>=0 && arrmap[r][c-1].val==""){//左
if(arrmap[r][c-1].cover){
arrmap[r][c-1].cover=false;that.data.count--;that.setData({count:that.data.count})
that.show4(r,c-1,arrmap)//递归
}}
if(c+1<app.column && arrmap[r][c+1].val==""){//右
if(arrmap[r][c+1].cover){
arrmap[r][c+1].cover=false;that.data.count--;that.setData({count:that.data.count})
that.show4(r,c+1,arrmap)//递归
}}
return arrmap;
}
三、游戏设置
游戏设置就相对简单了,直接读取app.js的数据为设置页的数据,操作修改则修改app数据,然后切换回游戏页面onshow获取更新后的数据重新生成游戏
// pages/set/set.js
var app = getApp();
Page({
data:{
row:app.row,
column:app.column,
bomb:app.bomb
},//游戏设置部分,修改设置将重新生成游戏
rowChange:function(e){app.row=e.detail.value;},
columnChange:function(e){app.column=e.detail.value;},
bombChange:function(e){app.bomb=e.detail.value;}
})
四、总结
做完了发布上传的时候才发现,小程序的分类里面没有游戏,更多的是工具应用类,不知道小程序以后会不会放开服务类目,拭目以待吧~
项目源文件:https://github.com/gavin125/wx_game
上传小程序审核等了一天,结果不通过详情如下,(⊙o⊙)…我想一个人静静…
- NLP+2vec︱认识多种多样的2vec向量化模型
- 深度学习数据集(一)
- 将Spring Boot应用程序部署到Bluemix
- Opencv学习(一)——安装配置遇到的问题
- The .NET of Tomorrow
- 国内自动驾驶企业在美国首秀其最新L4级自动驾驶货运卡车
- Nginx源码安装及调优配置
- Greenplum 简单性能测试与分析
- CentOS6 安装couchdb2 集群
- 如何遍历维数和各维上限未定的多维数组
- 求长度的另一种方法(""+obj).Length
- ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现
- GreenPlum 简单性能测试与分析(续)
- 最终版 Reflector v1.0 (+简单的反流程混淆)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Saltstack_实战指南02_各主机Pillar信息指定
- TypeScript基础看腻了?进阶实现智能类型推导的简化版Vuex,手把手带你实现。
- Linux下使用 github+hexo 搭建个人博客01-hexo搭建
- Linux下使用 github+hexo 搭建个人博客02-hexo部署到Github Pages
- Linux下使用 github+hexo 搭建个人博客03-hexo配置优化
- 接口测试框架实战(五) | 测试数据的数据驱动
- Linux下使用 github+hexo 搭建个人博客04-next主题优化
- Linux下使用 github+hexo 搭建个人博客05-next主题接入评论系统 来必力畅言Valine获取 livere_uid在Next主题配置浏览器访问数据
- Linux下使用 github+hexo 搭建个人博客06-next主题接入数据统计
- egg.js 动态转发代理
- Linux下使用 github+hexo 搭建个人博客07-next主题接入搜索和站点管理
- Linux curl 命令详解
- Linux curl 常用示例
- Linux curl 表单登录或提交与cookie使用
- Rsync 服务部署与参数详解