1.前端实战:从零到一实现H5拼小游戏(附源码)
2.零基础转行，拼图学web要多久？

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

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

       由于这款应用属于H5游戏，游戏源码为了使项目更轻量，拼图我没有使用第三方UI库。游戏源码如果大家想使用基于Vue的拼图第三方移动端UI库，我可以推荐几个我之前使用过的游戏源码靠谱组件库：[此处省略推荐内容]。以上推荐的拼图都是社区完善、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数据可视化等前端知识和实战，欢迎在《趣谈前端》一起学习讨论，共同探索前端的边界。

零基础转行，学web要多久？

       近两年Web前端可以说是狠狠地火了一把，不仅仅是因为招聘市场需求量大，还有一个重要的原因就是，入行门槛低，入门简单。真的是这样吗?

       0基础的小白也能转行吗?很多同学都有这样的疑虑，认为没那么简单。下面总结了一些关于web前端入门的东西，希望对大家有所帮助。

       一、web前端入行门槛低吗?

       对于这个问题，应该辩证地看。相对于IT技术类的其他岗位，web前端绝对算是门槛较低的，当然对应的起点也低。如果是小白入行或转行到IT技术的话，建议选择web前端。

       它的门槛低主要体现在两个方面：

       Web前端入门门槛低体现在HTML和CSS上，前者只是结构标签，后者是样式配置，入门是非常简单的，课呱呱上有全套的入门教程可以免费学习，而且还有配套的题库练习。

       2.Web前端入门门槛低的另一个重要体现就是，符合定律，也就是%的东西使用率占到%。所以很适合囫囵吞枣，因此我们的重点就是把这%学起来，而首先要做的就是把这%的东西找出来。前端这%的东西大概就是常用的html标签，css的盒子模型，基本的原生js，以及熟练使用jquery，ajax，常见浏览器的兼容。

       拿下这些东西意义非凡，一方面证明你适合做前端这份工作，另一方面这些技能能让你找到一份工作。让你能够从容地去学习剩下的%。总之就是专心对付最重要的东西，那些什么less、sass、angular这类的东西，当你把我之前说的基础打好之后，学习起来畅通无阻，随学随用。最后最难的就是实践，只有实践才能学到真正的技术，新人很难参与一些有价值有意义的项目，没有这些项目又很难成长，所以自己有项目可参与应该珍惜。

       二、怎样入门web前端?

       有同学给出了很好的建议，现在小编推荐给大家：

       学习前端就好比如盖房子~HTML就充当了房子架构这部分，也是房子的基础。

       CSS呢，就好比咱们房子的装修，墙面什么颜色，什么风格，什么地板...这些给房子改变风格。

       cssjava，就好比这个房子的功能，房子需要制冷吧，需要暖气吧，也需要上下水吧。这些功能性的就相当于是java，例子可能不是很恰当，只是帮助大家对Web有个初步的认识。

       方法步骤、工具以及开发的案例展现：

       1、前端工具箱(dreamwear/sublime/Photoshop/SVN等)

       2、零基础入门(html，CSS)、常用标签集合、常用选择器&标签类型划分、浮动进阶、定位、表格和表单、兼容性问题处理、整站进阶、css3入门、移动端布局、Animation和Transform、Bootstrap前端开发框架、

       3、项目实战

       这里我也推荐几个适合拿来练手的项目：

       HTML5实现游戏

       HTML实现拼图游戏

       HTML实现扫雷游戏

       CSS3实现抽奖大转盘

       网页版别踩百块游戏

       这些项目可以帮助你在游戏的过程中学会编程，趣味性比较强。这些在课呱呱平台上都是免费分享给大家，在学习期间可以尝试自己练手，很有成就感。