层叠消融游戏(用canvas做个层叠消融游戏)

层叠消融游戏(用canvas做个层叠消融游戏)，哪吒游戏网给大家带来详细的层叠消融游戏(用canvas做个层叠消融游戏)介绍，大家可以阅读一下，希望这篇层叠消融游戏(用canvas做个层叠消融游戏)可以给你带来参考价值。

作者：睿江云计算

大家好，最强大脑看了没，里面的比赛游戏记得没。里面难得一个我这平民智商可以理解的游戏项：层叠消融，还记得吗。找不到现有的玩？那就赶紧做一个，验证一下自己智商有多低吧。

本篇为小程序的一学习笔记，以一小游戏‘层叠消融’为例子，对canvas组件进行展开学习。

开场白就没有了，直奔主题。先来看看小程序在组件使用上，对canvas做了什么。

em……，首先，指定了作为唯一标识符的属性canvas-id，因为小程序搭了一套MV*框架层叠消融游戏，所以对于元素绑定这个，和用原生的js的方式不同。然后就是一系列的手势触发事件。其他的，其实在使用上也没做什么特别的处理嘛。既然如此，那就直接贴上对canvas进行元素绑定的代码吧。

因为小程序的canvas元素默认宽高是不会覆盖全屏的，所以在初始化canvas之后要进行重新设置宽高。屏幕的宽高可以通过API:wx.getSystemInfo获得。

接下来就是画图了。‘层叠消融’这个游戏的主要效果就是图片叠加部分双数相消。具体效果如图：

上面的图形由三个基本图形（正方形）组成，用这三个基本图形拼出上面的目标图案，则算通关。

需求：多图形相叠双数相消。要实现这个效果，用传统的css是很麻烦的，这时canvas的灵活性就体现出来了。canvas对图片图形的处理是像素级的，其本身提供了一系列的图形遮盖策略。globalCompositeOperation这个属性设定了在画新图形时采用的遮盖策略，其值是一个标识12种遮盖方式的字符串。其中‘xor’方式正能实现我们双数相消的需求。

立即贴上主要的代码：

（小程序的onReady函数，这里具体的调用我打包了一下，具体打包细节我就不在这里细讲了）

效果图如下：

既然是小游戏，那就要会动是不是。需求：手指点上时，选中图片跟着移动。

这时，就要用上小程序给我们提供的手势触发了，用到的有这两个：

bindtouchstart用于判断手指选中那个图形，bindtouchmove用于图形移动。

对于判定选中图形这个问题，赶紧回忆起你的小学数学：沿着判定点向图形方向画一条射线，若相交点为单数，则判定点在图形中，否则，判定点在图形外。转换为代码模式如下：

下面就是移动了层叠消融游戏，canvas的图形的移动很粗暴，那就是擦掉旧的重新画上新的。需要记录下多次bindtouchmove触发时手指的位移->计算出图形移动后的新定点坐标->在画布上擦掉旧图形->根据新坐标画上新图形。下面贴上主要代码：

效果图如下：

接下去就是通关判定、关卡设置、关卡选择……有点多，这些内容就留到下期吧。

邀请好友购买云服务器，轻松赚25%高额佣金，每邀请1个好友最高获300元，邀请越多赚得越多，参与活动请点击链接：

返回搜狐，查看更多

总结：以上内容就是针对层叠消融游戏(用canvas做个层叠消融游戏)详细阐释，如果您觉得有更好的建议可以提供给哪吒游戏网小编，层叠消融游戏(用canvas做个层叠消融游戏)部分内容转载自互联网，有帮助可以收藏一下。