1.前端实战:从零到一实现H5拼小游戏(附源码)
2.介绍素材-你是制作搜h制作搜如何收集H5素材的？
3.帝国CMS7.5仿《3500游戏》源码/大气H5游戏门户网站模板
4.H5游戏架设经验分享

前端实战:从零到一实现H5拼小游戏(附源码)

       去年，我开发了一个基于H5、索栏索栏JavaScript和CSS3的源码源码拼图小游戏。这款游戏利用了我自己封装的教程类Jquery框架Xuery，融合了许多经典的制作搜h制作搜JavaScript算法和CSS3特性，对提升大家的索栏索栏webkit源码结构编程能力大有裨益。文章末尾将提供源码获取方式，源码源码供大家学习体验。教程

       由于这款应用属于H5游戏，制作搜h制作搜为了使项目更轻量，索栏索栏我没有使用第三方UI库。源码源码如果大家想使用基于Vue的教程第三方移动端UI库，我可以推荐几个我之前使用过的制作搜h制作搜靠谱组件库：[此处省略推荐内容]。以上推荐的索栏索栏都是社区完善、bug较少的源码源码组件库，大家可以试试看。

       回到我们的小游戏开发，主要考验大家对JavaScript和CSS3的掌握程度。学习完这篇文章后，相信大家对JavaScript和CSS3的编程能力都会有极大的提升。之后，我还会介绍如何使用canvas实现生成战绩海报图的功能。

       我们先来看看游戏的预览界面：

       本文的算法实现方式在之前的拼拼乐文章中已有说明，这里主要介绍核心算法，至于vue-cli的使用方法，我之前也写过对应的文章，大家可以研究学习一下。vue-cli搭建项目方式如下：[此处省略搭建方法]。

       关于vue-cli3配置实战，可以参考《一张图教你快速玩转vue-cli3》。

       目前，我主要整理了以下核心功能，接下来我会一一为大家实现：实现纯JavaScript上传预览、实现拼图分割功能、实现洗牌算法、实现生成战绩海报功能。

       1. 实现纯JavaScript上传预览：文件上传预览主要采用FileReader API实现，原理是将file对象传给FileReader的readAsDataURL，然后转化为data:URL格式的字符串（base编码）以表示所读取文件的内容。具体代码如下：[此处省略代码]。

       2. 实现拼图分割功能：一般处理拼图游戏时，我们会采用以下方案：使用canvas分割、采用n张不同的切好的切片（方法简单，但会造成多次请求）、动态背景分割。导航页源码怎么用经过权衡，我选择了一种自认为比较优雅的方法——动态背景分割，只需使用1张，然后利用CSS切割，有点像经典的雪碧图。具体实现如下：[此处省略实现方法]。

       3. 实现洗牌算法：洗牌逻辑依托于随机算法，结合坐标系，实现一个随机生成二维坐标系的逻辑，然后通过改变每个切片的translate位置，配合过渡动画，即可实现洗牌功能和洗牌动画。具体实现如下：[此处省略实现方法]。

       4. 实现生成战绩海报功能：生成战绩海报我采用canvas来实现，对于canvas的api不熟悉的可以查看MDN，讲得比较详细。这里我简单实现一个供大家参考：[此处省略实现方法]。

       H5拼图小游戏我已在github开源，感兴趣的朋友可以在我github上学习参考。以上逻辑部分的代码可以直接整合到vue项目中，由于实现比较简单，这里我就不详细介绍了。

       如果想学习更多H5游戏、webpack、node、gulp、css3、javascript、nodeJS、canvas数据可视化等前端知识和实战，欢迎在《趣谈前端》一起学习讨论，共同探索前端的边界。

