后端开发教程 - Java、Spring Boot 实战 - msg200.com
8 个项目助你掌握前端技能🥇🏆
我一直相信，最好的学习方式就是实践。招聘人员也更看重实践项目，而不是理论知识。
在过去的一年里，我创建了 8 个 Web 应用和游戏克隆版本。我决定分享它们，以便社区也能从中获得一些灵感。
为了探索和比较各种前端解决方案的工作方式，我尝试使用不同的堆栈，从 Vanilla HTML 到 React、NextJS 和 Svelte。
每个项目都会提供已部署项目的链接以及源代码。如果您喜欢，可以在我的GitHub上点个🌟 。
计算器
💻 正在运行的项目/ 🔗 GitHub 上的源代码
首先，我想开发一些我们日常生活中都会用到的实用应用。计算器似乎很合适。
它时不时就会派上用场。
功能包括：
- 加、减、乘、除
- 支持小数
- 计算百分比
- 反转值
- 重置功能
- 格式化较大的数字
- 根据长度调整输出大小
该项目是用React编写的。
天气应用
💻 正在运行的项目/ 🔗 GitHub 上的源代码
我的目标是通过这个应用查看世界各地的天气状况。我使用了 Openweather API 从他们的网站获取数据。
为了让它看起来更吸引人，我决定将它与一些与显示条件相对应的图标图形结合起来。
功能包括：
- 搜索功能
- 公制与英制
- 当前本地时间和日期
- 温度和湿度
- 风速和风向
- 日出和日落时间
该项目是用NextJS编写的。
图标取自Flaticon。
突破
💻 正在运行的项目/ 🔗 GitHub 上的源代码
Breakout是一款最初由Atari开发和发布的街机游戏。
在“打砖块”游戏中，玩家的目标是摧毁屏幕顶部的所有砖块。一个球会在屏幕顶部和两侧弹起。当砖块被击中时，球会反弹回来，砖块就会被摧毁。
当球触及屏幕底部时，玩家将失去一次回合；为了防止这种情况发生，玩家可以使用一个可水平移动的挡板将球向上弹起，使其保持在游戏中。
功能包括：
- 移动桨+球
- 砖块生成
- 碰撞检测
- 保持得分
- 等级系统
- 生命追踪
- 游戏结束/重置
该项目是用Svelte编写的。
2048
💻 正在运行的项目/ 🔗 GitHub 上的源代码
2048是一款单人滑动拼图益智游戏，最初由意大利网络开发者Gabriele Cirulli于 2014 年编写。
游戏在简单的4×4网格上进行，玩家使用四个方向键移动带有编号的方块，方块会随之滑动。每回合，棋盘上的空位都会随机出现一块新的方块。
游戏的目标是在网格上滑动编号的方块，将它们组合起来，形成数字为 2048 的方块。
功能包括：
- 在 X 轴和 Y 轴上滑动瓷砖
- 碰撞时瓷砖总值
- 特定值的配色方案
- 保持得分
- 最佳成绩记忆
- 获胜者检测
- 游戏结束/重置
该项目是用Svelte编写的。
记忆游戏
💻 正在运行的项目/ 🔗 GitHub 上的源代码
记忆游戏有不同的形式和变化。
我决定采用传统的玩法，玩家需要记住卡牌的位置，并按顺序打开两张相同的图片来得分。所有卡牌都打开后，玩家就获胜了。
我使用 Unsplash API 从他们的网站获取图像。
功能包括：
- 移动追踪
- 匹配百分比
- 胜利状态检测
- 重置功能
该项目是用Svelte编写的。
井字游戏
💻 正在运行的项目/ 🔗 GitHub 上的源代码
井字棋是一款非常流行的双人游戏，玩家轮流在 3×3 的网格中标记“X”或“O”。这款游戏的玩法多种多样，从传统的纸笔游戏到界面各异的在线游戏，应有尽有。
成功将三个标记放置在对角线、水平或垂直行中的玩家获胜。
- 内置移动计算
- 获胜者检测
- 重置功能
该项目是用Svelte编写的。
石头剪刀布
💻 正在运行的项目/ 🔗 GitHub 上的源代码
石头剪刀布起源于中国，随着与东亚的接触不断增加而传播开来，同时随着时间的推移，形成了不同的符号变体。
选择出石头的玩家将击败选择剪刀的玩家，但会输给选择布的玩家；选择布的玩家将输给选择剪刀的玩家。如果两位玩家选择相同的形状，则平局。
功能包括：
- 回合追踪
- 保持得分
- 选择显示
- 电脑选择
- 获胜者检测
- 重置功能
该项目是用React编写的。
图标取自Icons8。
登陆页面
💻 正在运行的项目/ 🔗 GitHub 上的源代码
这个落地页是我在制作作品集时为我的个人域名临时创建的。它的设计理念是简洁易用，无论是设置还是界面。
由于我不再将其托管在我的个人域上，因此我决定从中制作一个模板，以便其他寻找登陆网站的开发人员也可以从中受益。
我还制作了一个关于如何从头开始创建它的教程。
功能包括：
- 关于开发者的信息
- 链接到社交媒体的图标
- 交互式悬停效果
图标取自Icons8。
写作一直是我的热情所在，能够帮助和激励他人让我感到快乐。如有任何疑问，欢迎随时联系我们！
在Twitter、LinkedIn和GitHub上关注我！
想了解更多类似项目，请查看我的作品集。