8个开源的前端小游戏,个个经典!

本文来分享 8 个基于 Vue / React 的小游戏,包括俄罗斯方块、贪吃蛇、扫雷、国际象棋等,个个经典!

3D 俄罗斯方块

基于 Three.js、React、TypeScript 实现的 3D 俄罗斯方块游戏,可以拖动旋转页面进行观察。

Github:https://github.com/RylanBot/threejs-tetris-react

贪吃蛇

基于 Vue 3.3、Vite、Vuex 实现的经典贪吃蛇游戏。

Github:https://github.com/ekinkaradag/snake-vue3

扫雷

一个扫雷游戏,作者尝试使用老式字体和经典的 Win98 图标,用 CSS 复制 Win98 的风格,使这个项目尽可能真实。该项目使用的技术栈包括:TypeScript、Webpack、React、Redux、React Router。

Github:https://github.com/laoqiu233/minesweeper-react

俄罗斯方块

使用 React + Next + Typescript 开发的俄罗斯方块游戏。其功能包括:15个关卡、快速下落和硬下落、方块放置预览、音效和背景音乐、简化的得分系统等。

Github:https://github.com/pablonm/react-tetris

贪吃蛇

使用 React 和 TypeScript 构建的简单 2D 蛇游戏。可以使用 w、a、s 和 d 键来移动蛇。当吃掉水果时,得分和蛇的长度会动态增加,使用 canvas 元素构建。其用到的技术包括:React、Chakra-UI、Redux、Redux-saga。

Github:https://github.com/Aklilu-Mandefro/game-application-using-react-and-typescript

3072

3072 是一款受流行游戏“2048”启发的数字合并游戏,但游戏玩法与2048截然不同,使用的是 3 的倍数而不是 2,这真的是一种非常深刻和令人振奋的用户体验改变。这个项目使用 TypeScript、React 和 Tailwind CSS 构建,确保高性能的交互性和令人惊艳的响应式设计。

Github:https://github.com/WeiChongDevelops/3072

国际象棋

使用 React、Redux Toolkit、ThreeJS、React Three Fiber、ChessJS 和 ChakraUI 构建的经典国际象棋游戏。

Github:https://github.com/Kirill2603/3d-chess-v2

记忆翻牌

使用 Vue3.3、Pinia、Webpack、TypeScript 开发的一款记忆翻牌游戏。

Github:https://github.com/LAxBANDA/frontend-concentration-or-memory

👇🏻 点击下方阅读原文,获取鱼皮往期编程干货

往期推荐

我在简历上写了这个,超级加分!

我用过很多代码生成器,还是选了他

创业真的太累了。。

公司来了位 “新同事”,专门提醒员工接水?

大一结束,我经历了觉醒与顿悟!

我敢打赌,这个架构你一定知道!

相关推荐

  • GPT-4V多模态能力惊人!公式截图直出代码,「龙与魔法世界」瞬间生成,OpenAI总裁激动转发
  • 为大模型而生!顶流大佬发起成立学术会议 COLM,或成为未来 NLP 最强顶会?!
  • GPT-4和DALL·E 3彻底懵逼,这到底是「牛」还是「鲨」
  • 【CVPR2023】多视图对抗判别器 MAD :挖掘未知领域目标检测中的非因果因素
  • 终于,毕业了!
  • 当行政也背上了募资KPI
  • 百川智能获阿里腾讯等3亿美元投资;vivo AI助手Jovi Copilot曝光;商汤推医疗健康大模型“大医”丨AIGC大事日报
  • 硬刚GPT-4!百度文心大模型4.0开启邀测,10余款AI原生应用炸场,国家跳水队站台
  • 开源掌门人云端盛会,你准备好成为开源创新协作的奇点吗?
  • 突发!MIUI 时代落幕,雷军官宣:全新「小米澎湃OS」来了!
  • 自动驾驶数据不用愁!港中文等发布MagicDrive:日夜、雨晴、多视角全覆盖,人、物位置随意变更
  • GPT-4V多模态能力惊人!公式截图直出代码,「龙与魔法世界」瞬间生成,OpenAI总裁激动转发
  • 微软斯坦福新算法,杜绝AI灭绝人类风险!GPT-4自我迭代,过程可控可解释
  • 大模型无法替代码农!普林斯顿芝大惊人发现:GPT-4解决GitHub编程问题成功率为0
  • 这100道练习题,带你玩转Numpy!
  • 除了自动化,数据平台的业务能力还有哪些?
  • 如何基于Apache Doris构建高性能指标引擎?
  • 开源数据库 MatrixOne 的 HTAP 分布式架构演进
  • 数据科学的业务价值转化秘籍
  • MiniGPT-4升级到MiniGPT-v2了,不用GPT-4照样完成多模态任务