中国象棋-单机游戏-微信小程序的项目开发流程详解

关于此文章能看懂的条件：对使用微信开发工具熟悉一点即可

在微信开发工具中，用小程序方式新建或打卡项目，

注意：如果是下载来的项目，解压后，要选小程序打开，选错是打不开的哦~
如图

项目源代码里可看到，打开文件再pages/index/index.js，里面有开始实现的，从onLoad()加载方法中写初始化逻辑代码，定义好需要处理数据

onLoad() {//...//这里实现了初始化逻辑方法，调用执行this.initData();//...
}
/**
* 实现方法
*/
initData: function(){var data = this.data;//定义所有棋子集合，先空着，后面画出来就有data.allPieces = [];//定义选中的棋子，默认null就当没选data.selectedPiece = null;//定义状态的，看甲乙哪一方棋手先手了，再赋值，data.flag = null;//定义游戏是未开始data.playing = false;//定义目的棋子存的数据，用于判断是否可吃data.piece = null;//定义棋盘坐标的，棋子位置数据data.site = null;//定义游戏是未结束data.gameover = false;//...
}

准备一个画布Canvas，画一个棋盘,需要用到strokeRect()画矩形
接着画纵横线相连，用moveTo()和lineTo()画线，最后用stroke()在棋盘上画出方格效果

onLoad() {//...//这里实现画棋盘的逻辑方法，调用执行this.initChessboard();//...
}
/**
* 实现方法
*/
initChessboard: function(){var canvA = wx.createCanvasContext('chess_a');canvA.strokeRect(padding, padding, data.canvMaxW - 2 * padding, data.canvMaxH - 2 * padding);//...for (var i = 1, index = 0, w = data.canvMaxW - padding; i < 9; i++) {index = padding + cH * i;canvA.moveTo(padding, index);canvA.lineTo(w, index);}//...canvA.stroke();canvA.draw();
}

如图

想到棋盘是固定且不会动的特点，棋盘就放在一个新建视图层中，文件在/pages/index/index.wxml，把这图层作为游戏背景，
PS：如果不想画棋盘，嫌麻烦的❀，就网上找个类似棋盘的背景图来代替，用笔者上面的截图做背景图也可以

中国象棋-单机游戏-微信小程序的项目开发流程详解相关推荐
1. 微信小程序自定义组件开发图文详解
  要实现的效果如下图红色框部分就是我们的自定义组件第一步:与pages同级新建一个components文件夹,用于存放所有的自定义组件方便统一管理第二步:在这个components上鼠标右键选 ...
2. 微信小程token_微信小程序url与token设置详解
  微信小程序url与token设置详解新浪云应用sae的代码里创建一个weixin.php文件,写入以下代码 isValid(); class wechatAPI { public function ...
3. 微信小程序一键置顶操作详解：
  微信小程序一键置顶操作详解: 第一种方式:采用scroll-view滚动视图实现第二种方式,直接用view实现第一种方式:采用scroll-view滚动视图实现下面是代码简介: wxml文件代码 ...
4. 小程序setdata优化_微信小程序 setData的使用方法详解
  微信小程序 setData的使用方法详解微信小程序 setData的使用方法详解最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元 ...
5. 【俄罗斯方块】单机游戏-微信小程序项目开发入门
  这是一个仿俄罗斯方块小游戏的微信小程序,只需要写一小段代码就实现出来了,有兴趣的同学完全可以自己动手开发,来看看实现过程是怎样的呢,边写边做,一起来回忆小时候玩过的经典俄罗斯方块游戏吧. 文章目录创 ...
6. 【图片消消乐】单机游戏-微信小程序项目开发入门
  这是一个微信小程序项目,是类似开心消消乐的休闲小游戏,老少皆宜,游戏互动里面的图片是用的任何图片素材,根据自己的需求更换图片即可.想要做游戏不知道怎么做,建议从这个小程序入手,花时间研究学习,很快就拥 ...
7. 微信小程序优缺点及开发流程
  概述 Mini Program,不用安装即可使用的app,微信为入口,好处多多. 小程序作为微信的一个内部产品,始终是服务用户的,把用户体验放到第一位,而不是开发人员.所以,小程序以后肯定会根据用户体 ...
8. 微信小程序富文本解析点击图片放大_微信小程序解析富文本过程详解
  前言最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签. 开始的时候想过自己写方法 ...
9. 微信小程序01【目录结构详解、视图与渲染、事件、input、scroll-view】
  学习地址:https://www.bilibili.com/video/BV1sx411z77P 笔记01:https://blog.csdn.net/weixin_44949135/article/ ...
10. 微信小程序富文本rich-text使用详解-微信小程序系统学习攻略
  也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,rich-text 标签可以用来显示富文本 html内容,可以渲染部分html标签,全局支持class和style ...
最新文章
热门文章

中国象棋-单机游戏-微信小程序的项目开发流程详解

关于此文章能看懂的条件：对使用微信开发工具熟悉一点即可

中国象棋-单机游戏-微信小程序的项目开发流程详解相关推荐

最新文章

热门文章