三国经典网

咳咳，今天给大家分享个有点意思的小游戏实践，嘿就是那种“点一下，衣服就消失”的游戏。别想歪，咱们可是正经的技术交流。

动手前的准备

一开始我是拒绝的，毕竟听起来就有点...咳咳，你懂的。但是后来想想，作为一个技术宅，研究一下也无妨嘛而且网上搜下，发现这类游戏还挺多的，什么“脱衣麻将”，“撕掉她的外衣”，各种各样的。

我找一些资料，发现这类游戏基本玩法都差不多，就是点击屏幕，然后目标身上的衣服就会少一件。我的思路也就有：搞个图片，然后能让图片上的某些部分消失，或者更准确地说，变成透明的。

开始动手实践

我得弄个图片。这个简单，网上随便找一张就行。但是，怎么让图片上的衣服“消失”？

我想几个办法：

小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区

• 最笨的办法：准备一堆图片，每张图片都比前一张少一点衣服，然后点击的时候切换图片。但这样一来，图片数量太多，而且效果肯定很生硬，不流畅。
• 稍微聪明点的办法：用一些图像处理的工具，把衣服部分“抠”出来，然后点击的时候把这部分隐藏掉。但是这样也有问题，如果衣服和背景颜色很接近，或者很复杂，“抠”起来就很麻烦，效果也不
• 的办法：我想到一个更巧妙的方法，就是用“遮罩”。准备一张黑白的图片，白色部分是衣服，黑色部分是然后点击的时候，把这张黑白图片“盖”到原图上，白色部分显示，黑色部分透明。这样，衣服就被“遮”住，看起来就像消失一样。

我选第三种办法，因为感觉这种方法最灵活，效果也最接下来就是找工具。我试几个图片编辑工具，发现一个在线的工具就能满足我的需求。

实现效果

我把图片上传到工具里，然后用画笔把衣服部分涂成白色，其他部分涂成黑色。保存下来，一张黑白的“遮罩”图片就做好。

我开始写代码。由于只是做一个演示，我就用最简单的网页来实现。我用一个<img>标签显示原图，另一个<img>标签显示“遮罩”图片。然后写一段很简单的JavaScript代码，当点击原图的时候，就把“遮罩”图片显示出来，并且设置它的opacity属性为0.5，这样就能看到半透明的效果。

的效果嘛嘿还真有点意思。点击图片，衣服就“消失”，只是看起来消失，实际上是被“遮罩”图片盖住。

这回实践还挺有趣的。虽然只是一个小小的尝试，但我也学到一些新的东西。下次有机会，我再试试更复杂的效果，比如让衣服一件一件地“消失”，或者加一些动画效果，想想就有点小激动！