react入门练习2-对react基础知识的综合应用-实现两个动画小游戏

小游戏练习

image.png

源码地址:https://github.com/Eleven11ya...

游戏主要分成两个:gameA和gameB

image.png

image.png

整个过程主要分为三部分

首页:

主要内容:游戏难度分成三个等级,改变变量level的具体数值,传给gameA和gameB两个页面。
重点
1.在src文件夹中创建一个新的文件夹models,使用useModel,创建一个全局变量level,所有页面均可以使用。
2.按钮点击样式的修改,使用:hover,对于点击的按钮有颜色的浮动变化。

gameA:

主要内容:在移动对象中添加图片,对目标图片进行计数。
重点
1.使用useEffect对目标函数进行监听,可以针对不同函数做出相应操作。注意监听的目标和顺序,当顺序不合适的时候,会产生死循环。

useEffect(() => {
console.log(forRun.animationTime);
if (forRun.styleVar && forRun.styleVar.transition) {
  setForRun({ ...forRun, playState: true });
  setTimeout(() => {
    askUser();
    setForRun({ ...forRun, playState: false, styleVar: { ...defaultStyle } });
  }, forRun.animationTime * 1000 + 1000);
}
  }, [forRun.styleVar]);

2.利用transform和transition,使对象进行移动并固定移动时间。

styleVar: {
      height: '100px',
      transition: `all ${forRun.animationTime}s linear`,
      transform: `translateX(${-1 * imageParamListItemWidth * imageParamList.length}px )`,
    },

3.使用window.prompt(),可以在弹窗中输入数据。

const alertInput = window.prompt('请输入看到的白底成年女性头像数量!');

4.取固定范围的随机数

const randomNum = (max: number, min: number) => {
const num = Math.floor(Math.random() * (max - min + 1)) + min;
return num;
  };

5.对数组内元素进行渲染

 {item.map((status, index) => ())}

难度第二级
image.png
难度第三级
image.png

gameB:

主要内容:在固定范围内,截取图片。
重点
1.对图片进行重现达到截图的效果
2.计算图片运行距离:

const endTime = new Date().valueOf();
    const runTime = endTime - startTime;
    const currentLength =
      ((areaWidth + pictureListItemWidth) / forRun.animationTime / 1000) * runTime;
    let isOk: boolean;
    if (level === 1) {
      isOk = currentLength >= 550 && currentLength <= 700;
    } else if (level === 2) {
      isOk = currentLength >= 575 && currentLength <= 675;
    } else {
      isOk = currentLength >= 600 && currentLength <= 650;
    }
    forRun.pictureState = isOk;
    forRun.runLength = currentLength;
    console.log(forRun.runLength, forRun.pictureState);
    startTime = 0;

对图片在新的区域移动相同距离:

transform: `translateX(${1200 - forRun.runLength}px )`,

3.监听文档的enter事件,当此组件销毁时,enter事件删除
useEffect(() => {

document.addEventListener('keypress', handleEnterKey);
return () => {
  document.removeEventListener('keypress', handleEnterKey);
};
  }, [handleEnterKey]);

4.监听键盘事件,按下enter,判断当前是否接收回车按键(a && b),记录按键时间,对数据进行处理,阻止本次播放过程中再次按键。同时为了避免在图片移动时不必要的更新,使useCallback:

 const handleEnterKey = useCallback(
(e: KeyboardEvent) => {if (e.code === 'Enter' && startTime != 0) {}
else{startTakePictures()}}

5.初始样式的类型设为:

styleVar: Record<string, string>;
pictureStyle: Record<string, string>;

6.对state进行setState的时机要判断清楚,不是state有变化了就马上进行set,根据当前情况,如果后续还有其他变化,不需要立即进行setState,还可能产生关联的state一直在改变的情况,就容易出现死循环,可以在确定没有多于变化的时机,在进行一次set,达到整体刷新的结果。
难度第二级
image.png
难度第三级
image.png

页面布局:

首先在config.ts文件中,将layout取消使用,那么项目原本的布局就不再使用。

export default defineConfig({
hash: true,
antd: {},
dva: {
hmr: true,
  },
  layout: false,

在src文件夹中创建一个新的文件夹layouts,在路由文件中,使用新的布局文件。
创建BasicLayout文件:

const { children } = props;
  return (
<>
  <Header />
  <div className={styles.mainContent}>{children}</div>
  <div className={styles.mainFooter}>
    <Footer />
  </div>
</>
  );

优化:

1.鉴于gameB图片运行速度过快,将start按钮取消,换成由enter控制开始和结束。根据code和图片开始时间的有无进行判断。
2.具有相同状态的变量归纳到同一个变量中进行控制。
3.css文件的优化,具有相同样式的进行合并。

总结

1.对useState,useEffect,useModel,table中item的元素渲染等印象深刻,熟练度提高,对代码顺序的严谨提高重视,防止死循环出现。
2.页面布局:灵活使用模板自带的布局,可以套用加以修改。注意route的实际意义,在相对应的route页面添加或修改,不要在config页面做多于修改。
3.提高对JavaScript的认识和理解,熟记常见语法,常见函数。
4.增加对各类样式的熟悉度,针对不同样式需求,可以有多种方式实现。
5.在搭建页面时注意变量初始化,锻炼统筹思想,在进行方法详细编写之前,把所需要的变量,函数,常量等参数准备好,后续直接使用,不要出现边写边增加变量的现象,在结尾整理时,容易出现变量或者函数之间互相影响,产生预料之外的变化和错误。

41 声望
2 粉丝
0 条评论
推荐阅读
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城15阅读 6k评论 3

封面图
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等

似曾相识17阅读 29.1k评论 7

2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting14阅读 652评论 3

封面图
JS 函数式概念: 管道 和 组合
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub [链接] 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

前端小智8阅读 737

Vue3 + Vite2 + TypeScript + Pinia(Vuex)+JSX 搭建企业级开发脚手架【开箱即用】
随着Vue3的普及,已经有越来越多的项目开始使用Vue3。为了快速进入开发状态,在这里向大家推荐一套开箱即用的企业级开发脚手架,框架使用:Vue3 + Vite2 + TypeScript + JSX + Pinia(Vuex) + Antd。废话不多话,...

阳晨@11阅读 3.2k

封面图
快速构建页面结构的 3D Visualization
可以通过 控制台 --&gt; 右边的三个小点 --&gt; More Tools --&gt; Layers 打开。即可以看到页面的一个 3D 层级关系,像是这样:

chokcoco6阅读 1.6k

表格集算表高性能原理——怎样实现纯前端百万行数据秒级响应
集算表 (Table Sheet)是一个具备高性能渲染、数据绑定功能、公式计算能力的数据表格,通过全新构建的关系型数据管理器结合结构化公式,在高性能表格的基础上提供排序、筛选、样式、行列冻结、自动更新、单元格...

葡萄城技术团队4阅读 15.3k

41 声望
2 粉丝
宣传栏