用最近很火的 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/


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

相关文章
|
2月前
|
Java
3D炫酷赛车游戏【附源码】设计实现
3D炫酷赛车游戏【附源码】设计实现
40 10
|
7天前
|
Swift iOS开发 UED
【绝妙创意】颠覆你的视觉体验!揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【8月更文挑战第13天】本文通过一个具体案例,介绍如何使用Swift与UIKit在iOS应用中创建独特的按钮动画效果。当按钮被按下时,其形状从圆形变化为椭圆形,颜色则从蓝色渐变为绿色;释放后,动画反向恢复原状。利用UIView动画方法及弹簧动画效果,实现了平滑自然的过渡。通过调整参数,开发者可以进一步优化动画体验,增强应用的互动性和视觉吸引力。
24 7
|
2月前
|
前端开发 JavaScript
前端复刻经典小游戏之飞机大战(一)
前端复刻经典小游戏之飞机大战(一)
38 1
|
2月前
|
前端开发 JavaScript 测试技术
前端复刻经典小游戏之飞机大战(二)
前端复刻经典小游戏之飞机大战(二)
68 0
|
2月前
|
前端开发 JavaScript 安全
前端复刻经典小游戏之飞机大战(三)
前端复刻经典小游戏之飞机大战(三)
30 0
|
3月前
|
Python
使用Python开发连连看游戏的技术指南
使用Python开发连连看游戏的技术指南
108 0
游戏开发零基础入门教程(10):游戏积木之碰撞
顾名思义就是两个物体碰到一起。联系到我们的现实世界,你随手将一个东西扔出去,这个东西最终掉落在地上,就可以说这个东西与地面发生了碰撞。在游戏开发中,我们关注的“碰撞”重点在于发生的那一刻:是谁碰到了谁,碰撞的一方或者被撞的一方又该做出怎样的反应。
61 0
游戏开发零基础入门教程(10):游戏积木之碰撞
游戏开发零基础入门教程(1):先对游戏有个概念
首先回答第一个问题,是的,学完这个教程后,你能够做出自己的游戏。这里,有一点儿地方需要澄清一下,“做出来”跟“能够做出来”是完全不同的,“做出来”是既定的事实,去做了,并且做出来了。而“能够做出来”只是一种想象,前提是要先“去做”。
236 0
微信小游戏开发系列教程2-了解游戏全貌和一些游戏开发中的术语
这一节小蚂蚁将会带着大家先从整体上了解一个小游戏的全貌,然后再熟悉一些游戏开发领域中常用的术语。最后分享一下自己的一些经验和方法,希望能够帮助到那些刚进入游戏开发领域的新人。 欢迎体验我的微信小游戏作品:精致1010
83 0
|
数据可视化 Java
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏15之拳击范围
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏15之拳击范围
158 0