我肝了两周，用react做了一个俄罗斯方块

最新推荐文章于 2023-03-15 22:49:46 发布
最新推荐文章于 2023-03-15 22:49:46 发布
阅读量1.5k 收藏 3
点赞数 4
分类专栏： 每周总结 文章标签： react node.js 游戏开发 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_____w_____/article/details/122015128
版权

在线畅玩

单人畅玩版
双人测试版

介绍

在这里插入图片描述
表面上看，这就是一款简单的俄罗斯方块小游戏，分为单人模式与双人对战模式(测试中),而单人模式目前又分为普通模式与狂暴模式。
我重点说一下狂暴模式，在设置中开启狂暴模式后，当消行的时候就会播放30s-60s的bgm，同时你的方块也会随着bgm抖动起来，就像这样
在这里插入图片描述

技术栈与收获

前端未react，后端为nodejs。在开发中我尝试使用了function core的开发模式，以及使用jestjs,即测试驱动开发，由于有双人模式，自然避不开websocket,因此我也熟悉了websocket的基本使用。

补充

截止到目前为止，还是有很多bug及需要补充的点，后续努力修复。。

仓库: https://github.com/serendipityApe/tetris

达瓦利什
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
React-Tetris
05-08
俄罗斯方块在React 链接-https:
react hooks_通过构建俄罗斯方块游戏来学习React Hooks
cumian8165的博客
08-12 196
react hooksLearn to create a Tetris game with React Hooks in this course from Thomas Weibenfalk. You will learn how to build Tetris from scratch using hooks like useState, useEffect, useCallback and c...
小游戏开发：使用 React 和 Redux Tool Kit 实现俄罗斯方块
最新发布
u012384510的博客
03-15 298
大家好，我是若川。我持续组织了近一年的源码共读活动，感兴趣的可以点此扫码加我微信lxchuan12参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。欢迎星标我的公众号~不错过推文~俄罗斯方块是一款经典小游戏。通过从零开发一款小游戏，我们可以更好地了解开...
javascript 俄罗斯方块(含完整游戏代码)
C_Creator的博客
06-06 4109
function Tetris(pos, type, dir) { this.turn = function () { var flag = 1; switch (this.types_name[this.type]) { case "SQUARE": return true; ...
1. react 编程实践 俄罗斯方块-需求分析
weixin_30338481的博客
09-24 273
1. 需求分析 　　俄罗斯方块的要素 　　　　界面展示 　　　　定时刷新 　　　　键盘响应 　　　　方块模型 　　　　游戏规则 　　俄罗斯方块 比 "电商购物车" 好在哪? 　　　　业务比较简单, 人人都了解, 不需要过多前置知识 　　　　技术栈比较单纯，不需要使用过多的工具 　　　　本身的复杂性高于"购物车" 　　　　可以在成品的基础上进行技术演进， 过渡到...
用 React+Redux+Immutable 做俄罗斯方块
weixin_34161029的博客
12-21 255
俄罗斯方块是一直各类程序语言热衷实现的经典游戏，JavsScript的实现版本也有很多，用React 做好俄罗斯方块则成了我一个目标。 戳 https://chvin.github.io/react-tetris 玩一玩！ 开源地址：https://github.com/chvin/react-tetris 效果预览 正常速度的录制...
react-tetris:React实现简单的俄罗斯方块游戏
05-31
简易俄罗斯方块一个简易的俄罗斯方块游戏实现，使用了 、 和 。 是一个很棒的作品，但我发现在方块靠近墙壁的时候就不能旋转了，这似乎是一个bug，而且手机端使用手势来操作会更好，于是我重写了算法。
tetris-reacthooks:用React钩子制作的俄罗斯方块俄罗斯方块游戏
04-04
在React Hooks和自定义钩子的帮助下进行的俄罗斯方块游戏。 为更好地学习React Hooks而设计。
react-tetris:用React制作的俄罗斯方块游戏
05-08
:alien_monster: React俄罗斯方块基于React制作的俄罗斯方块游戏 :rocket: 技术领域该项目使用以下技术： :laptop: 指令安装依赖项npm install运行项目npm start
react_tetris:俄罗斯方块克隆使用react
05-13
react_tetris 改编自： : 高级事件循环 在页面加载时会初始化一个新的redux存储： 初始状态是Game模型（ES6 class ）的新实例。 Game的构造函数 设置游戏板的尺寸（ rows ， cols ）， 初始化一个空的rubble...
俄罗斯方块React
02-15
该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 而是将所有配置文件和传递依赖项（webpack，Babel，ESLint等）直接复制到您的项目中，以
React-Tetris:React版俄罗斯方块
05-01
React版俄罗斯方块 在这里可以玩: Get start npm install fis3 -g npm install fis3 release (打包: fis3 release prod) fis3 server start Todo 关卡设置 服务端计分统计 优化 fis-config 已知问题 UC手机浏览器背景音乐播放不完整
一个采用reactnative框架开发的俄罗斯方块游戏
08-10
一个采用react-native框架开发的俄罗斯方块游戏
react-tetris:有趣的复古俄罗斯方块
05-13
俄罗斯方块小游戏 游戏界面 充满质感的游戏界面，带你走进俄罗斯方块的精彩世界 游戏亮点 使用了自定义的hookes函数，进行游戏各个状态变量的改变 使用Styled-components 游戏规则 点击Start Game按钮开始游戏 方向键:left_arrow:，方向键:right_arrow:控制方块左右移动 下键:down_arrow:加快方块的掉落速度 上键:up_arrow:顺时针调整方块方向 方块堆积满一行之后将会消除，并且得到相应的分数 随着分数的不断增加，方块降落的速度也逐渐提高，游戏难度逐渐增加 当游戏得分超过10000分，恭喜你获得了胜利 若游戏不小心结束了，可以通过点击Start Game按钮重新开始游戏 游戏部署 Install npm install Game Start npm start It's serverd in 游戏试玩 点击，让我们开始游戏吧！
react-redux-tetris:俄罗斯方块的ReactJSRedux实现
03-07
React俄罗斯方块 概述 经典游戏Tetris的ReactJS实现。 注意事项的实现细节： 使用Redux实施状态管理 使用普通JS实现状态不变性 无负载； 数组/对象操作是通过普通（ES6）JS实现的 动态生成样式的许多情况是因为为什么不这样做（正在进行中） 待办事项 在SCSS中使用媒体查询 将SCSS mixins用于动态样式 使用模块进行文本/翻译（例如i18n ） 当前只有一个客户端应用程序； 也可以创建一个服务器端应用程序（玩家可以创建帐户，查看游戏记录等）。 怎么跑 运行folloinwg终端命令： git clone [email protected]:stephenmurray2/react-redux-tetris.git cd react-redux-tetris npm install cd client npm install npm start 该项目是通过引
你的代码河里吗？
w_____w_____的博客
10-30 3800
为什么写这篇博客 今天晚上本来应该和往常一样，刷两道leetcode题结束卷卷的一天，结果这一道简单字符串题让我破防了 是哪个题让我痛苦面具 反转单词顺序 事情的经过 我之前开启了leetcode的剑指offer专题，这个专题会每天解锁特定类型的2~3道算法题，而我一般白天写bug，晚上刷题。 我今晚刷的第一道题就是上文的罪魁祸首，关于该题leetcode的标签是双指针，事实上在写该题之前我已经写了3天的双指针了，当时我觉得这道题简直是有手就行（事实证明我可能连脚都没有） 于是我就开始看题，理思路，认真思
我肝了两周，写了一个小说阅读app
w_____w_____的博客
11-05 2551
起始 这学期有一门《Android开发与实战》，期末作业是让自己动手做一个app，刚好我还是比较喜欢看小说的，所以就准备写小说阅读器。 app介绍 app名字叫做originBook，简单来说，它的功能就是把浏览器上的盗版小说去一下广告，加入了分页阅读，黑暗模式，字体调节等功能，以大多数人更舒服的方式去阅读。 浏览器中阅读： originBook优化后： 章节页: 黑暗模式： 下载 该项目为开源项目 github地址 android下载地址 由于我没有苹果手机，所以虽然reactNative是跨平
放假第二周（认真学习的第二周）
w_____w_____的博客
01-23 1542
学习 总的来说，学习热情虽然没在学校高涨，但是因为我强大的自控能力，以及我渴望学习热爱学习的小心脏，所以说，这一周的项目进度还是很不错的，写了好多好多东西，非常的nice，还有就是vue，这周又落下了，不过我今天晚上又开始弥补了，从明天开始要边做项目边学vue，边写算法了。 算法 算法也基本保持一天一题的节奏，只要不忘的话。忽然发现好像昨天就没写啊，今天的写完这篇博客就去写，300快都交了，我这高低不整个一等奖？为了我的一等奖，还是要天天认真快乐的写算法啊。 总结 今天不学习，明天变垃圾！！ 奥里给 ..
用React做一个简单地选项卡实例
03-06
好的，以下是一个用 React 做的简单选项卡实例。 首先，我们需要定义一个组件，该组件显示选项卡的标题和内容。 ``` import React, { useState } from 'react'; const Tab = ({ title, content }) => ( <h3>{...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值