【每日一练】99—实现一个简单的配对游戏

文 | 杨小爱

写在前面

前段时间&＃xff0c;有个很火的游戏&＃xff0c;《羊了个羊》&＃xff0c;很多人都说&＃xff0c;这是个虐智商的游戏&＃xff0c;我周围也有很多朋友玩过&＃xff0c;说基本过不了关。当然&＃xff0c;我没有亲自去体验过&＃xff0c;因为&＃xff0c;我对游戏这种东西不是很感冒。

后来&＃xff0c;网络上就有人把这个游戏的源码扒出来晒了一下&＃xff0c;发现&＃xff0c;不是你过不了关&＃xff0c;是程序设计的时候&＃xff0c;做了点功课&＃xff0c;或者说程序员故意偷了点懒&＃xff0c;有意让人通关概率降低&＃xff0c;这样&＃xff0c;就可以激化大家玩游戏的兴趣&＃xff0c;一般人都想通关&＃xff0c;越是过不了关&＃xff0c;就越要使劲玩。

而作为程序员&＃xff0c;完全可以自己写一个游戏&＃xff0c;既可以自己玩&＃xff0c;也可以跟朋友一起玩。

因此&＃xff0c;今天&＃xff0c;我们就来练习写一个简单的配对游戏&＃xff0c;需要玩游戏的人眼手一起协同工作&＃xff0c;有兴趣的小伙伴&＃xff0c;可以自行试一下&＃xff0c;以下是今天练习的最终效果&＃xff1a;

另外&＃xff0c;需要今天练习里的图片素材&＃xff0c;请自行下载&＃xff1a;

下载地址: https://url81.ctfile.com/d/21793581-52702831-d4af17?p&＃61;2698 (密码: 2698)

看完了最终的练习效果&＃xff0c;我们再一起来看一下它的代码实现过程。

HTML代码&＃xff1a;

一个简单的配对游戏

CSS代码&＃xff1a;

*
{margin: 0;padding: 0;box-sizing: border-box;font-family: &＃39;Poppins&＃39;, sans-serif;
}
body
{display: flex;justify-content: center;align-items: center;min-height: 100vh;flex-direction: column;
}
h2
{margin-bottom: 30px;font-size: 2.5em;
}
.box
{position: relative;width: 600px;height: 200px;background: #000;display: flex;justify-content: center;align-items: center;flex-direction: column;border-bottom: 2px solid #555;
}
.box label
{position: relative;height: 33.333%;width: 100%;border: 2px solid #555;border-bottom: none;
}
.box label input
{appearance: none;
}
.box label i
{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: 600px;
}
.box label:nth-child(1) i
{background-image: url(images/01.jpg);animation: animate 0.5s steps(3) infinite;
}
.box label:nth-child(2) i
{background-image: url(images/02.jpg);animation: animate 0.4s steps(3) infinite;
}
.box label:nth-child(3) i
{background-image: url(images/03.jpg);animation: animate 0.7s steps(3) infinite;
}
&＃64;keyframes animate
{0% {background-position: 0px;}100% {background-position: 600px;}
}
.box label input:checked ~ i
{animation-play-state: paused;
}
.reset
{margin-top: 40px;border: none;font-size: 1.25em;padding: 10px 25px;background: #333;color: #fff;
}
.reset:active
{background: #d63c3c;transform: scale(0.95);
}

写在最后

如果你写完了这个简单的游戏&＃xff0c;你也可以发给你的朋友们&＃xff0c;让他们也来试试这个简单的游戏哦。

当然&＃xff0c;我们的目的不是单纯的玩游戏&＃xff0c;而是通过实现游戏来达到学习编程的目的。

今天的内容&＃xff0c;就先到这里了&＃xff0c;希望今天的小练习对你有用&＃xff0c;如果你觉得有帮助的话&＃xff0c;请点赞我&＃xff0c;关注我&＃xff0c;并将它分享给你身边热爱编程&＃xff0c;喜欢游戏或者做开发的朋友&＃xff0c;也许他们也喜欢&＃xff0c;也许也能够帮助到他。

我是杨小爱&＃xff0c;我们明天见。

学习更多技能

请点击下方公众号