1.前端实战:从零到一实现H5拼小游戏(附源码)
2.零基础转行,拼图学web要多久?
前端实战:从零到一实现H5拼小游戏(附源码)
去年,游戏源码我开发了一个基于H5、拼图JavaScript和CSS3的游戏源码拼图小游戏。这款游戏利用了我自己封装的拼图类Jquery框架Xuery,融合了许多经典的游戏源码高仿淘宝源码JavaScript算法和CSS3特性,对提升大家的拼图编程能力大有裨益。文章末尾将提供源码获取方式,游戏源码供大家学习体验。拼图
由于这款应用属于H5游戏,游戏源码为了使项目更轻量,拼图我没有使用第三方UI库。游戏源码如果大家想使用基于Vue的拼图第三方移动端UI库,我可以推荐几个我之前使用过的游戏源码靠谱组件库:[此处省略推荐内容]。以上推荐的拼图都是社区完善、bug较少的组件库,大家可以试试看。
回到我们的橙子源码论坛小游戏开发,主要考验大家对JavaScript和CSS3的掌握程度。学习完这篇文章后,相信大家对JavaScript和CSS3的编程能力都会有极大的提升。之后,我还会介绍如何使用canvas实现生成战绩海报图的功能。
我们先来看看游戏的预览界面:
本文的算法实现方式在之前的拼拼乐文章中已有说明,这里主要介绍核心算法,至于vue-cli的使用方法,我之前也写过对应的文章,大家可以研究学习一下。vue-cli搭建项目方式如下:[此处省略搭建方法]。
关于vue-cli3配置实战,可以参考《一张图教你快速玩转vue-cli3》。
目前,我主要整理了以下核心功能,接下来我会一一为大家实现:实现纯JavaScript上传预览、实现拼图分割功能、菠菜ssr源码实现洗牌算法、实现生成战绩海报功能。
1. 实现纯JavaScript上传预览:文件上传预览主要采用FileReader API实现,原理是将file对象传给FileReader的readAsDataURL,然后转化为data:URL格式的字符串(base编码)以表示所读取文件的内容。具体代码如下:[此处省略代码]。
2. 实现拼图分割功能:一般处理拼图游戏时,我们会采用以下方案:使用canvas分割、采用n张不同的切好的切片(方法简单,但会造成多次请求)、动态背景分割。经过权衡,我选择了一种自认为比较优雅的方法——动态背景分割,只需使用1张,然后利用CSS切割,有点像经典的雪碧图。具体实现如下:[此处省略实现方法]。vslam源码下载
3. 实现洗牌算法:洗牌逻辑依托于随机算法,结合坐标系,实现一个随机生成二维坐标系的逻辑,然后通过改变每个切片的translate位置,配合过渡动画,即可实现洗牌功能和洗牌动画。具体实现如下:[此处省略实现方法]。
4. 实现生成战绩海报功能:生成战绩海报我采用canvas来实现,对于canvas的api不熟悉的可以查看MDN,讲得比较详细。这里我简单实现一个供大家参考:[此处省略实现方法]。
H5拼图小游戏我已在github开源,感兴趣的朋友可以在我github上学习参考。以上逻辑部分的代码可以直接整合到vue项目中,由于实现比较简单,这里我就不详细介绍了。
如果想学习更多H5游戏、quick引擎源码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实现抽奖大转盘
网页版别踩百块游戏
这些项目可以帮助你在游戏的过程中学会编程,趣味性比较强。这些在课呱呱平台上都是免费分享给大家,在学习期间可以尝试自己练手,很有成就感。