•游戏类

•实用类

•好玩类

圆盘抽奖jqueryhtml5前端入门练手小游戏项目源码都放不下了 Node.js

然后依次推举一些项目资料，想要学习的小伙伴可以看看~

游戏类

实在很多常见的小游戏都是纯前端开拓出来的，比如曾经风靡的2048、别踩白块啊等等，大略有趣，对付初学者来说，这些小游戏是非常不错的练手项目。

网页版2048

项目通过搭建一个网页版的 2048 ，让大家学习 web 运用程序的开拓流程、以及如何让运用在移动端自适应处理以应对各种大小的屏幕，布局和初始化，编写游戏的逻辑、实现让它能移动，剖断结果。

是不是和我们玩的2048千篇一律呀，O(∩_∩)O~

HTML5两步实现拼图游戏

项目利用HTML5和css3实现的九宫格拼图游戏。
只要两步既可以实现炫酷的效果和动画。
详细的讲解，让你清楚地知道每一句代码的浸染。
自己开拓完之后还可以玩玩，见告你，你可以开拓它，但是玩可不一定行哦~

网页版扫雷

项目实现一个Web版本的扫雷游戏，通过该项目将学习并实践 JavaScript 和 CSS 等基本的Web开拓知识。

看着就有想玩的冲动啊，有木有~

网页版-别踩白块游戏

项目用最根本的html，css，以及原生的JavaScript实现一个网页版本的“别踩白块”游戏。

做完后可以试着玩玩，看看速率如何，太快或者太慢都可以随时调度。

HTML5实现抓怪物小游戏

项目利用 HTML5 的 Canvas 特性，结合 js 来开拓一个抓小怪物的小游戏。
从中我们可以学习到如何用 HTML5 来构建一个 WebApp。

JavaScript打地鼠游戏

项目为打地鼠，是大家耳熟能详的一款经典的小游戏，用前端技能来实现这个游戏，大略有趣。

JavaScript按键掌握坦克移动

项目利用javascript按键掌握坦克在网页上移动，通过利用很大略的，清晰明了的代码使坦克在页面上平滑的移动，通过学习，可以节制javascript的按键操作，从而让页面更好的与用户互动。

看效果图很大略，但是只要轻微发挥你的想象力，把坦克改成其他的物体，就可以变成其他的小游戏了，比如加一个迷宫，便是走出迷宫游戏了。

实用类

前面先容了前端开拓游戏的项目教程，当然前端还可以开拓一些非常实用的功能，比如小到网站的导航条啊，一个抽奖页面啊等等，这些在网页上常常看到的页面展示功能，基本都是前端开拓出来的，因此，下面先容一些比较实用的前端项目教程。

CSS与JavaScript实现选项卡

这个项目实现前端网页常常用到的 Tab 选项卡效果。
紧张用到 HTML、CSS 和 JavaScript 技能，比较适宜前端入门练习。

一起来抽奖吧

一到各种节假日就各种的抽奖活动数不胜数，大奖很丰硕，但是，你懂得。
这个项目教大家利用CSS3来制作一个抽奖转盘，一窥抽奖转盘的秘密。

Java和WebSocket开拓网页谈天室

WebSocket是HTML5一种新的协议，它实现了浏览器与做事器全双工通信，这个项目利用WebSocket来开拓网页谈天室，前端框架会利用AmazeUI，后台利用Java，编辑器利用UMEditor。

瀑布流加载图片墙

项目通过瀑布流加载图片墙，实现无限图片展示的效果，类似百度图片一样的加载办法，表示图片的交错排列。
从中学习在没有后端开拓者供应数据的背景下，由我们前端自己仿照数据及数据接口，自己就能给自己供应任何自己想要的数据。

canvas实现放大镜效果

项目由 HTML5 的 canvas 实现放大镜效果，和淘宝图片放大器类似的效果，紧张依赖 canvas 中的 drawImage() 函数，希望能通过实现这个大略的项目来让大家初步认识 canvas ，学会基本的 canvas 操作。

用CSS和jQuery打造一个大略的图片编辑器

项目利用 CSS 的 filter 和大略的 Jquery 代码来实现一个大略的图片编辑器包括对图片的透明度，黑白，图片亮度等调节。

120行代码实现大略的即时搜索

项目利用 Meteor 和 MongoDB 实现一个大略的即时搜索做事。
通过本项目将学习到 Mongodb 数据库的操作，Meteor 快速制作 Web App。

纯前端打造实时markdown编辑器

项目通过纯前端打造一个实时 markdown 编辑器，用到的库或框架紧张有 marked，Ace，highlight.js，Bootstrap。
通过本实验学习如何编写一个 web 运用程序的干系知识。

CSS3实现“红包照片”模糊效果

微信朋友圈里的红包照片，还有 ios7 带来的“毛玻璃”菜单效果都很吸引眼球，该项目就考试测验用熟习的 CSS3 来实现这个效果。

利用 Electron 编写跨平台桌面运用

该项目紧张学习如何用 Electron 合营 JavaScript 等 web 技能创建跨 Linux/Windows/macOS 平台的桌面运用。

好玩类

前端还可以用比较大略的办法实现一些可爱的东西，比如暖男-大白，萌宠-小黄人等等，只要你能想到的，险些都可以用前端来实现，下面就先容几个项目教程。

打造网页版「大白」

该项目利用 HTML 和 CSS 来打造《超能陆战队》里的 “暖男” -「大白」。
学习如何用 HTML 结合 CSS 来设计高端大气上档次的图，并理解 HTML 布局，CSS 构建工具的样式。

JavaScript实现玫瑰花

项目学习如何在网页中如何利用JavaScript措辞实现一朵俊秀的玫瑰花。
个中会用到html，css，javascript等技能。

这个玫瑰花的末了效果是逐步开放和显现出来的，很浪漫的赶脚啊~

SCSS（SASS）画小黄人

项目通过 SCSS（SASS）画一个会眨眼睛的小黄人，紧张学习 CSS3。
个中将涉及 SASS 安装，代码的编写，以及绘制小黄人的干系构造逻辑。

看完以上3个项目，你能想象都是用前端来实现的么，O(∩_∩)O~

源码可以私信我哦

以上呢，先容了那么多的前端开拓项目，如果你还说你找不到项目，不知道做什么，没有完全的教程，那么便是你的不对了，以是，挑选一个感兴趣的项目开始学习吧！