介绍素材-你是如何收集H5素材的？

       免费的素材网站有哪些？

       站酷

       网站介绍:诞生于年8月的站酷(

       ),以“为设计师及爱好者提供最便捷、最贴心的服务”为宗旨,是一个以“设计师”为中心,服务于创意产业、服务于创意人才的“设计师互动平台”。分享最新最实用的素材资源,推荐会员设计师的优秀设计作品,提供设计探讨技法交流的学习氛围。建站以来,内容不断充实,产品不断增加。现在,站酷(ZCOOL)已成为设计师最喜爱的设计站点之一。

       网站简评:专业完美的素材下载与设计分享网站,提供矢量素材、PSD分层素材、图标素材、高清、原创作品等内容。前沿时尚的源码退款违约金多少设计风格,日韩欧美设计素材应有尽有。站酷网站简洁美观,视觉冲击力强,广告排列整齐有序,设计师倾力推荐。

       懒人图库

       网站介绍:懒人图库自建站以来,一直致力于网页素材的提供,目标是做成国内最大的网页素材下载站。懒人图库口号:学会偷懒,并懒出境界是提高工作效率最有效的方法!

       网站简评:专注于提供网页素材下载,其内容涵盖网页素材、矢量素材、JS广告代码、小、网页背景、导航菜单、PNG图标,等等。懒人图库深入人心,做到了“让任何一个网页设计师都能轻松找到自己想要的素材”。

       中国素材

       网站简评:提供各类设计素材的收集下载,包括:、素材、壁纸、网页素材、动画素材、矢量图、PSD分层素材、3D、字体、教材、图标,等等。素材中国收集了很多商业广告的源文件(PSD/CDR/AI),部分资源需要收取一定费用(点数)。不足的是,文件下载页面的广告太多,造成版面凌乱,用户体验差(素材中国为个人站点,站长可能很注重挂靠联盟广告,感觉像是一个百度、谷歌广告网站)。另外,只支持迅雷、快车下载,考虑不是很周全,大概也是因为加入了迅雷联盟和快车联盟的缘故吧,要不怎么会这么一个劲的推荐使用“迅雷”、“快车”下载呢。

       素材资源库

       网站介绍:素材资源库是DESIGN旗下的设计资源网站,提供在线免费设计素材资源下载服务。

       网站简评:资源丰富,分类繁多,就是没有提供资源搜索功能,使用起来不太方便。提供网页模板、Flash源码、矢量素材、PSD素材、透明Flash资源、字体下载、PS笔刷、网页背景、音效素材、脚本特效,等等。

       在做H5的你,有没有这样的感受:做一个H5,花费时间最长的往往不是制作,而是素材的准备。没有素材储备的你是不是在黯然神伤?别担心,今天答主就跟大家一起聊聊H5素材的收集

       素材

       素材是H5页面最基本的元素,素材的运用很大程度上决定H5的视觉效果。小兽在这跟大家介绍几个素材网站。

       昵图网

       昵图网是一个设计素材,素材共享平台。平台每日浏览量达万,通达信箱体公式源码该网站的质量较高,一般下载需要共享分或现金购买,共享分可以通过上传获取,当上传的被采纳,会获得共享分,如果别人下载你上传的你也可以获得共享分。此外,开通VIP还可以获得共享分,共享分使用完后即使是开通VIP也不能再下载素材,有趣的是昵图网内VIP可以反复购买。

       昵图网内的素材都由网友上传,不拥有版权,如商业使用,H5er们最好先获得版权拥有者授权,以免非法使用引发纠纷。

       千图网

       千图网是国内免费素材最多的网站之一,网站内素材主要分为共享素材和原创素材,普通用户每日只能下载两次共享素材,想要无限下载共享素材或原创素材,则需购买原创VIP或共享VIP,购买VIP的费用均在每年元以内,相对来说比较划算,最大的好处是一旦你开通VIP,这一年内都可以无限下载。

       千库网

       千库网最大的亮点是素材免抠,该网站的口号是:“做设计不抠图、让设计师终止加班”。在千库网下载的素材多是PNG或PSD格式,素材质量高,涉及领域广,与千图网一样,千库网也是每天只能免费下载几次,无限下载需要开通VIP,VIP价格也是在元以内。

       Giphy

       Giphy是一个在线动态GIF搜索引擎,号称GIF界的谷歌,需要找GIF可以上这个网站找。

       Dribbble

       这是一个作品交流的网站,在这个网站当你点开一张时不仅可以看到这张的主要色彩运用,还可以看到别人对这个作品的评价。我很喜欢这个网站的作品风格。

       音效素材

       音效也是一个H5中至关重要的部分,精彩的音效能为H5加分。以下为大家推荐几个下载音效的网站。

       站长之家

       站长之家里拥有的素材类型只有你想不到没有它没有的,什么、字体、PPT、代码素材,这个网站统统有!站长之家的音效素材种类很多。

       爱给网

       爱给网的音效种类也较多,分为多种场景。

       Adobe

       很多人不知道的是,其实Adobe也有音效供我们下载,而且数量还不少,足足G,关键是还免费!

       网址:

       字体素材

       H5字体虽然没有前两个那么重要,但一个合适的字体跟H5风格相配,也会让H5看起来很舒服。

       站长之家

       这个万能素材网当然少不了字体素材啦。

       找字网

       该网站字体分类较为齐全,可以按照分类找到自己想要的风格。

       字体传奇

       可以多种专题字体打包下载,但没有分类,不太人性化。

       总结:除了以上这些介绍的网站,答主还会上花瓣网、tumblr、easyicon等等网站,在这些就没法一一列出来啦。推荐了那么多,不知道有没有合你心意的网站呢?

       现在在职场工作,很多时候都避免不了做ppt,但是总是做得不尽如人意,从内容和两个方面入手,那么就需要从不同的地方找到适合不同需求的素材。

       一个是在百度“素材“找素材

       ,但是找素材不是那么容易的,有些是以前攒下来的,你花心血找的话一定能够找到你满意的漂亮。

       然后,去专门的素材网站找也不错,比如

       昵图网,或者桌面壁纸网站

       ,

       Poco摄影社区。具体介绍下

       Poco摄影社区。

       这个网站的摄影类很好,包罗了人像、风景、纪实等等,而且比较其他同类型网站,个人认为这里的美图最多、最精、最全。进站点击人像栏目,可以找到人像摄影相关美图:又比如,点击LOMo栏目,就可以找到LOMo那类比较酷的了。

       还有

       堆糖。

       堆糖的主题是收集发现喜爱的事物,感觉这里的都很精美,整合了各种网友各种风格的。

       其实

       也可以自己学习制作

       ,那么你想要什么样的,需要什么样的,都可以根据自己的需求来自己设定。

       所以,

       可以找到好看的网站或者软件还是很多,哪怕是抖音,微博,小红书等日常常用的软件都可以找到自己想要的

       ,只是去掉一些水印或者多余的地方,只要自己需要的部分,截截图就可以了,注重学习一些基本的截图或者修图其实也是有必要的。

