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


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

相关文章
|
4月前
|
Python
使用Python开发连连看游戏的技术指南
使用Python开发连连看游戏的技术指南
42 0
|
5月前
|
图形学
【Unity 3D】3D游戏跑酷小子实战教学(附源码和步骤 超详细)
【Unity 3D】3D游戏跑酷小子实战教学(附源码和步骤 超详细)
188 0
|
12月前
如何学习游戏制作?最有效的方法是什么?
我遇到很多的想要学习游戏游戏,但是最终因为各种各样的原因半途而废的人,“半途而废”并不是一件多么稀奇的事,大概我们每个人都是“半途而废”的专家。但是,投入一定的时间和精力,最终却没有学成,会让人有很强的挫败感。如果再三尝试,都没有学成的话,那么这种挫败感是足以让一个人彻底放弃的。 很多人总是去试着一遍一遍的做重复的事,兴致来时,定下一个目标,投入学习,兴致走时,就此终止,下次兴致来时,再投入,再终止…...如此循环往复的在学习与放弃之间徘徊,却很少停下来想一想,为什么总是这样,为什么总是学不成,入不了门?
120 0
|
12月前
游戏开发:碰撞模型,球球大作战小游戏【VB编程经典案例】
游戏开发:碰撞模型,球球大作战小游戏【VB编程经典案例】
|
12月前
微信小游戏开发系列教程2-了解游戏全貌和一些游戏开发中的术语
这一节小蚂蚁将会带着大家先从整体上了解一个小游戏的全貌,然后再熟悉一些游戏开发领域中常用的术语。最后分享一下自己的一些经验和方法,希望能够帮助到那些刚进入游戏开发领域的新人。 欢迎体验我的微信小游戏作品:精致1010
67 0
|
12月前
|
Python
Python实现超级玛丽游戏系列教程01玛丽登场
Python实现超级玛丽游戏系列教程01玛丽登场
98 0
|
12月前
|
小程序
一个小游戏可以变得更好吗
个游戏做到何种程度才算是做完了呢? 这是一个没有标准答案的问题。有的时候一个游戏还没有做出来,它的生命周期就已经结束了,因为创作者放弃了它,或者是公司倒闭,团队解散等等,这一系列情况都可能导致一个游戏被迫结束。也有的时候是创作者不想要在它上面投入更多的时间和精力了,可能是因为没有人愿意玩它,或者说它无法带来正向的收益。此时,一个游戏也算是做完了。
96 0
|
12月前
微信小游戏开发系列教程1-做个小游戏并不难,你也可以的
这是小蚂蚁的人人都能做游戏的系列教程的开篇,做个小游戏没有那么难,你也可以的。 我做了一个精致而温暖的小游戏,欢迎点击试玩。
105 0
|
存储 缓存 前端开发
关于我用iVX沉浸式体验了一把0代码创建飞机大战这件事
很多朋友还是会在后台问iVX的系统架构是什么。 这里我就给大家先再简单详细的介绍一下!~
关于我用iVX沉浸式体验了一把0代码创建飞机大战这件事
|
传感器 移动开发 前端开发
从《淘特斗地主》说起,前端如何做 h5 游戏的游戏体验
从《淘特斗地主》说起,前端如何做 h5 游戏的游戏体验
937 0
从《淘特斗地主》说起,前端如何做 h5 游戏的游戏体验