用最近很火的 Svelte框架做了几个小游戏...打弹珠、2048、XO、记忆游戏

简介: 大家好,我是零一。前段时间大家都在疯狂讨论Svelte这个前端开发框架,其实这个框架出来很久了,我也不知道为什么突然又被大家拿出来讨论。这个框架为何会引起如此大的争议呢?

来看看他的官网首页介绍


c9b69890909389f7083f9ddb560502db.png


据说这个框架几乎是0运行时代码,非常轻量,很多工作都在编译阶段做掉了,而且不依赖于虚拟DOM,而且是直接操作原生DOM的!怪不得会被大家拿出来疯狂讨论呢!


其实Svelte这个框架确实非常高效,起码在简单的项目里是这样的,因为它省去了虚拟DOM的diffpatch操作,而在复杂的项目里还有待观察(因为容易存在大量重复的代码)!


OK!既然Svelte这个框架适合简单的项目开发,那么可以考虑做几个小游戏玩玩吧~  可以入入门,做出来的游戏也可以用于平时娱乐消遣。就不手把手带你们学习如何从0到1用Svelte开发一个小游戏了,给你们推荐几个大佬已经做出来的项目,你们可以参考学习,哈哈哈哈,当然了也可以直接打开他们做的小游戏开始玩(๑′ᴗ‵๑)I Lᵒᵛᵉᵧₒᵤ❤


一共4个小游戏!接好了!


一、弹球打砖块


第一个小游戏是大家经常在抖音小程序刷到的小游戏——弹球打砖块


游戏简介:一个小球发射出去,被小球碰到的砖块会被消除,砖块全部消除则游戏成功。若小球碰到页面底部,则游戏失败,页面底部底下有一块板,能接住弹回来小球!


用Svelte框架做出来的小游戏的样子


ac2d97486f24a3876fd40b2a904dc258.jpg


源码地址https://github.com/madzadev/breakout


体验地址https://breakout-madza.netlify.app/


二、2048


第二个小游戏就不用我多说了,2048,你们肯定都玩过的


游戏简介:你需要控制所有方块向同一个方向运动,两个相同数字方块撞在一起之后合并成为他们的和,每次操作之后会随机生成一个2或者4,最终得到一个“2048”的方块就算胜利了。


用Svelte框架做出来的小游戏的样子


f21990d549aee0dd1ec4f17fbdb3d6d0.jpg


源码地址https://github.com/madzadev/2048


体验地址https://2048-madza.netlify.app/


三、记忆游戏


第三个小游戏是一个考验记忆的小游戏,相信你们以前肯定都玩过。


游戏简介:先给你展示所有卡牌几秒钟,然后再将卡片置反,你需要点击两张相同的卡片消除掉,卡片全部消除则成功。


用Svelte框架做出来的小游戏的样子


fa97f9d07534cf06f7971b2d809737f5.jpg


源码地址https://github.com/madzadev/memory-game


体验地址https://memory-game-madza.netlify.app/


还有另一款记忆的小游戏,这里也推荐给你们玩玩吧~


体验地址https://mriduldey.github.io/flipflop/


四、XO游戏


第四个小游戏是一个xo游戏,一看你就是冲着这个游戏来的,嘿嘿!你想啥呢?


游戏简介:双方各执一个棋子儿,一个X,一个O,交替下棋,三个同样的棋子儿横向或竖向或斜着连着的一方就胜利了


用Svelte框架做出来的小游戏的样子


0bc08c9cabcf672b1a10ffcb62bac8d5.jpg


源码地址https://github.com/madzadev/tic-tac-toe


体验地址https://tictactoe-madza.netlify.app/


我是零一,如果我的文章对你有帮助,请点个 👍🏻 支持我一下

相关文章
|
29天前
|
IDE Java API
Java游戏开发基础:从零开始制作一个简单的2D游戏
本文介绍了使用Java开发一个简单的2D避障游戏的基础流程。
72 10
|
3月前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
54 2
|
5月前
|
Swift iOS开发 UED
揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【9月更文挑战第5天】本文通过具体案例介绍如何在iOS应用中使用Swift与UIKit实现自定义按钮动画,当用户点击按钮时,按钮将从圆形变为椭圆形并从蓝色渐变到绿色,释放后恢复原状。文中详细展示了代码实现过程及动画平滑过渡的技巧,帮助读者提升应用的视觉体验与特色。
87 11
|
6月前
|
Swift iOS开发 UED
【绝妙创意】颠覆你的视觉体验!揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【8月更文挑战第13天】本文通过一个具体案例,介绍如何使用Swift与UIKit在iOS应用中创建独特的按钮动画效果。当按钮被按下时,其形状从圆形变化为椭圆形,颜色则从蓝色渐变为绿色;释放后,动画反向恢复原状。利用UIView动画方法及弹簧动画效果,实现了平滑自然的过渡。通过调整参数,开发者可以进一步优化动画体验,增强应用的互动性和视觉吸引力。
74 7
|
9月前
|
图形学
【Unity 3D】3D游戏跑酷小子实战教学(附源码和步骤 超详细)
【Unity 3D】3D游戏跑酷小子实战教学(附源码和步骤 超详细)
352 0
如何学习游戏制作?最有效的方法是什么?
我遇到很多的想要学习游戏游戏,但是最终因为各种各样的原因半途而废的人,“半途而废”并不是一件多么稀奇的事,大概我们每个人都是“半途而废”的专家。但是,投入一定的时间和精力,最终却没有学成,会让人有很强的挫败感。如果再三尝试,都没有学成的话,那么这种挫败感是足以让一个人彻底放弃的。 很多人总是去试着一遍一遍的做重复的事,兴致来时,定下一个目标,投入学习,兴致走时,就此终止,下次兴致来时,再投入,再终止…...如此循环往复的在学习与放弃之间徘徊,却很少停下来想一想,为什么总是这样,为什么总是学不成,入不了门?
173 0
游戏开发:碰撞模型,球球大作战小游戏【VB编程经典案例】
游戏开发:碰撞模型,球球大作战小游戏【VB编程经典案例】
143 0
|
小程序
一个小游戏可以变得更好吗
个游戏做到何种程度才算是做完了呢? 这是一个没有标准答案的问题。有的时候一个游戏还没有做出来,它的生命周期就已经结束了,因为创作者放弃了它,或者是公司倒闭,团队解散等等,这一系列情况都可能导致一个游戏被迫结束。也有的时候是创作者不想要在它上面投入更多的时间和精力了,可能是因为没有人愿意玩它,或者说它无法带来正向的收益。此时,一个游戏也算是做完了。
130 0
|
数据可视化 Java
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏14之人身攻击范围指定与获取
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏14之人身攻击范围指定与获取
157 0
|
数据可视化 Java
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏15之拳击范围
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏15之拳击范围
197 0