帝国CMS7.5仿《游戏》源码/大气H5游戏门户网站模板

       帝国CMS7.5仿制的《游戏》源码，打造大气的H5游戏门户网站模板，提供H5游戏在线网站源码，价值高达RMB。此模板内含移动端同步生成插件，138导航网源码打包轻松实现手机站的同步生成，适应移动互联网趋势。

       无论是建立在线游戏平台，还是作为推广少量大型游戏的渠道，均可获得可观的广告费用。游戏平台通常拥有稳定的流量，适合深度研究。亲测使用，确认可顺利运行。

       该模板专为游戏爱好者及开发者设计，简化了网站搭建与维护流程。不仅节省开发成本，还能快速搭建起具有专业外观的游戏网站。其支持的移动端同步功能，确保了网站在手机端的良好展示，增强了用户体验。

       帝国CMS H5游戏模板，为追求高效、便捷游戏网站搭建的用户提供了一站式解决方案。无论是追求创新的开发者，还是希望拓展游戏平台的运营者，都能从中找到灵感与实践路径。通过该模板，用户可以轻松实现游戏内容的在线展示与推广，为游戏产业注入新的活力。

       帝国CMS7.5仿《游戏》源码，是一款功能丰富、设计精良的H5游戏门户网站模板。其独特的价值在于，不仅提供了一套完整的在线游戏平台构建方案，还通过移动端同步技术，实现了网站在多终端上的无缝使用，满足了游戏行业的多元化需求。

