乐趣区

关于typescript:react入门练习2

小游戏练习

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

整个过程次要分为三局部

首页:

次要内容 :游戏难度分成三个等级,扭转变量 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) => ())}

难度第二级

难度第三级

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,达到整体刷新的后果。
难度第二级

难度第三级

页面布局:

首先在 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. 在搭建页面时留神变量初始化,锤炼兼顾思维,在进行办法具体编写之前,把所须要的变量,函数,常量等参数筹备好,后续间接应用,不要呈现边写边减少变量的景象,在结尾整顿时,容易呈现变量或者函数之间相互影响,产生意料之外的变动和谬误。

退出移动版