三款游戏：《Flip Puzzle》、《2048》网页版、《Sight Battle》。
一：翻转拼图
其中我个人认为翻转拼图最好玩。 之前已经做过详细的逻辑和代码分析。 您可以通过下面的链接了解它。 代码可以在试用页面查看：
在准备写这篇文章之前，你必须至少了解 html、css 和 JavaScript。 如果您了解 jQuery 那就最好了。
首先贴出我一开始想到的发展规划：
逐步实施：
1：点击按钮改变颜色，
2：点击按钮可以改变旁边按钮的颜色
3：实现颜色变化的重复性，
4：设定界限，
5：设置成功条件。
试用页面如下：
因此，第一步是绘制一个按钮学网页游戏制作，添加一个JavaScript函数，并触发点击事件来修改按钮的背景颜色。 再次点击即可再次修改。 当这两件事付诸实施时学网页游戏制作，已经过去了一个多小时。 午饭前，我一直在郁闷如何让旁边的按钮变色。 最初的想法是为每个按钮设置一个ID并单独处理。 可想而知这是一个非常糟糕的主意，于是我开始考虑其他的解决方案。 我开始吃午饭，一路上我向师兄请教如何改变按钮旁边的颜色。 他提供的解决方案是使用jQuery遍历。 我昨天刚学了jQuery。 这个主意不错。 后来超哥还提供了一个想法，就是用一个二维数组来表示数值，点击一个按钮修改数据参数，然后调用一个函数刷新所有按钮的值。好吧，就决定是他了，（最终版本使用avalon.min.js），来吧，皮卡丘
二：2048网页版
2048这款游戏非常有名。 它可在移动设备、网络和 PC 上使用。 今天我们可以制作一个简单的版本来玩。
写作思路：
16 个按钮组成界面
通过js修改值
js捕获键盘事件并抓取方向键触发
触发事件修改按钮的值
编写一个算法来运行并根据按钮值对应的值获取新值。
修改并测试
运行界面：
请不要嘲笑我丑陋的设计。 我希望有女孩能够纠正它并给它一个美丽的颜色。
试用地址：
js代码我就不贴了，不过试用地址f12大家就知道了：
三：愿景之战
前段时间，我在太空看到一款很流行的小游戏。 它类似于一个表格，每次单击它时所有颜色都会改变。 找出哪一种颜色与其他颜色不同。 如果你觉得这个想法更清晰，就写下来并尝试一下。
试用网站：如果有地址f12，可以查看源代码。 我就不进一步分析了。
好吧，我承认这个代码比较low。 它不使用任何框架，并且可扩展性不太好，与我之前使用 avalon 所做的不同：
我主要是想用这段代码来复习一下。 我写了两节课。 如果是去年的话，我基本上半小时就能看完了……唉。 还是要经常练习代码，不然就得从头学起……
代码总体思路是：
使用div划分16个块。 用css处理样式。 在js中，捕获每次点击事件，每次生成一个4096以内的随机数，处理成颜色编码，然后修改每个div的背景颜色，然后生成一个随机数，将16去掉余数，转换成一个ID号，在随机的小范围内增加或减少其颜色代码，然后刷新背景颜色。
已发现的错误包括：
1：如果生成的随机数为0，则由于没有bu0 ID而无法进行游戏。 它已被修复。 如果找到0，则++；
2：如果生成的随机数与上一个相等，会导致颜色刷新失败。 这已得到修复。 与name_temp比较，相同则++；
3：在手机上显示不是很合适，尚未解决。
4：不同浏览器可能会看到不同的布局效果，未经测试。
运行截图：
后记：
小伙伴们，每个人的技能都是一步步积累的，制作小游戏、小项目让积累的过程变得更加愉快。
本文是我自己博客中几篇文章的总结。 您可以返回链接查看。 还有很多自制的小项目可以玩。
专栏作者简介()
陆毅14：一位年轻的程序员，从事数据收集和挖掘：个人博客。 主要技能树：python、爬虫、linux、web前端、ACM、骑行。
- - - - - - - - - 推荐 - - - - - - - - -
饭品社推出了十几款极客T恤，主题涉及程序员、电影、美剧、物理等。 单件59.9元，两件立减12元音效，四件立减28元。 详情请参阅网上商店的产品页面。
网店地址：
淘宝密码：复制以下红色内容3D植物，然后打开淘宝购买
饭品社，先用￥极客T恤￥预览（长按复制整篇文案，手机打开淘宝进入活动内容）
