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


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

相关文章
|
6月前
|
前端开发 JavaScript
前端复刻经典小游戏之飞机大战(一)
前端复刻经典小游戏之飞机大战(一)
65 1
|
6月前
|
前端开发 JavaScript 安全
前端复刻经典小游戏之飞机大战(三)
前端复刻经典小游戏之飞机大战(三)
64 0
|
6月前
|
前端开发 JavaScript 测试技术
前端复刻经典小游戏之飞机大战(二)
前端复刻经典小游戏之飞机大战(二)
90 0
游戏开发零基础入门教程(10):游戏积木之碰撞
顾名思义就是两个物体碰到一起。联系到我们的现实世界,你随手将一个东西扔出去,这个东西最终掉落在地上,就可以说这个东西与地面发生了碰撞。在游戏开发中,我们关注的“碰撞”重点在于发生的那一刻:是谁碰到了谁,碰撞的一方或者被撞的一方又该做出怎样的反应。
78 0
游戏开发零基础入门教程(10):游戏积木之碰撞
游戏开发零基础入门教程(1):先对游戏有个概念
首先回答第一个问题,是的,学完这个教程后,你能够做出自己的游戏。这里,有一点儿地方需要澄清一下,“做出来”跟“能够做出来”是完全不同的,“做出来”是既定的事实,去做了,并且做出来了。而“能够做出来”只是一种想象,前提是要先“去做”。
269 0
|
开发工具
游戏开发零基础入门教程系列:人人都能做游戏
你正在阅读的是我原创的游戏开发零基础入门教程系列,面向的是没人任何游戏开发和编程经验,想要学习自己做游戏的普通人。这个系列教程已经帮助了很多人做出了自己人生的第一个游戏,希望它也能帮助到你。
413 0
游戏开发:碰撞模型,球球大作战小游戏【VB编程经典案例】
游戏开发:碰撞模型,球球大作战小游戏【VB编程经典案例】
132 0
游戏开发零基础入门教程(8):游戏积木之逻辑
“如果,那么”的逻辑非常的直白,如果玩家死了,那么游戏就应该结束。反之,如果玩家没有死,那么游戏就不应该结束。如果我干掉了一个敌人,那么我的得分就应该加一。如果敌人被子弹打中了,那么它就应该爆炸......
117 0
从零开始手把手教你使用javascript+canvas开发一个塔防游戏07塔的升级和出售
从零开始手把手教你使用javascript+canvas开发一个塔防游戏07塔的升级和出售
118 0
|
小程序
一个小游戏可以变得更好吗
个游戏做到何种程度才算是做完了呢? 这是一个没有标准答案的问题。有的时候一个游戏还没有做出来,它的生命周期就已经结束了,因为创作者放弃了它,或者是公司倒闭,团队解散等等,这一系列情况都可能导致一个游戏被迫结束。也有的时候是创作者不想要在它上面投入更多的时间和精力了,可能是因为没有人愿意玩它,或者说它无法带来正向的收益。此时,一个游戏也算是做完了。
125 0