H5游戏架设经验分享

       首先，我不是专业做游戏的，只是在一些机缘巧合下，发现可以自己架设游戏做GM，后台免费发送游戏中的各种充值和道具，然后在游戏里为所欲为，各种榜一秒杀，简直不要太爽，于是便一发不可收拾开始了游戏架设的研究...

       本文分享我对游戏架设的经验心得，如果你也喜欢架设游戏，那么这篇文章肯定会对你有所帮助。

       我目前架设运行的游戏都汇总在文章：好玩的免费GM游戏整理汇总，所有游戏架设教程，包含已下架的都在我博客的游戏分类中，网上大多是视频教程，而像我这种耗时耗力写详细图文教程基本是没有的。

       游戏架设对我来说就像打开了一个新世界，原来游戏还可以这么玩~

       最开始我是在某宝上发现有后台的游戏，可以任意充值和发送道具，觉得很爽，虽然还当不了榜一，但是可以体验满级VIP和各种道具带来的快感，不过这种游戏基本不会运营太长时间就会关服。

       后来我就想到是不是可以自己搭建个游戏，正好自己是做前端的，也很想研究下游戏界面是如何实现的，所以就开始研究，各种查找资料，直到自己搭建成功了第一款游戏《大天使之剑》，打开了新世界。

       我搭建的游戏基本都是Linux环境的H5游戏，只搭建过一款客户端类型的《阿拉德之怒》，因为自己是做前端的，所以对H5比较熟悉，而且因为自己使用的苹果手机，App需要签名会比较麻烦，而H5只要有浏览器就可以。

       至于为什么不用windows环境和一键端，则是因为我买的服务器配置都比较低，windows会占用过多内存，而一键端的集成特性会使得一台服务器基本只能搭建一个游戏，很不划算。

       我的博客和公众号初衷是分享一些IT技术文章，后来也把游戏架设写了进去，发现浏览关注人数增加了不少- -，占到百分之7、，这让我哭笑不得，总觉得背离了初衷。

       现在博客的点击量是W+，基本每天会有的访客和的点击量。

       公众号目前关注人数6千，嗯，大部分都是因为游戏关注的- -。

       然后还有个游戏群...主要是给大家游戏授权和交流用。

       架设游戏首先需要一台服务器，市面上的云服务器很多，建议选大厂的，2核4G内存6M宽带配置一般游戏足矣，H5游戏比较吃宽带，因为需要加载的网络资源比较多。

       个人推荐腾讯云的轻量应用服务器，性价比高，放心我不是打广告，我不配- -，新人、双十一或者新年活动比较合适，一年不到，有条件的可以多买几年，腾讯云轻量应用服务器还有个好处是可以免费创建两个快照，这点很实用。

       网上的资源网站其实很多，我整理了几个我常用的资源网站，有收费的也有免费的。

       以上网站有挂掉或者停止运营的风险，请谨慎购买。还有很多其他的资源网站，大部分都是搬砖的资源，很容易搜到。如果还找不到，可以看看以上这些资源网的友情链接。

       大部分资源网站用的都是Zibll、CeoMax或者Ripro主题网站，自己也曾想过搞一个的念头，奈何时间精力有限，就放弃了。我架设过的游戏资源都会免费分享在公众号上，大家可以通过公众号echeverra回复游戏名获取。

       架设游戏有时候是一件很玄妙的事情，《阿拉德之怒》我第一次架设还算顺利，现在已经连续运行了多天没有发生过异常重启，但是第二次换服务器架设却死活也不成功，我怀疑很大概率是由于服务器本身的问题。

       架设就好比你看说明书组装家具一样，只要安装指定的环境，按照步骤一步步来基本都会成功的，我写的图文教程都很详细，很多人都架设成功并在群里分享。如果环境步骤都没问题多次尝试还是不成功，那很有可能是遇到我上文提到的服务器自身问题。

       这里列举一些游戏群里大家架设大概率会遇到的问题：

       游戏是可以使用域名的，最开始我使用域名有两个原因，第一域名比直接IP访问更直观且高大上，第二如果服务器到期了，虽然要更换服务器IP，但是访问游戏的域名是不变的。

       但使用域名是有风险和限制的，域名备案需要填写网站类型，个人是没有运营游戏资质的，所以废了九牛二虎之力我又将域名形式改回了IP，如果你有类似想法就不要踩坑了- -。

       经常有人会问我一个服务器上能不能同时搭建多个游戏，答案是肯定的，我基本上每个服务器都会搭建2-3个游戏，还有博客网站等，这也导致我的服务器基本没有空闲的时候，一直有网络请求。

       想要一个服务器搭建多个游戏有几个比较苛刻的前提：

       第一是几款游戏搭建环境一致或兼容，如CentOs的版本，数据库的类型和版本等，只有环境都符合搭建的几个游戏才能都成功运行起来，比较好的一点是一般游戏对环境要求都比较通用，大部分使用CentOs 7 和mysql 5 都可以。

       第二内存足够，一般一个H5游戏会占用小2G左右的内存，所有4G内存的配置只能搭建两个游戏，需要注意的是使用内存超过%会有大概率端口异常挂掉的情况。这时候可以写个脚本监测端口，挂掉再重新启动即可。

       第三是端口不能冲突，几款游戏如果占用了同一个端口，那么肯定会有冲突，之前我搭建《冰雪传奇》和《雷霆传奇》就发生过冲突的端口，后来将《冰雪传奇》的端口进行了修改才解决。

       第四是数据库表名不能冲突，和端口冲突同理，只能修改数据库和源码中的表名解决，但这种情况并不常见，除非你搭建的几款游戏是换皮的。

       具体能否搭建多个游戏还需要实际去操作，多多尝试~

       拿到一款游戏源码我都会强迫症的全局搜索源码中的广告，然后去除掉，因为很影响玩游戏的心情。

       考虑安全问题，源码中的数据库密码和GM码我也会更改，建议大家也改掉。

       架设好之后我会试玩一段时间，有一些简单的BUG我会尝试修复下，如果比较严重修复不了，影响整体游戏体验的那就只能放弃了，这种坑我也踩了不少。

       我分享的游戏基本不会有大问题，而且都是我优化过的，像《梦幻西游》我就花了很长的时间去修复完善，直到满意为止。

       数据是无价的，所以数据要及时备份，不要等数据丢失了才后悔莫及，我会使用两种方式对数据进行备份处理。

       第一种是使用服务器快照，腾讯云轻量服务器有两个免费的快照，定期创建快照备份好，一旦有异常可对快照进行回滚恢复数据。阿里云的快照会按照容量收费，价格也很便宜。

       第二种是使用宝塔的计划任务，可以定时每天执行备份数据库和文件，发生异常可以导入备份的数据库，记得每隔一段时间把备份的数据下载到本地保存好，以防万一。

       虽然这些游戏源码或者端在网上很多，但或多或少都有版权问题，如果是架设的私服游戏以营利为目的那肯定是违法的。所以我架设的游戏都是无法内充的，也不允许群里讨论内充问题。

       具体的法律条文大家感兴趣可以查查，营利数额较大或者有其他严重情节的会被有期徒刑或者拘役，所以提醒大家一定一定不要有这种违法的念头。

       研究架设游戏半年多的时间我认识很多游戏相关的朋友，有游戏资源网的站长，也有开发游戏的技术高手，还有一些热爱架设游戏的玩家。有几个对架设游戏特别感兴趣的玩家，架设遇到问题会研究很久，架设很多次直到成功。

       其实我想说的是游戏架设大家玩玩就好，这个技术含量并没有那么高，不要把过多的时间和精力浪费在这上，真正有技术含量的是其中的源码实现，修复BUG和完善游戏功能。去把时间用在真正能提升自己的地方，不要本末倒置。

       写本文的目的一个是想把自己对游戏架设的一些经验分享给大家，让大家少走一些弯路，还有一个原因算是对自己的半年多架设游戏的一个总结吧。自己购买了4台服务器，免费运行着6个游戏和数个小游戏，通过架设和玩游戏也收获了很多快乐，但也到此为止啦~

       以后还是会继续维护运行这几款游戏，平时会给大家授权下GM，但应该不会在架设新游戏了，这里对我游戏群里的小伙伴说声抱歉- -，非常感谢大家的支持，我还是会把更多的时间精力放在工作和家庭上，毕竟架设游戏只是个爱好而已。

       倒是有计划开发一款自己的博客主题，名字想好了叫star，每月的号是我和媳妇的纪念日，star小星星则是代表我们的小baby。希望博客主题开发好后大家多多支持捧场啦~

       最后祝大家兔年快乐，新的一年都能有所收获~

       好啦，以上就是我对H5游戏架设经验分享的所有内容，希望对你有所帮助，如有问题可通过我的博客或微信公众号echeverra联系我。

       你学“废”了么？

       （完）

       文章首发于我的博客echeverra.cn/build-game，原创文章，转载请注明出处。

       欢迎关注我的微信公众号echeverra，一起学习进步！不定时会有资源和福利相送哦！