家好,我是Echa。
前段时间有00后前端程序员粉丝私信小编问道:小时候我们玩什么小游戏,用Vue和React可以开发简易的Web站点小游戏吗?这一类的问题。立马勾起了小编的小时候玩的那些经典小游戏爱的那么痴迷。
经典小游戏爱的那么痴迷
作为80后的小编,虽然秃头程序员没有头发,但是童心还是一直都在的。对于童年时玩过的那些经典游戏,我们始终难以忘怀。回忆和怀念经典最好的方式就是重新体验它们!GitHub作为程序员们的开源宝库,有着很多非常好的项目。.其中有许多可以称之为经典,像《俄罗斯方块》、《记忆翻牌》、《扫雷》、《贪吃蛇》、《坦克大战》等等陪伴我们度过了儿时快乐的时光。
小霸王学习机 一句“小霸王其乐无穷啊”能够勾起多少八零九零的集体回忆,曾经靠一副手柄就能爽快打完魂斗罗、沙罗曼蛇、雪人兄弟、忍者神龟、超级玛丽..。
小霸王
借此机会,小编给大家好物分享10个经典小游戏开源项目(Vue、React版),免费送一个。希望忙碌的粉丝们劳逸结合,可以玩玩,放松放松,有利于身心健康。不过千万别成谜语游戏无法自拔的那种,玩也有一个度。
下面小编给一一介绍,看看哪款游戏是你们的最爱:你可以在试玩过程中自定义游戏关卡并学习源代码。
Github:https://github.com/chvin/react-tetris
体验:https://chvin.github.io/react-tetris/?lan=en
react-tetris - 经典俄罗斯方块小游戏
复刻经典的俄罗斯方块,该项目采用 React+Redux+Immutable 的技术栈。这款游戏的复刻程度堪称像素级别,不仅体现在画面上,还有流畅度、玩法、音效等方面都做到了极致。
俄罗斯方块是一直各类程序语言热衷实现的经典游戏,JavaScript的实现版本也有很多,用React 做好俄罗斯方块则成了我一个目标。
Github:https://github.com/martindrapeau/backbone-game-engine
体验:http://martindrapeau.github.io/backbone-game-engine/super-mario-bros/index.html
backbone-game-engine - 超级马里奥
超级马里奥是比较经典的GBA游戏了,这个红帽子蓝吊带的大胡子工人陪伴着很多90后度过童年。这个游戏支持游戏自定义道具,充分回味童年的乐趣。
特性:
Github:https://github.com/shinima/battle-city
体验:https://battle-city.js.org
坦克大战 单人打
《坦克大战》是由日本南梦宫Namco游戏公司开发的一款平面射击游戏,于1985年发售。游戏以坦克战斗及保卫基地为主题,属于策略型联机类。 这个项目在很大程度上还原了坦克大战游戏。图标、音效和界面等方面,各个细节的几乎一模一样。
坦克大战 双人打
该 GitHub 仓库的版本是经典坦克大战的复刻版本,基于原版素材,使用 React 将各类素材封装为对应的组件。素材使用 SVG 进行渲染以展现游戏的像素风,可以先调整浏览器缩放再进行游戏,1080P 屏幕下使用 200% 缩放为最佳。此游戏使用网页前端技术进行开发,主要使用 React 进行页面展现,使用 Immutable.js 作为数据结构工具库,使用 redux 管理游戏状态,以及使用 redux-saga/little-saga 处理复杂的游戏逻辑。
Github:https://github.com/ekinkaradag/snake-vue3
经典贪吃蛇小游戏
snake-vue3 基于 Vue 3.3、Vite、Vuex 实现的经典贪吃蛇游戏。
Github:https://github.com/laoqiu233/minesweeper-react
Win98 的风格扫雷小游戏
一个扫雷游戏,作者尝试使用老式字体和经典的 Win98 图标,用 CSS 复制 Win98 的风格,使这个项目尽可能真实。该项目使用的技术栈包括:TypeScript、Webpack、React、Redux、React Router。
Github:https://github.com/RylanBot/threejs-tetris-react
3D 俄罗斯方块游戏
基于 Three.js、React、TypeScript 实现的 3D 俄罗斯方块游戏,可以拖动旋转页面进行观察。
Github:https://github.com/HabitRPG/habitica
RPG 角色扮演游戏
这是一个培养习惯的开源应用,那它为什么会出现在游戏集合里呢?因为它会将你培养习惯的过程,当作一个 RPG 角色扮演游戏。
你需要根据设定的习惯,创建对应现实中需要完成的任务,当你完成一个任务时会获得相应的经验和金币,这些东西可以用来提升虚拟人物的等级以及购买装备。但当任务失败时,对应的将失去血量作为惩罚。随着你的等级提升,将会开启更多的玩法,比如:孵化宠物、职业、专属技能、组队打副本等。
Github:https://github.com/Aklilu-Mandefro/game-application-using-react-and-typescript
简单 2D 蛇游戏
使用 React 和 TypeScript 构建的简单 2D 蛇游戏。可以使用 w、a、s 和 d 键来移动蛇。当吃掉水果时,得分和蛇的长度会动态增加,使用 canvas 元素构建。其用到的技术包括:React、Chakra-UI、Redux、Redux-saga。
Github:https://github.com/WeiChongDevelops/3072
体验:https://3072.vercel.app/
3072 数字合并游戏
3072 是一款受流行游戏“2048”启发的数字合并游戏,但游戏玩法与2048截然不同,使用的是 3 的倍数而不是 2,这真的是一种非常深刻和令人振奋的用户体验改变。这个项目使用 TypeScript、React 和 Tailwind CSS 构建,确保高性能的交互性和令人惊艳的响应式设计。
Github:https://github.com/Kirill2603/3d-chess-v2
经典国际象棋游戏
使用 React、Redux Toolkit、ThreeJS、React Three Fiber、ChessJS 和 ChakraUI 构建的经典国际象棋游戏。
Github:https://github.com/LAxBANDA/frontend-concentration-or-memory#concentration-or-memory-game
记忆翻牌游戏
使用 Vue3.3、Pinia、Webpack、TypeScript 开发的一款记忆翻牌游戏。
粉丝们,有没有勾起你们儿童对回忆?喜欢哪款经典小游戏呢?
欢迎在评论区分享讨论。
一台电脑,一个键盘,尽情挥洒智慧的人生;
几行数字,几个字母,认真编写生活的美好;
一 个灵感,一段程序,推动科技进步,促进社会发展。
创作不易,喜欢的老铁们加个关注,点个赞,打个赏,后面会不定期更新干货和技术相关的资讯,速速收藏,谢谢!你们的一个小小举动就是对小编的认可,更是创作的动力。
创作文章的初心是:沉淀、分享和利他。既想写给现在的你,也想贪心写给 10 年、20 年后的工程师们,现在的你站在浪潮之巅,面对魔幻的互联网世界,很容易把一条河流看成整片大海。未来的读者已经知道了这段技术的发展历史,但难免会忽略一些细节。如果未来的工程师们真的创造出了时间旅行机器,可以让你回到现在。那么小编的创作就是你和当年工程师们的接头暗号,你能感知到他们在这个时代的键盘上留下的余温。
速开发一款微信小程序游戏需要经过一系列详细的步骤,确保每个环节都得到充分考虑和处理。以下是每一点的详细阐述:
## 1. 学习基础知识:
首先,掌握基础知识是关键。学习JavaScript语言,作为小程序的逻辑层,它将负责处理用户交互和游戏的逻辑。WXML和WXSS是用于描述小程序结构和样式的两个重要语言。此外,了解JSON格式,因为小程序配置和数据传输通常采用JSON格式。深入学习微信官方文档,了解小程序的整体架构和各项API的使用方式。
## 2. 设计游戏:
在基础知识的基础上,展开游戏设计工作。绘制游戏草图,包括界面布局、元素位置等。然后,详细描述游戏的规则、玩法和交互方式。考虑用户体验,确保游戏设计既吸引人又易于操作。
## 3. 搭建开发环境:
下载并安装微信开发者工具,这是小程序的官方开发环境。该工具提供了一个集成开发的平台,可以实时编辑代码、预览效果和调试。配置好开发者工具,确保与微信账号的关联和小程序的创建。
## 4. 编写代码:
根据游戏设计,开始编写游戏代码。使用JavaScript处理游戏的逻辑,WXML定义页面结构,WXSS定义页面样式,JSON配置小程序的各项属性。根据需要,可以考虑使用游戏开发框架,如Cocos Creator或LayaAir,它们提供了更高层次的封装和更便捷的工具。
## 5. 测试游戏:
在微信开发者工具中,对游戏进行全面测试。检查游戏规则、界面布局和交互是否符合设计要求。解决潜在的问题和BUG。此外,邀请朋友和团队成员参与测试,收集用户体验反馈,进行适时的优化和调整。
## 6. 发布游戏:
当确保游戏质量达到要求后,准备将小程序提交到微信平台进行审核。在提交之前,确保遵循微信的规范和标准,填写相关的发布信息。通过审核后,小程序就可以在微信平台上线。跟踪上线后的反馈,进行后续的维护和更新。
以上步骤构成了一个相对完整的开发流程。在每个步骤中,都要注重细节,确保游戏的质量和用户体验达到预期。随时准备根据实际情况进行调整和优化。
开启数字未来:元宇宙、AR和VR数字科技的革命正在重新定义我们的现实。元宇宙、增强现实(AR)和虚拟现实(VR)正带来前所未有的体验。这些技术改变了教育、宣传、科普和社交娱乐的方式。如果您寻求Unity、虚拟现实或元宇宙方面的解决方案,欢迎联系我们。
者:Tam Hanna
转发链接:https://www.creativebloq.com/how-to/21-ways-to-optimise-your-css-and-speed-up-your-site
*请认真填写需求信息,我们会在24小时内与您取得联系。